// Longworth Seeds — Contact page

function ContactPage({ onNav }) {
  const [form, setForm] = React.useState({
    name: '', company: '', phone: '', email: '',
    enquiry: 'Seed grading',
    crop: '', message: '',
  });
  const [submitted, setSubmitted] = React.useState(false);
  const [errors, setErrors] = React.useState({});

  const handleSubmit = (e) => {
    e.preventDefault();
    const next = {};
    if (!form.name.trim()) next.name = 'Required';
    if (!form.phone.trim() && !form.email.trim()) {
      next.phone = 'Phone or email required';
      next.email = 'Phone or email required';
    }
    if (!form.message.trim()) next.message = 'Tell us a bit about the job';
    setErrors(next);
    if (Object.keys(next).length === 0) setSubmitted(true);
  };

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

  return (
    <div className="route">
      <div className="h-page-top" />

      {/* INTRO */}
      <section className="section paper" style={{ paddingBottom: 56 }} data-screen-label="01 Contact intro">
        <div className="wrap">
          <div className="grid-12" style={{ alignItems: 'end' }}>
            <div style={{ gridColumn: 'span 8' }}>
              <span className="eyebrow no-rule">
                <span style={{ width: 28, height: 1, background: 'currentColor', opacity: 0.6 }}></span>
                Contact · Longworth Seeds
              </span>
              <h1 className="display" style={{ marginTop: 20 }}>
                Pick up the phone. <em>A Longworth will answer.</em>
              </h1>
            </div>
            <p className="lede" style={{ gridColumn: '9 / span 4', alignSelf: 'end' }}>
              David handles seed sales and grading. Peter handles cattle and hay. No call centre, no quote-bot — just two brothers and the same paddock since 1935.
            </p>
          </div>
        </div>
      </section>

      {/* DIRECT CARDS */}
      <section className="section paper tight" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--line)', border: '1px solid var(--line)' }}>
            <PersonCard
              role="Seed sales &amp; grading"
              name="David Longworth"
              phone={window.PHONE_SEED}
              phoneHref={window.PHONE_SEED_HREF}
              email={window.EMAIL_SEED}
              accent
            />
            <PersonCard
              role="Cattle &amp; Hay · Kundle Park"
              name="Peter Longworth"
              phone={window.PHONE_CATTLE}
              phoneHref={window.PHONE_CATTLE_HREF}
              email={window.EMAIL_CATTLE}
            />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--line)', border: '1px solid var(--line)', borderTop: 'none' }}>
            <InfoTile label="Postal &amp; physical" big={window.ADDRESS_LINE1} sub={window.ADDRESS_LINE2} />
            <InfoTile label="Region" big="Mid North Coast" sub="NSW · Kundle Kundle near Taree" />
            <InfoTile label="Office hours" big="Mon–Fri" sub="Harvest season Nov – Feb · extended hours" />
          </div>
        </div>
      </section>

      {/* FORM + SIDEBAR */}
      <section className="section stone" data-screen-label="02 Form">
        <div className="wrap">
          <div className="grid-12" style={{ alignItems: 'start', gap: 64 }}>
            <div style={{ gridColumn: 'span 7' }}>
              <span className="eyebrow">§ Send a message</span>
              <h2 className="h2" style={{ marginTop: 20, marginBottom: 40 }}>
                Tell us about <em>the job.</em>
              </h2>

              {submitted ? (
                <div className="form-success">
                  <h4>Thanks — we'll be in touch.</h4>
                  <p style={{ margin: 0, opacity: 0.85 }}>
                    {form.enquiry === 'Cattle' || form.enquiry === 'Hay & silage'
                      ? `Peter will call you back within one working day. If it's urgent, ring ${window.PHONE_CATTLE} direct.`
                      : `David will call you back within one working day. If it's urgent, ring ${window.PHONE_SEED} direct.`}
                  </p>
                  <button
                    className="btn btn-ghost on-dark"
                    style={{ marginTop: 12, alignSelf: 'flex-start' }}
                    onClick={() => { setSubmitted(false); setForm({ name:'', company:'', phone:'', email:'', enquiry:'Seed grading', crop:'', message:'' }); }}
                  >
                    Send another <Icon.arrow />
                  </button>
                </div>
              ) : (
                <form className="form" onSubmit={handleSubmit}>
                  <div className="form-row">
                    <Field label="Your name" required err={errors.name}>
                      <input type="text" value={form.name} onChange={set('name')} placeholder="Jane Wickham" />
                    </Field>
                    <Field label="Company / Farm">
                      <input type="text" value={form.company} onChange={set('company')} placeholder="Wickham Pastoral" />
                    </Field>
                  </div>
                  <div className="form-row">
                    <Field label="Phone" err={errors.phone}>
                      <input type="tel" value={form.phone} onChange={set('phone')} placeholder="04xx xxx xxx" />
                    </Field>
                    <Field label="Email" err={errors.email}>
                      <input type="email" value={form.email} onChange={set('email')} placeholder="you@farm.com.au" />
                    </Field>
                  </div>
                  <div className="form-row">
                    <Field label="Type of enquiry">
                      <select value={form.enquiry} onChange={set('enquiry')}>
                        <option>Seed grading</option>
                        <option>Comb harvesting</option>
                        <option>Premier Digitaria / coatable line</option>
                        <option>Paspalum / Carpet Grass</option>
                        <option>Hay &amp; silage</option>
                        <option>Cattle · Kundle Park Limousin</option>
                        <option>Something else</option>
                      </select>
                    </Field>
                    <Field label="Crop or product">
                      <input type="text" value={form.crop} onChange={set('crop')} placeholder="e.g. Premier Digitaria · 8 t" />
                    </Field>
                  </div>
                  <Field label="What you need done" required err={errors.message}>
                    <textarea
                      value={form.message}
                      onChange={set('message')}
                      placeholder="A few lines on the seed, the spec, the timing."
                      rows={4}
                    />
                  </Field>
                  <button type="submit" className="btn btn-primary" style={{ alignSelf: 'flex-start', marginTop: 12 }}>
                    Send enquiry <Icon.arrow />
                  </button>
                </form>
              )}
            </div>

            <aside style={{ gridColumn: '9 / span 4' }}>
              <div style={{ background: 'var(--navy)', color: '#fff', padding: 32, borderRadius: 4 }}>
                <span className="eyebrow on-dark">§ Fastest</span>
                <p style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.3, marginTop: 16, marginBottom: 24, color: '#fff', letterSpacing: '-0.01em' }}>
                  Phone always beats email. Especially in harvest.
                </p>
                <a className="btn btn-primary" href={window.PHONE_SEED_HREF} style={{ width: '100%', justifyContent: 'center', marginBottom: 10 }}>
                  <Icon.phone /> Call David · seed
                </a>
                <a className="btn btn-ghost on-dark" href={window.PHONE_CATTLE_HREF} style={{ width: '100%', justifyContent: 'center' }}>
                  <Icon.phone /> Call Peter · cattle / hay
                </a>
              </div>

              <div style={{ marginTop: 32 }}>
                <span className="label">What happens next</span>
                <ol style={{ paddingLeft: 0, listStyle: 'none', counterReset: 'step', marginTop: 16 }}>
                  {[
                    'A Longworth calls you back — usually same day.',
                    'We talk through the seed, the spec, and the timing.',
                    'You get a straight price. No quote-by-email runaround.',
                    'We book the batch in. Done.',
                  ].map((t, i) => (
                    <li key={i} style={{
                      display: 'grid', gridTemplateColumns: '36px 1fr',
                      gap: 12, padding: '14px 0',
                      borderTop: '1px solid var(--line)',
                      alignItems: 'baseline',
                    }}>
                      <span style={{
                        fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em',
                        color: 'var(--leaf-dark)',
                      }}>0{i+1}</span>
                      <span style={{ fontSize: 15, lineHeight: 1.5 }}>{t}</span>
                    </li>
                  ))}
                </ol>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

function PersonCard({ role, name, phone, phoneHref, email, accent }) {
  const bg = accent ? 'var(--leaf-dark)' : 'var(--paper)';
  const fg = accent ? '#fff' : 'var(--ink)';
  const subFg = accent ? 'rgba(255,255,255,0.78)' : 'var(--ink-soft)';
  const labelColor = accent ? 'rgba(255,255,255,0.7)' : 'var(--ink-soft)';
  return (
    <div style={{
      background: bg, color: fg,
      padding: '40px 36px',
      display: 'flex', flexDirection: 'column', gap: 18,
      minHeight: 280,
    }}>
      <span className="label" style={{ color: labelColor }}>{role}</span>
      <h3 style={{
        fontFamily: 'var(--serif)',
        fontSize: 'clamp(32px, 3.2vw, 42px)',
        letterSpacing: '-0.02em', lineHeight: 1.05,
        fontWeight: 400, margin: 0,
      }}>
        {name.split(' ')[0]} <em style={{ fontStyle: 'italic', color: accent ? 'var(--wheat)' : 'var(--leaf-dark)', fontWeight: 300 }}>{name.split(' ').slice(1).join(' ')}</em>
      </h3>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 'auto' }}>
        <a href={phoneHref} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: fg, fontWeight: 600, fontSize: 19 }}>
          <Icon.phone style={{ width: 18, height: 18 }} /> {phone}
        </a>
        <a href={`mailto:${email}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: subFg, fontSize: 15 }}>
          <Icon.mail style={{ width: 18, height: 18 }} /> {email}
        </a>
      </div>
    </div>
  );
}

function InfoTile({ label, big, sub }) {
  return (
    <div style={{
      background: 'var(--paper)',
      padding: '28px 32px',
      display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      <span className="label">{label}</span>
      <span style={{ fontFamily: 'var(--serif)', fontSize: 24, letterSpacing: '-0.01em' }}>{big}</span>
      <span style={{ fontSize: 14, color: 'var(--ink-soft)', marginTop: 2 }}>{sub}</span>
    </div>
  );
}

function Field({ label, required, err, children }) {
  return (
    <div className="form-field">
      <label>
        {label}{required && <span style={{ color: 'var(--leaf-dark)' }}> *</span>}
        {err && <span style={{ float: 'right', color: '#b94a48', textTransform: 'none', letterSpacing: 0, fontFamily: 'var(--sans)', fontWeight: 500 }}>{err}</span>}
      </label>
      {children}
    </div>
  );
}

window.ContactPage = ContactPage;