/* ================================================================
   contact-page.jsx — ContactPage wired to Formspree
   To activate: replace YOUR_FORM_ID with your Formspree form ID.
   Sign up at formspree.io, create a form, copy the ID from the URL.
================================================================ */

const FORMSPREE_ID = 'YOUR_FORM_ID';

/* ── Contact info column (stateless — safe for hero-animate) ── */
function ContactInfo() {
  return (
    <div style={{ display: 'flex', gap: 28 }}>
      <div style={{ width: 1, background: 'var(--rule-metal)',
        alignSelf: 'stretch', minHeight: 220, flexShrink: 0 }}></div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
            letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>
            Get in touch
          </span>
          <h1 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(2rem, 3.2vw, 3rem)', lineHeight: 1.06, color: 'var(--fg-1)' }}>
            Let's talk about<br />what's next.
          </h1>
        </div>
        <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
          fontSize: 16, lineHeight: 1.7, color: 'var(--fg-2)', maxWidth: 340 }}>
          If your board is asking for an AI plan and the honest answer is a deck, we should talk. Executive mandates, advisory, and speaking.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <CLine icon="phone" href="tel:6472205095">647.220.5095</CLine>
          <CLine icon="mail"  href="mailto:ryan@ryanmorin.ca">ryan@ryanmorin.ca</CLine>
          <CLine icon="globe" href="https://ryanmorin.ca" ext>ryanmorin.ca</CLine>
          <CLine icon="in"    href="https://linkedin.com/in/ryandmorin" ext>in/ryandmorin</CLine>
        </div>
      </div>
    </div>
  );
}

/* ── Form (stateful — isolated so parent wrappers stay stable) ── */
function ContactForm() {
  const [status, setStatus] = React.useState('idle');
  const [form, setForm]     = React.useState({ name: '', org: '', mandate: '' });

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({ name: form.name, organization: form.org, mandate: form.mandate }),
      });
      setStatus(res.ok ? 'sent' : 'error');
    } catch {
      setStatus('error');
    }
  }

  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  if (status === 'sent') {
    return (
      <div style={{ padding: '52px 0', textAlign: 'center',
        display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'center' }}>
        <span className="rm-metal" style={{ fontFamily: 'var(--font-display)',
          fontWeight: 600, fontSize: 34 }}>Thank you.</span>
        <span style={{ fontFamily: 'var(--font-sans)', color: 'var(--fg-2)', fontSize: 15 }}>
          For taking the time to connect.
        </span>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <CField label="Name" placeholder="Your name"
        value={form.name} onChange={set('name')} required />
      <CField label="Organization" placeholder="Company / Board"
        value={form.org} onChange={set('org')} />
      <CField label="What you're working on" placeholder="A line on the mandate"
        value={form.mandate} onChange={set('mandate')} multiline />
      <div style={{ marginTop: 4 }}>
        <Button type="submit" disabled={status === 'sending'}>
          {status === 'sending' ? 'Sending…' : 'Send a note'}
        </Button>
      </div>
      {status === 'error' && (
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--silver-400)' }}>
          Something went wrong — email <a href="mailto:ryan@ryanmorin.ca"
            style={{ color: 'var(--silver-300)' }}>ryan@ryanmorin.ca</a> directly.
        </span>
      )}
      {FORMSPREE_ID === 'YOUR_FORM_ID' && (
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, color: 'var(--fg-3)',
          lineHeight: 1.5, borderTop: '1px solid var(--ink-line-soft)', paddingTop: 14 }}>
          ⚙ To activate this form: sign up at formspree.io, create a form, and replace
          {' '}<code style={{ fontFamily: 'monospace', background: 'var(--ink-deep)',
            padding: '1px 5px', borderRadius: 2, fontSize: 10 }}>YOUR_FORM_ID</code>
          {' '}at the top of contact-page.jsx with your form ID.
        </span>
      )}
    </form>
  );
}

/* ── Page shell ────────────────────────────────────────────── */
function ContactPage() {
  return (
    <section id="contact" className="rm-section" style={{ padding: '100px 56px 100px' }}>
      <div className="contact-grid" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
        alignItems: 'start', maxWidth: 1100, margin: '0 auto', width: '100%',
      }}>
        {/* Left — static, hero-animate entrance */}
        <div className="hero-animate">
          <ContactInfo />
        </div>

        {/* Right — form card, hero-animate entrance */}
        <div className="hero-animate d2" style={{
          background: 'var(--ink-raised)', borderRadius: 8,
          padding: '36px', boxShadow: 'var(--shadow-lg), var(--shadow-inset-top)',
        }}>
          <ContactForm />
        </div>
      </div>
    </section>
  );
}

/* ── Contact line ──────────────────────────────────────────── */
function CLine({ icon, href, ext = false, children }) {
  const [h, setH] = React.useState(false);
  const isIn = icon === 'in';
  return (
    <a href={href} target={ext ? '_blank' : undefined} rel="noreferrer"
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: 'flex', alignItems: 'center', gap: 13, textDecoration: 'none',
        color: h ? 'var(--fg-1)' : 'var(--fg-2)', transition: 'color 150ms',
        fontFamily: 'var(--font-sans)', fontSize: 15 }}>
      {isIn ? (
        <span style={{ width: 18, height: 18, border: '1.5px solid', borderRadius: '50%',
          borderColor: h ? 'var(--silver-300)' : 'var(--silver-500)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 9, fontWeight: 700, color: h ? 'var(--silver-300)' : 'var(--silver-500)',
          transition: 'all 150ms', flexShrink: 0 }}>in</span>
      ) : (
        <i data-lucide={icon} style={{ width: 18, height: 18, strokeWidth: 1.5, flexShrink: 0 }}></i>
      )}
      {children}
    </a>
  );
}

/* ── Form field ────────────────────────────────────────────── */
function CField({ label, placeholder, value, onChange, required = false, multiline = false }) {
  const [foc, setFoc] = React.useState(false);
  const fieldStyle = {
    fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-1)',
    background: 'var(--ink-deep)', borderRadius: 3, padding: '12px 14px',
    border: '1px solid', borderColor: foc ? 'var(--silver-400)' : 'var(--ink-line)',
    outline: 'none', width: '100%', boxSizing: 'border-box',
    boxShadow: foc ? '0 0 0 3px rgba(188,190,192,.1)' : 'none',
    transition: 'all 160ms', resize: 'vertical',
  };
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
      <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
        letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{label}</span>
      {multiline
        ? <textarea placeholder={placeholder} value={value} onChange={onChange}
            required={required} rows={3}
            onFocus={() => setFoc(true)} onBlur={() => setFoc(false)} style={fieldStyle} />
        : <input type="text" placeholder={placeholder} value={value} onChange={onChange}
            required={required}
            onFocus={() => setFoc(true)} onBlur={() => setFoc(false)} style={fieldStyle} />
      }
    </label>
  );
}

Object.assign(window, { ContactPage, CLine, CField });