Contact page: Outlook-style email composer in AquaWindow

// Simplified Contact page structure
import { AquaWindow } from '../components/AquaWindow';
import { AquaButton } from '../components/AquaButton';
import { motion }     from 'framer-motion';
import { useState }   from 'react';

export default function Contact() {
  const [isSending, setIsSending] = useState(false);
  const [isSent, setIsSent]       = useState(false);

  function handleSend(e) {
    e.preventDefault();
    setIsSending(true);

    // Simulate a 1.5 s network request
    setTimeout(() => {
      setIsSending(false);
      setIsSent(true);
    }, 1500);
  }

  function handleReset() {
    setIsSent(false);
  }

  return (
    <AquaWindow title="New Message" icon={<MailIcon />}>
      <div className="p-4 bg-slate-50">
        {isSent ? (
          // Success panel
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            className="success-panel text-center py-12"
          >
            <div className="check-circle">
              <CheckIcon size={24} className="text-white" />
            </div>
            <h3>Message Sent!</h3>
            <p>I'll get back to you as soon as my dial-up connects.</p>
            <AquaButton onClick={handleReset}>Send Another</AquaButton>
          </motion.div>
        ) : (
          // Form
          <form onSubmit={handleSend}>
            <div className="field-row">
              <label>To:</label>
              <span className="to-chip">alex@developer.com</span>
            </div>
            <div className="field-row">
              <label>From:</label>
              <input
                type="email"
                required
                disabled={isSending}
                placeholder="your@email.com"
              />
            </div>
            <div className="field-row">
              <label>Subject:</label>
              <input
                type="text"
                required
                disabled={isSending}
                placeholder="Hello!"
              />
            </div>
            <div className="pt-2">
              <textarea
                required
                rows={6}
                disabled={isSending}
                placeholder="Write your message here..."
              />
            </div>
            <div className="flex justify-end pt-2">
              <AquaButton type="submit" disabled={isSending}>
                {isSending ? 'Sending...' : 'Send Message'}
              </AquaButton>
            </div>
          </form>
        )}
      </div>
    </AquaWindow>
  );
}

// In assets/main.js — locate the Contact component (search for "alex@developer.com")
const recipientAddress = 'alex@developer.com'; // The pre-filled, read-only To field
const sendDelay        = 1500;                 // Milliseconds for the simulated send delay

// To connect a real email backend, replace the setTimeout in handleSend:
async function handleSend(e) {
  e.preventDefault();
  setIsSending(true);
  try {
    await fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify({ from, subject, message }),
      headers: { 'Content-Type': 'application/json' },
    });
    setIsSent(true);
  } catch {
    setIsSending(false); // Or add an error state
  }
}