/* CONTACT PAGE */
function ContactForm() {
  const { mobile } = useViewport();
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('sending');
    const form = e.target;
    const data = {
      name: form.elements.name.value,
      email: form.elements.email.value,
      company: form.elements.company.value,
      message: form.elements.message.value,
    };
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
      if (res.ok) {
        setStatus('sent');
        form.reset();
      } else {
        setStatus('error');
      }
    } catch {
      setStatus('error');
    }
  }

  if (status === 'sent') {
    return (
      <div style={{ padding: '48px 0', textAlign: 'center' }}>
        <div style={{ fontFamily: FONTS.display, fontSize: 28, color: C.ink, marginBottom: 12 }}>Thank you</div>
        <div style={{ fontFamily: FONTS.sans, fontSize: 15, color: 'rgba(14,19,32,.65)', lineHeight: 1.6 }}>
          We've received your message and will be in touch shortly.
        </div>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} style={{ display: 'grid', gap: 24 }}>
      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: 24 }}>
        <Field label="Name" name="name" required />
        <Field label="Email" name="email" type="email" required />
      </div>
      <Field label="Company" name="company" />
      <Field label="Message" name="message" textarea required />
      {status === 'error' && (
        <div style={{ fontFamily: FONTS.sans, fontSize: 14, color: C.red }}>
          Something went wrong. Please try again or email us directly.
        </div>
      )}
      <button type="submit" disabled={status === 'sending'} style={{
        background: status === 'sending' ? 'rgba(164,39,33,.6)' : C.red, color: C.bone, padding: '16px 24px',
        fontFamily: FONTS.sans, fontSize: 14, fontWeight: 500, letterSpacing: '0.02em',
        border: 'none', cursor: status === 'sending' ? 'wait' : 'pointer', justifySelf: 'start',
        transition: 'background 0.2s',
      }}>{status === 'sending' ? 'Sending...' : 'Send inquiry →'}</button>
    </form>
  );
}

function Field({ label, name, type = 'text', textarea, required }) {
  const common = {
    width: '100%', padding: '14px 16px',
    background: C.bone, border: `1px solid rgba(56,8,8,.18)`,
    fontFamily: FONTS.sans, fontSize: 15, color: C.ink, outline: 'none',
  };
  return (
    <label style={{ display: 'block' }}>
      <div style={{ fontFamily: FONTS.sans, fontSize: 11, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(56,8,8,.55)', marginBottom: 10 }}>{label}</div>
      {textarea
        ? <textarea name={name} rows={6} required={required} style={common} />
        : <input name={name} type={type} required={required} style={common} />}
    </label>
  );
}

function ContactPage() {
  const { mobile, tablet } = useViewport();
  const compact = mobile || tablet;
  return (
    <Page active="Contact">
      <PageHero
        eyebrow="Contact"
        title="Get in Touch"
        accent="Touch"
        subtitle="Whether you're a founder, operator, or fellow investor — we'd love to hear from you."
      />
      <section style={{ background: C.cream, padding: mobile ? '48px 0 64px' : '96px 0 120px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: mobile ? '0 20px' : '0 56px' }}>
          <FadeIn>
            <div style={{ display: compact ? 'block' : 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 80, alignItems: 'start' }}>
              <div style={{ marginBottom: compact ? 40 : 0 }}>
                <Eyebrow style={{ marginBottom: 18 }}>Send us a note</Eyebrow>
                <div style={{ width: 48, height: 1, background: C.red, marginBottom: 32 }} />
                <ContactForm />
              </div>
              <aside style={{ background: C.cream2, padding: mobile ? 24 : 36, border: `1px solid rgba(56,8,8,.12)` }}>
                <Eyebrow style={{ marginBottom: 18 }}>Office</Eyebrow>
                <div style={{ fontFamily: FONTS.display, fontSize: mobile ? 20 : 24, lineHeight: 1.3, color: C.ink, marginBottom: 12 }}>Hingham Growth Partners</div>
                <div style={{ fontFamily: FONTS.sans, fontSize: 14, color: 'rgba(14,19,32,.7)', lineHeight: 1.7 }}>
                  Hingham, Massachusetts<br />
                  <a href="mailto:ben@hingham.vc" style={{ color: C.red, textDecoration: 'none' }}>info@hingham.vc</a>
                </div>
                <div style={{ height: 1, background: 'rgba(56,8,8,.15)', margin: '32px 0' }} />
                <Eyebrow style={{ marginBottom: 14 }}>For Founders</Eyebrow>
                <div style={{ fontFamily: FONTS.sans, fontSize: 14, lineHeight: 1.7, color: 'rgba(14,19,32,.75)' }}>
                  Building a category-defining consumer brand? We invest $10–20M in growth-stage and high-conviction venture opportunities across food, beverage, beauty, wellness, and commerce enablement.
                </div>
              </aside>
            </div>
          </FadeIn>
        </div>
      </section>
    </Page>
  );
}
window.ContactPage = ContactPage;