// ContactPage.jsx — DirectCFO contact page
// Sections: Header + two-column (left: info, right: form), Confirmation

function ContactHeader() {
  return (
    <section style={{ background: T.ink, color: T.white }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '120px 32px 96px' }}>
        <div style={{ marginBottom: 48 }}>
          <WordmarkInline size={56} onDark />
          <div style={{
            height: 1, background: T.border_d, marginTop: 24,
          }} />
        </div>
        <Eyebrow tone="mute" style={{ color: T.gold }}>Contact</Eyebrow>
        <h1 style={{
          fontFamily: F.display, fontWeight: 500,
          fontSize: 'clamp(56px, 7vw, 92px)',
          letterSpacing: '-0.035em', lineHeight: 0.98,
          margin: '32px 0 40px', maxWidth: 1080, textWrap: 'balance',
        }}>
          Tell us where you are.<br/>
          We will tell you<br/>
          what we would <span style={{ color: T.gold }}>do.</span>
        </h1>
        <p style={{
          fontFamily: F.body, fontSize: 22, lineHeight: 1.45,
          color: T.mute, margin: 0, maxWidth: 680,
        }}>
          The first call is 30 minutes and free. You will leave with a written memo —
          regardless of whether we ever work together.
        </p>
      </div>
    </section>
  );
}

function ContactBody() {
  const [form, setForm] = React.useState({
    name: '', company: '', email: '', phone: '',
    revenue: '', timeline: '', tier: '', note: '',
  });
  const [sent, setSent] = React.useState(false);
  const [errors, setErrors] = React.useState({});
  const update = k => e => {
    setForm(f => ({ ...f, [k]: e.target.value }));
    if (errors[k]) setErrors(er => { const n = { ...er }; delete n[k]; return n; });
  };

  const submit = (e) => {
    e.preventDefault();
    const required = ['name', 'company', 'email'];
    const errs = {};
    required.forEach(k => { if (!form[k].trim()) errs[k] = 'Required'; });
    if (form.email && !/^\S+@\S+\.\S+$/.test(form.email)) errs.email = 'Check your email';
    if (Object.keys(errs).length) { setErrors(errs); return; }
    setSent(true);
  };

  return (
    <section style={{ background: T.paper, color: T.ink }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', padding: '96px 32px 120px',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 96,
          alignItems: 'start',
        }}>
          {/* Left — firm info */}
          <div>
            <Eyebrow>Direct lines</Eyebrow>
            <div style={{ marginTop: 24 }}>
              <div style={{
                fontFamily: F.display, fontSize: 26, fontWeight: 600,
                letterSpacing: '-0.018em', color: T.ink, lineHeight: 1.2,
              }}>Chris Gilbertson</div>
              <div style={{
                fontFamily: F.mono, fontSize: 12, fontWeight: 500,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                color: T.goldDeep, marginTop: 8,
              }}>Founder · Principal</div>
            </div>

            <HairRule style={{ margin: '32px 0' }} />

            <dl style={{ margin: 0, padding: 0 }}>
              {[
                ['Email',   'chris@directcfoadvisory.com'],
                ['Web',     'directcfoadvisory.com'],
                ['Voice',   '+1 (512) 555-0184'],
                ['Response', 'Within 1 business day'],
              ].map(([k, v], i, arr) => (
                <div key={k} style={{
                  display: 'grid', gridTemplateColumns: '110px 1fr',
                  padding: '14px 0',
                  borderBottom: i < arr.length - 1 ? `1px solid ${T.rule}` : 'none',
                }}>
                  <dt style={{
                    fontFamily: F.mono, fontSize: 12, fontWeight: 500,
                    letterSpacing: '0.18em', textTransform: 'uppercase',
                    color: T.slate,
                  }}>{k}</dt>
                  <dd style={{
                    margin: 0,
                    fontFamily: F.mono, fontSize: 14, color: T.ink,
                    letterSpacing: '0.02em',
                  }}>{v}</dd>
                </div>
              ))}
            </dl>

            <div style={{ marginTop: 48 }}>
              <Eyebrow>Service area</Eyebrow>
              <p style={{
                fontFamily: F.body, fontSize: 15, lineHeight: 1.6,
                color: T.slate, margin: '14px 0 20px', maxWidth: 620,
              }}>
                We work primarily remotely with clients across Texas and beyond. Most of our
                clients are based in the metros below — but the practice extends wherever the
                relationship takes us. Engagements run via video conference; in-person sessions
                are arranged case-by-case when the work calls for it.
              </p>
              <div style={{
                marginTop: 16,
                display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
                gap: 16,
              }}>
                {[
                  ['Houston', 'Client base'],
                  ['Austin', 'Client base'],
                  ['Dallas', 'Client base'],
                  ['San Antonio', 'Client base'],
                ].map(([city, note]) => (
                  <div key={city} style={{
                    border: `1px solid ${T.rule}`, background: T.white,
                    padding: '16px 18px',
                  }}>
                    <div style={{
                      fontFamily: F.display, fontSize: 18, fontWeight: 600,
                      letterSpacing: '-0.01em', color: T.ink,
                    }}>{city}</div>
                    <div style={{
                      fontFamily: F.mono, fontSize: 12, fontWeight: 500,
                      letterSpacing: '0.12em', textTransform: 'uppercase',
                      color: T.slate, marginTop: 8,
                    }}>{note}</div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ marginTop: 48 }}>
              <Eyebrow>What happens next</Eyebrow>
              <ol style={{
                listStyle: 'none', padding: 0, margin: '20px 0 0',
                counterReset: 'step',
              }}>
                {[
                  ['Reply within 1 business day', 'We confirm fit in writing before we book time.'],
                  ['30-min discovery call',        'A real conversation — not a sales call.'],
                  ['Written memo, either way',     'Tier recommendation, or a referral to someone better-suited.'],
                ].map(([h, p], i) => (
                  <li key={h} style={{
                    display: 'grid', gridTemplateColumns: '40px 1fr',
                    gap: 16, padding: '14px 0',
                    borderBottom: `1px solid ${T.rule}`,
                    alignItems: 'baseline',
                  }}>
                    <div style={{
                      fontFamily: F.mono, fontSize: 14, fontWeight: 500,
                      color: T.goldDeep, letterSpacing: '0.08em',
                      fontVariantNumeric: 'tabular-nums',
                    }}>0{i + 1}</div>
                    <div>
                      <div style={{
                        fontFamily: F.body, fontSize: 16, fontWeight: 500, color: T.ink,
                      }}>{h}</div>
                      <div style={{
                        fontFamily: F.body, fontSize: 15, color: T.slate,
                        marginTop: 4, lineHeight: 1.45,
                      }}>{p}</div>
                    </div>
                  </li>
                ))}
              </ol>
            </div>
          </div>

          {/* Right — form */}
          <form
            onSubmit={submit}
            style={{
              background: T.white, border: `1px solid ${T.rule}`,
              padding: 40,
              display: 'flex', flexDirection: 'column', gap: 24,
              position: 'sticky', top: 96,
            }}
          >
            {sent ? (
              <ConfirmationPane form={form} onReset={() => { setSent(false); setForm({ name: '', company: '', email: '', phone: '', revenue: '', timeline: '', tier: '', note: '' }); }} />
            ) : (
              <>
                <div>
                  <Eyebrow>Book a financial review</Eyebrow>
                  <h2 style={{
                    fontFamily: F.display, fontSize: 30, fontWeight: 600,
                    letterSpacing: '-0.02em', color: T.ink,
                    margin: '12px 0 6px', lineHeight: 1.15,
                  }}>Tell us about the business.</h2>
                  <p style={{
                    fontFamily: F.body, fontSize: 15, color: T.slate,
                    margin: 0, lineHeight: 1.5,
                  }}>
                    Five fields that matter. Skip the rest.
                  </p>
                </div>

                <HairRule />

                <div style={{
                  display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20,
                }}>
                  <Field
                    label="Name" required
                    value={form.name} onChange={update('name')}
                    placeholder="First and last"
                  />
                  <Field
                    label="Company" required
                    value={form.company} onChange={update('company')}
                    placeholder="Legal entity"
                  />
                </div>
                <div style={{
                  display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 20,
                }}>
                  <Field
                    label="Email" required type="email"
                    value={form.email} onChange={update('email')}
                    placeholder="you@company.com"
                  />
                  <Field
                    label="Phone"
                    value={form.phone} onChange={update('phone')}
                    placeholder="Optional"
                  />
                </div>

                <Select
                  label="Revenue range"
                  value={form.revenue}
                  onChange={update('revenue')}
                  options={[
                    '',
                    'Under $2M',
                    '$2M – $5M',
                    '$5M – $10M',
                    '$10M – $20M',
                    'Over $20M',
                  ]}
                />

                <Select
                  label="When do you need help"
                  value={form.timeline}
                  onChange={update('timeline')}
                  options={[
                    '',
                    'Right now — fire drill',
                    'Next 30 days',
                    'Next quarter',
                    'Just exploring',
                  ]}
                />

                <TierChoice
                  value={form.tier}
                  onChange={v => setForm(f => ({ ...f, tier: v }))}
                />

                <Field
                  label="What are you trying to decide?"
                  as="textarea"
                  value={form.note} onChange={update('note')}
                  placeholder="Fundraise, cash, hire, cut, scope — whatever is in front of you."
                />

                {Object.keys(errors).length > 0 && (
                  <div style={{
                    fontFamily: F.mono, fontSize: 12, color: '#B34A3A',
                    letterSpacing: '0.12em', textTransform: 'uppercase',
                  }}>
                    Check the required fields above.
                  </div>
                )}

                <HairRule />

                <div style={{
                  display: 'flex', justifyContent: 'space-between',
                  alignItems: 'center', gap: 16, flexWrap: 'wrap',
                }}>
                  <div style={{
                    fontFamily: F.mono, fontSize: 12, color: T.slate,
                    letterSpacing: '0.12em', textTransform: 'uppercase',
                    maxWidth: 260, lineHeight: 1.6,
                  }}>
                    We reply within 1 business day
                  </div>
                  <Button variant="accent">Send for review →</Button>
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

// ── Helpers: Select / TierChoice / Confirmation ─────────────────────────────
function Select({ label, value, onChange, options }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{
        fontFamily: F.mono, fontSize: 12, fontWeight: 500,
        letterSpacing: '0.18em', textTransform: 'uppercase', color: T.slate,
      }}>{label}</span>
      <div style={{ position: 'relative' }}>
        <select
          value={value} onChange={onChange}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          style={{
            width: '100%', appearance: 'none', WebkitAppearance: 'none',
            fontFamily: F.body, fontSize: 15, color: value ? T.ink : T.slate,
            background: T.white,
            border: `1px solid ${focus ? T.ink : T.rule}`,
            borderRadius: 0, padding: '12px 40px 12px 14px',
            outline: 'none',
            boxShadow: focus ? `0 0 0 2px ${T.gold}` : 'none',
            transition: 'border-color 120ms, box-shadow 120ms',
            cursor: 'pointer',
          }}
        >
          {options.map(o => (
            <option key={o} value={o}>{o || 'Select…'}</option>
          ))}
        </select>
        <span style={{
          position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)',
          fontFamily: F.mono, fontSize: 12, color: T.slate,
          letterSpacing: '0.12em', pointerEvents: 'none',
        }}>▾</span>
      </div>
    </label>
  );
}

function TierChoice({ value, onChange }) {
  const options = [
    { k: 'advisor',  label: 'Advisor',  note: 'Monthly' },
    { k: 'partner',  label: 'Partner',  note: 'Bi-weekly' },
    { k: 'embedded', label: 'Embedded', note: 'Weekly' },
    { k: 'unsure',   label: 'Unsure',   note: 'Tell me' },
  ];
  return (
    <div>
      <span style={{
        fontFamily: F.mono, fontSize: 12, fontWeight: 500,
        letterSpacing: '0.18em', textTransform: 'uppercase', color: T.slate,
      }}>Tier you think you need</span>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        marginTop: 8, border: `1px solid ${T.rule}`, background: T.white,
      }}>
        {options.map((o, i) => {
          const selected = value === o.k;
          return (
            <button
              key={o.k}
              type="button"
              onClick={() => onChange(o.k)}
              style={{
                appearance: 'none', border: 'none',
                borderLeft: i > 0 ? `1px solid ${T.rule}` : 'none',
                background: selected ? T.ink : 'transparent',
                color: selected ? T.white : T.ink,
                padding: '14px 8px', cursor: 'pointer',
                transition: 'background 120ms, color 120ms',
                fontFamily: F.body,
                display: 'flex', flexDirection: 'column',
                alignItems: 'center', gap: 4,
              }}
              onMouseEnter={e => { if (!selected) e.currentTarget.style.background = 'rgba(10,22,40,0.04)'; }}
              onMouseLeave={e => { if (!selected) e.currentTarget.style.background = 'transparent'; }}
            >
              <span style={{
                fontSize: 15, fontWeight: 600, letterSpacing: '-0.005em',
              }}>{o.label}</span>
              <span style={{
                fontFamily: F.mono, fontSize: 12, fontWeight: 500,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                color: selected ? T.gold : T.slate,
              }}>{o.note}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function ConfirmationPane({ form, onReset }) {
  return (
    <div style={{ padding: '12px 0' }}>
      <Eyebrow tone="gold">Received</Eyebrow>
      <h3 style={{
        fontFamily: F.display, fontSize: 32, fontWeight: 600,
        letterSpacing: '-0.02em', color: T.ink,
        margin: '18px 0 16px', lineHeight: 1.15, textWrap: 'balance',
      }}>
        Thanks, {form.name.split(' ')[0] || 'there'}. <span style={{ color: T.goldDeep }}>We will be in touch by Friday.</span>
      </h3>
      <p style={{
        fontFamily: F.body, fontSize: 16, color: T.slate,
        margin: '0 0 32px', lineHeight: 1.55,
      }}>
        Chris replies personally to every message. Expect a short email confirming time
        zones and a 30-minute call window that works for you.
      </p>

      <HairRule />

      <dl style={{ margin: '24px 0', padding: 0 }}>
        {[
          ['Company',       form.company],
          ['Email',         form.email],
          ['Revenue',       form.revenue || '—'],
          ['Timeline',      form.timeline || '—'],
          ['Tier interest', form.tier ? form.tier[0].toUpperCase() + form.tier.slice(1) : '—'],
        ].map(([k, v], i, arr) => (
          <div key={k} style={{
            display: 'grid', gridTemplateColumns: '130px 1fr',
            padding: '10px 0',
            borderBottom: i < arr.length - 1 ? `1px solid ${T.rule}` : 'none',
          }}>
            <dt style={{
              fontFamily: F.mono, fontSize: 12, fontWeight: 500,
              letterSpacing: '0.18em', textTransform: 'uppercase', color: T.slate,
            }}>{k}</dt>
            <dd style={{
              margin: 0,
              fontFamily: F.mono, fontSize: 14, color: T.ink,
              letterSpacing: '0.02em', wordBreak: 'break-word',
            }}>{v}</dd>
          </div>
        ))}
      </dl>

      <Button variant="ghost" onClick={onReset}>
        Submit another ↩
      </Button>
    </div>
  );
}

function ContactPage() {
  return (
    <main data-screen-label="Contact">
      <ContactHeader />
      <ContactBody />
    </main>
  );
}

Object.assign(window, {
  ContactPage, ContactHeader, ContactBody, Select, TierChoice, ConfirmationPane,
});