// ===== Contact / Quote — Plasma v3 =====

function ContactPage() {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({
    name: '', email: '', phone: '',
    looking: '', project: '',
    budget: '', timeline: '',
  });
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const canStep1 = form.name && /.+@.+\..+/.test(form.email);
  const canStep2 = form.looking && form.project;
  const canStep3 = form.timeline;

  const submit = () => {
    setSending(true);
    setTimeout(() => { setSending(false); setSubmitted(true); }, 1100);
  };

  if (submitted) {
    return (
      <Page>
        <section className="section">
          <div className="wrap-tight" style={{ maxWidth: 640, textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
            <Aurora variant="minimal" />
            <div style={{ position: 'relative' }}>
              <div style={{ width: 72, height: 72, margin: '0 auto 28px', borderRadius: 999, background: 'linear-gradient(180deg, rgba(95,212,156,0.20), rgba(95,212,156,0.05))', border: '1px solid rgba(95,212,156,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--good)' }}>
                <Icon.Check style={{ width: 30, height: 30 }} />
              </div>
              <span className="eyebrow no-mark">Quote request received</span>
              <h1 className="grad-text-soft" style={{ marginTop: 18 }}>Thanks, {form.name.split(' ')[0]}.</h1>
              <p className="lead" style={{ margin: '24px auto 0' }}>
                We've got your message. Expect a personal reply within one business day — usually a lot sooner.
              </p>
              <div className="row" style={{ gap: 12, justifyContent: 'center', marginTop: 36 }}>
                <Link to="/" className="btn btn-ghost">Back to home</Link>
                <Link to="/portfolio" className="btn btn-grad btn-lg">Browse work while you wait <Icon.Arr /></Link>
              </div>
            </div>
          </div>
        </section>
      </Page>
    );
  }

  const stepValid = step === 1 ? canStep1 : step === 2 ? canStep2 : canStep3;
  const progress = (step / 3) * 100;

  return (
    <Page>
      <PageIntro
        eyebrow="Get a quote"
        title={<>Tell us what you need. <span className="grad-text">We'll send a quote.</span></>}
        sub="Quick form, no pressure. We'll get back to you within one business day."
      />
      <section className="section-sm">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'start' }}>
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              {/* progress */}
              <div style={{ padding: '20px 32px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 18, background: 'rgba(255,255,255,0.015)' }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Step {step} of 3</div>
                <div style={{ flex: 1, height: 4, borderRadius: 999, background: 'rgba(38,18,74,0.10)', overflow: 'hidden' }}>
                  <div style={{ width: `${progress}%`, height: '100%', background: 'var(--grad)', transition: 'width 0.3s ease' }} />
                </div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--text-muted)' }}>{Math.round(progress)}%</div>
              </div>

              <div style={{ padding: 32 }}>
                {step === 1 && (
                  <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                    <div>
                      <h3>About you</h3>
                      <p style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 6 }}>Who are we talking to, and how do we reach you back?</p>
                    </div>
                    <div className="grid grid-2" style={{ gap: 16 }}>
                      <div className="field">
                        <span className="label">Your name</span>
                        <input className="input" value={form.name} onChange={e => set('name', e.target.value)} placeholder="Jane Smith" />
                      </div>
                      <div className="field">
                        <span className="label">Email</span>
                        <input className="input" value={form.email} onChange={e => set('email', e.target.value)} placeholder="you@yourbusiness.com" type="email" />
                      </div>
                      <div className="field" style={{ gridColumn: '1 / -1' }}>
                        <span className="label">Phone / WhatsApp <span style={{ textTransform: 'none', color: 'var(--text-faint)' }}>(optional)</span></span>
                        <input className="input" value={form.phone} onChange={e => set('phone', e.target.value)} placeholder="+1 555 123 4567" />
                      </div>
                    </div>
                  </div>
                )}
                {step === 2 && (
                  <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                    <div>
                      <h3>What you need</h3>
                      <p style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 6 }}>Pick the closest fit — we'll figure out the rest together.</p>
                    </div>
                    <div className="field">
                      <span className="label">What are you looking for?</span>
                      <div className="row" style={{ gap: 8, flexWrap: 'wrap' }}>
                        {['Website — Starter', 'Website — Professional', 'Website — Enterprise', 'Web Application', 'Not sure yet'].map(t => (
                          <button key={t} className={'chip-btn ' + (form.looking === t ? 'on' : '')} onClick={() => set('looking', t)} type="button">{t}</button>
                        ))}
                      </div>
                    </div>
                    <div className="field">
                      <span className="label">Tell us about your project</span>
                      <textarea className="textarea" value={form.project} onChange={e => set('project', e.target.value)} placeholder="What does your business do, who are your customers, and what do you want the site / app to do?" />
                    </div>
                  </div>
                )}
                {step === 3 && (
                  <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                    <div>
                      <h3>Budget &amp; timing</h3>
                      <p style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 6 }}>Both are optional — but they help us reply with something specific.</p>
                    </div>
                    <div className="field">
                      <span className="label">Budget <span style={{ textTransform: 'none', color: 'var(--text-faint)' }}>(ZAR, optional)</span></span>
                      <div className="row" style={{ gap: 8, flexWrap: 'wrap' }}>
                        {['Under R3,500', 'R3,500–9,000', 'R9,000–18,000', 'R18,000–50,000', 'R50,000+', 'Open'].map(t => (
                          <button key={t} className={'chip-btn ' + (form.budget === t ? 'on' : '')} onClick={() => set('budget', t)} type="button">{t}</button>
                        ))}
                      </div>
                    </div>
                    <div className="field">
                      <span className="label">When do you need this by?</span>
                      <div className="row" style={{ gap: 8, flexWrap: 'wrap' }}>
                        {['ASAP', 'Within a month', '1–3 months', 'Flexible'].map(t => (
                          <button key={t} className={'chip-btn ' + (form.timeline === t ? 'on' : '')} onClick={() => set('timeline', t)} type="button">{t}</button>
                        ))}
                      </div>
                    </div>
                  </div>
                )}

                <div className="row" style={{ marginTop: 32, justifyContent: 'space-between' }}>
                  <button className="btn btn-ghost" onClick={() => setStep(s => Math.max(1, s - 1))} disabled={step === 1} style={{ opacity: step === 1 ? 0.35 : 1, pointerEvents: step === 1 ? 'none' : 'auto' }}>Back</button>
                  {step < 3 ? (
                    <button className="btn btn-grad" disabled={!stepValid} onClick={() => setStep(s => s + 1)} style={{ opacity: stepValid ? 1 : 0.5, pointerEvents: stepValid ? 'auto' : 'none' }}>
                      Continue <Icon.Arr />
                    </button>
                  ) : (
                    <button className="btn btn-grad" disabled={!stepValid || sending} onClick={submit} style={{ opacity: stepValid && !sending ? 1 : 0.6, pointerEvents: stepValid && !sending ? 'auto' : 'none' }}>
                      {sending ? <><span className="spinner" /> Sending</> : <>Send quote request <Icon.Arr /></>}
                    </button>
                  )}
                </div>
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, position: 'sticky', top: 120 }}>
              <div className="card" style={{ padding: 28 }}>
                <span className="eyebrow no-mark">Prefer to talk first?</span>
                <p style={{ fontSize: 14, color: 'var(--text-dim)', marginTop: 14 }}>
                  Book a free 20-minute call. No charge, no pressure, no sales pitch — promise.
                </p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 18 }}>
                  <a href="mailto:info@web-anchor.com" className="row" style={{ gap: 10, padding: '12px 0', borderBottom: '1px solid var(--line)' }}>
                    <Icon.Mail style={{ color: 'var(--violet)' }} />
                    <span style={{ fontSize: 14 }}>info@web-anchor.com</span>
                  </a>
                  <a href="tel:+27789909431" className="row" style={{ gap: 10, padding: '12px 0', borderBottom: '1px solid var(--line)' }}>
                    <Icon.Cal style={{ color: 'var(--violet)' }} />
                    <span style={{ fontSize: 14 }}>078 990 9431 · call</span>
                  </a>
                  <a href="https://wa.me/27789909431" className="row" style={{ gap: 10, padding: '12px 0', borderBottom: '1px solid var(--line)' }}>
                    <Icon.Pulse style={{ color: 'var(--violet)' }} />
                    <span style={{ fontSize: 14 }}>078 990 9431 · WhatsApp</span>
                  </a>
                  <div className="row" style={{ gap: 10, padding: '12px 0' }}>
                    <Icon.Pin style={{ color: 'var(--violet)' }} />
                    <span style={{ fontSize: 14 }}>Cape Town · Worldwide</span>
                  </div>
                </div>
              </div>

              <div className="card" style={{ padding: 24 }}>
                <span className="eyebrow no-mark">What to expect on a call</span>
                <ol style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {[
                    ['A quick chat', 'About your business and what you\u2019re trying to do.'],
                    ['Honest advice', "On whether we're the right fit \u2014 even if the answer is no."],
                    ['A rough idea', 'Of timing and cost before you commit to anything.'],
                  ].map((s, i) => (
                    <li key={i} className="row" style={{ gap: 14, alignItems: 'flex-start' }}>
                      <span style={{ width: 24, height: 24, borderRadius: 999, background: 'rgba(200,166,255,0.10)', border: '1px solid rgba(200,166,255,0.25)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, color: 'var(--violet)', flexShrink: 0, fontFamily: 'var(--mono)' }}>{i + 1}</span>
                      <div>
                        <div style={{ fontSize: 13.5, fontWeight: 500 }}>{s[0]}</div>
                        <div style={{ fontSize: 12.5, color: 'var(--text-muted)', marginTop: 2 }}>{s[1]}</div>
                      </div>
                    </li>
                  ))}
                </ol>
              </div>

              <div className="tile" style={{ fontSize: 12.5, color: 'var(--text-muted)' }}>
                Not into calls? Email <a href="mailto:info@web-anchor.com" style={{ color: 'var(--violet)' }}>info@web-anchor.com</a> or WhatsApp <a href="https://wa.me/27789909431" style={{ color: 'var(--violet)' }}>078 990 9431</a>.
              </div>
            </div>
          </div>
        </div>
      </section>
    </Page>
  );
}

Object.assign(window, { ContactPage });