// Complex (Don't use)
const [items, setItems] = useState([]);
const { data, loading } = useQuery(GET_ITEMS);

useEffect(() => {
  if (data) setItems(data.items);
}, [data]);

// Simple (Webflow-friendly)
const items = mockItems; // Static data = CMS content

// Complex
const value = useMemo(() => expensiveCalc(data), [data]);
const debouncedSearch = useDebounce(searchTerm, 300);

// Simple
const value = data.calculatedValue; // Pre-calculated in mock data
const searchTerm = ""; // Static for prototype

// Complex
const theme = useContext(ThemeContext);
const user = useContext(UserContext);

// Simple
function Component({ theme, user }) {
  // Pass as props instead
}

// Complex
{isLoading ? <Spinner /> : error ? <Error /> : data ? <Content /> : null}

// Simple
{data && <Content />}
// Handle loading/error states in Webflow with conditional visibility

// Complex
const filteredItems = items
  .filter(item => item.category === selectedCategory)
  .map(item => ({ ...item, discount: item.price * 0.1 }))
  .sort((a, b) => b.rating - a.rating);

// Simple
const filteredItems = mockFilteredItems; // Pre-computed in mock data

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
});

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema)
  });
  
  const onSubmit = async (data) => {
    await fetch('/api/login', { method: 'POST', body: JSON.stringify(data) });
  };
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} />
      {errors.email && <span>{errors.email.message}</span>}
      <button type="submit">Login</button>
    </form>
  );
}

function LoginForm({ onSubmit }) {
  // WEBFLOW TRANSLATION:
  // - Use native Webflow form element
  // - Add custom validation via embed if needed
  // - See: webflow-embeds/interactions/form-validation.js
  
  return (
    <form
      className="login-form"
      data-webflow-element="Form"
      onSubmit={onSubmit}
    >
      <input
        type="email"
        name="email"
        className="form__input"
        placeholder="Email"
        required
      />
      
      <input
        type="password"
        name="password"
        className="form__input"
        placeholder="Password"
        required
      />
      
      <button
        type="submit"
        className="btn btn--primary"
      >
        Login
      </button>
    </form>
  );
}