// Contact form (multi-step) and Migration guide page

function ContactPage({ setPage }) {
  const [step, setStep] = useState(0);
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState(null);
  const [data, setData] = useState({
    name: '', email: '', phone: '', company: '', role: '', size: '',
    needs: [], timeline: '', message: '',
  });
  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const toggleNeed = (n) => setData(d => ({ ...d, needs: d.needs.includes(n) ? d.needs.filter(x => x !== n) : [...d.needs, n] }));

  const next = () => setStep(s => Math.min(s + 1, 2));
  const back = () => setStep(s => Math.max(s - 1, 0));
  const submit = async () => {
    setSubmitting(true);
    setSubmitError(null);
    try {
      const payload = {
        name: data.name,
        email: data.email,
        phone: data.phone,
        role: data.role,
        company: data.company,
        company_size: data.size,
        needs: data.needs.join(', '),
        timeline: data.timeline,
        message: data.message,
        _subject: `New discovery call request from ${data.name || 'website'}`,
      };
      const res = await fetch('https://formspree.io/f/xeenolzj', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error('Submission failed');
      setSubmitted(true);
    } catch (err) {
      setSubmitError('Sorry — something went wrong. Please email hello@catalysthr.co directly.');
    } finally {
      setSubmitting(false);
    }
  };

  const needsOptions = ['Fractional HR', 'On-demand project', 'Labour relations', 'Workplace investigation', 'Policy development', 'Compensation review', 'Recruitment help', 'Something else'];
  const sizeOptions = ['Just me', '2–10', '11–25', '26–50', '51–100', '100+'];
  const timelineOptions = ['Urgent — this week', 'Within the month', 'Next 1–3 months', 'Exploring'];

  return (
    <React.Fragment>
      <section className="page-header">
        <div className="container">
          <div className="page-header-inner">
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>Get in touch</div>
              <h1>Let's book a<br /><span style={{ color: 'var(--teal)', fontStyle: 'italic' }}>discovery call.</span></h1>
            </div>
            <p>A 30-minute conversation about your team, where it hurts, and what good looks like. No cost, no pitch deck, no pressure. We respond within one business day.</p>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 40 }}>
        <div className="container responsive-2col-asymmetric" style={{ display: 'grid', gap: 64 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>What happens next</div>
            <ol style={{ listStyle: 'none', padding: 0, margin: 0 }}>
              {[
                { t: 'We read your note', b: 'Christine reviews every submission personally.' },
                { t: 'We respond within 1 business day', b: 'Usually with a couple of time options for a call.' },
                { t: '30-minute discovery call', b: 'Video or phone. We listen; you talk about your team.' },
                { t: 'Scoped proposal (if it\'s a fit)', b: 'Plain-language, fixed scope, fixed pricing.' },
              ].map((s, i) => (
                <li key={i} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 14, marginBottom: 24 }}>
                  <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--teal-tint)', color: 'var(--teal)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontFamily: 'var(--mono)', fontWeight: 600 }}>{i + 1}</div>
                  <div>
                    <div style={{ fontWeight: 600, color: 'var(--charcoal)', marginBottom: 4, fontSize: 15.5 }}>{s.t}</div>
                    <div style={{ color: 'var(--ink-muted)', fontSize: 14.5, lineHeight: 1.55 }}>{s.b}</div>
                  </div>
                </li>
              ))}
            </ol>
            <div style={{ marginTop: 48, padding: 24, background: 'var(--sand)', borderRadius: 12 }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--teal)', marginBottom: 8 }}>PREFER EMAIL?</div>
              <div style={{ fontSize: 15.5, color: 'var(--charcoal)' }}>hello@catalysthr.co</div>
            </div>
          </div>

          <div className="form-shell">
            {submitted ? (
              <div className="form-success">
                <div className="form-success-icon">
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                </div>
                <h3>Message received.</h3>
                <p>Thank you, {data.name || 'there'}. Christine will be in touch within one business day — usually sooner. In the meantime, feel free to explore the services page.</p>
                <button className="btn btn-ghost" onClick={() => setPage('services')}>View services <Arrow /></button>
              </div>
            ) : (
              <React.Fragment>
                <div className="form-progress">
                  <div className={`form-progress-step ${step >= 0 ? 'done' : ''}`}></div>
                  <div className={`form-progress-step ${step >= 1 ? 'done' : ''}`}></div>
                  <div className={`form-progress-step ${step >= 2 ? 'done' : ''}`}></div>
                </div>

                {step === 0 && (
                  <div className="form-step">
                    <div className="form-step-label">STEP 1 / 3 · YOU</div>
                    <h3>First, the basics.</h3>
                    <p>Just so we know who we're writing back to.</p>
                    <div className="field-row">
                      <div className="field">
                        <label>Full name *</label>
                        <input type="text" value={data.name} onChange={e => update('name', e.target.value)} placeholder="Jane Smith" />
                      </div>
                      <div className="field">
                        <label>Role / title</label>
                        <input type="text" value={data.role} onChange={e => update('role', e.target.value)} placeholder="Founder, CEO, Ops lead…" />
                      </div>
                    </div>
                    <div className="field-row">
                      <div className="field">
                        <label>Work email *</label>
                        <input type="email" value={data.email} onChange={e => update('email', e.target.value)} placeholder="jane@company.com" />
                      </div>
                      <div className="field">
                        <label>Phone (optional)</label>
                        <input type="tel" value={data.phone} onChange={e => update('phone', e.target.value)} placeholder="(416) 555-0123" />
                      </div>
                    </div>
                  </div>
                )}

                {step === 1 && (
                  <div className="form-step">
                    <div className="form-step-label">STEP 2 / 3 · YOUR COMPANY</div>
                    <h3>Tell us about the team.</h3>
                    <p>Helps us understand the scale and bring the right frame to the call.</p>
                    <div className="field">
                      <label>Company name *</label>
                      <input type="text" value={data.company} onChange={e => update('company', e.target.value)} placeholder="Acme Inc." />
                    </div>
                    <div className="field">
                      <label>Company size *</label>
                      <div className="radio-grid">
                        {sizeOptions.map(s => (
                          <label key={s} className={`checkbox-pill ${data.size === s ? 'checked' : ''}`}>
                            <input type="radio" name="size" checked={data.size === s} onChange={() => update('size', s)} />
                            <span className="box">
                              {data.size === s && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>}
                            </span>
                            {s}
                          </label>
                        ))}
                      </div>
                    </div>
                  </div>
                )}

                {step === 2 && (
                  <div className="form-step">
                    <div className="form-step-label">STEP 3 / 3 · WHAT YOU NEED</div>
                    <h3>What's prompting this?</h3>
                    <p>Pick anything that fits — we'll dig into details on the call.</p>
                    <div className="field">
                      <label>What do you need help with? (pick any)</label>
                      <div className="checkbox-grid">
                        {needsOptions.map(n => (
                          <label key={n} className={`checkbox-pill ${data.needs.includes(n) ? 'checked' : ''}`}>
                            <input type="checkbox" checked={data.needs.includes(n)} onChange={() => toggleNeed(n)} />
                            <span className="box">
                              {data.needs.includes(n) && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>}
                            </span>
                            {n}
                          </label>
                        ))}
                      </div>
                    </div>
                    <div className="field">
                      <label>Timeline</label>
                      <div className="radio-grid">
                        {timelineOptions.map(t => (
                          <label key={t} className={`checkbox-pill ${data.timeline === t ? 'checked' : ''}`}>
                            <input type="radio" name="timeline" checked={data.timeline === t} onChange={() => update('timeline', t)} />
                            <span className="box">
                              {data.timeline === t && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>}
                            </span>
                            {t}
                          </label>
                        ))}
                      </div>
                    </div>
                    <div className="field">
                      <label>Anything else we should know?</label>
                      <textarea value={data.message} onChange={e => update('message', e.target.value)} placeholder="A paragraph is plenty. Skip if you'd rather unpack it live."></textarea>
                    </div>
                  </div>
                )}

                <div className="form-actions">
                  {step > 0 ? (
                    <button className="btn btn-ghost" onClick={back}>← Back</button>
                  ) : <div />}
                  {step < 2 ? (
                    <button className="btn btn-primary" onClick={next} disabled={step === 0 && (!data.name || !data.email)}>
                      Continue <Arrow />
                    </button>
                  ) : (
                    <button className="btn btn-primary" onClick={submit} disabled={submitting}>
                      {submitting ? 'Sending…' : 'Send message'} <Arrow />
                    </button>
                  )}
                </div>
                {submitError && <div style={{ marginTop: 16, padding: '12px 16px', background: '#FBEED8', color: '#8B5A1C', borderRadius: 8, fontSize: 13.5 }}>{submitError}</div>}
              </React.Fragment>
            )}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function MigrationPage({ setPage }) {
  useReveal();
  return (
    <React.Fragment>
      <section className="page-header">
        <div className="container">
          <div className="page-header-inner">
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>Migration guide (internal)</div>
              <h1>Launching the new<br /><span style={{ color: 'var(--teal)', fontStyle: 'italic' }}>catalysthr.co.</span></h1>
            </div>
            <p>A step-by-step, non-technical walkthrough for moving from Squarespace to the new site while keeping your Google-registered domain.</p>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 40 }}>
        <div className="container-tight">
          <div className="mig-callout">
            <strong>Before you start:</strong> you'll need login access to three things — <em>Google Domains / Squarespace Domains</em> (where the domain is registered), <em>Squarespace</em> (where the current site lives), and an account at your <em>new host</em> (we recommend <strong>Vercel</strong> or <strong>Netlify</strong> — both free for a site this size).
          </div>

          <div className="migration-steps">

            <div className="mig-step reveal">
              <div className="mig-step-num">STEP 01 · PREPARE</div>
              <h3>Back up everything.</h3>
              <p>Before touching anything, export what you have. Log into Squarespace and go to <strong>Settings → Advanced → Import / Export</strong>. Download the XML export. Also: take screenshots of every page, copy the written content into a Google Doc, and save all images from the existing site to a folder you keep safe.</p>
              <div className="mig-callout"><strong>Why this matters:</strong> once DNS cuts over, the old site stops being reachable. If anything was missed in the new site, you'll want the source material handy.</div>
            </div>

            <div className="mig-step reveal">
              <div className="mig-step-num">STEP 02 · HOST</div>
              <h3>Create a host account (Vercel recommended).</h3>
              <ol>
                <li>Go to <span className="mig-code">vercel.com</span> and sign up with a Google or GitHub account.</li>
                <li>On the Vercel dashboard, click <strong>Add New → Project</strong>.</li>
                <li>Choose <strong>"Deploy without Git" / Upload</strong> (or connect the folder where your new site files live).</li>
                <li>Name the project <span className="mig-code">catalysthr</span>.</li>
                <li>Click <strong>Deploy</strong>. Within 30 seconds you'll get a temporary URL like <span className="mig-code">catalysthr.vercel.app</span> — bookmark it, you'll need it.</li>
              </ol>
              <div className="mig-callout">Vercel is free for personal / small-business sites. You will never pay for hosting a brochure site this size.</div>
            </div>

            <div className="mig-step reveal">
              <div className="mig-step-num">STEP 03 · REVIEW</div>
              <h3>Test the new site on the temporary URL.</h3>
              <p>Open <span className="mig-code">catalysthr.vercel.app</span> on your phone, on your laptop, and on your partner's laptop. Click every link. Submit the contact form. Ask two friends to do the same.</p>
              <p>Do not skip this step. Once DNS cuts over, visitors will see whatever is live — mistakes become public mistakes.</p>
              <ul>
                <li>All navigation links work</li>
                <li>Contact form submits (if wired to an email tool)</li>
                <li>Logo displays on every page</li>
                <li>Looks right on mobile</li>
              </ul>
            </div>

            <div className="mig-step reveal">
              <div className="mig-step-num">STEP 04 · DOMAIN</div>
              <h3>Find where the domain is registered.</h3>
              <p>You mentioned the domain is through Google. Google Domains was acquired by Squarespace in 2023, so the management is now at one of these two places:</p>
              <ul>
                <li><strong>If you never transferred:</strong> go to <span className="mig-code">domains.squarespace.com</span> and log in with your Google account. Your domain should appear there.</li>
                <li><strong>If you did transfer to another registrar</strong> (like Cloudflare or Namecheap): log into that registrar.</li>
              </ul>
              <div className="mig-callout"><strong>Recommended:</strong> since you're leaving Squarespace entirely, consider transferring the domain to <strong>Cloudflare Registrar</strong> while you're at it. Cloudflare sells domains at-cost (no markup) and their DNS control panel is the cleanest of any registrar. Not required — just a quality-of-life upgrade.</div>
            </div>

            <div className="mig-step reveal">
              <div className="mig-step-num">STEP 05 · CONNECT</div>
              <h3>Point the domain at Vercel.</h3>
              <ol>
                <li>In Vercel, open your project → <strong>Settings → Domains</strong>.</li>
                <li>Type <span className="mig-code">catalysthr.co</span> and click <strong>Add</strong>.</li>
                <li>Vercel will show you <strong>DNS records to add</strong>. Copy them. Typically: an <span className="mig-code">A</span> record pointing to <span className="mig-code">76.76.21.21</span>, and a <span className="mig-code">CNAME</span> for the <span className="mig-code">www</span> subdomain pointing to <span className="mig-code">cname.vercel-dns.com</span>.</li>
                <li>Open a second tab — go to the registrar (Squarespace Domains or Cloudflare) → <strong>DNS settings</strong> for catalysthr.co.</li>
                <li><strong>Delete the existing records</strong> that point to Squarespace's servers (they'll have values like <span className="mig-code">198.185.159.x</span> or be CNAMES to <span className="mig-code">ext-cust.squarespace.com</span>).</li>
                <li>Add the new records from Vercel. Save.</li>
              </ol>
              <div className="mig-callout"><strong>Timing:</strong> DNS changes take anywhere from 5 minutes to 48 hours to propagate globally. Usually it's under an hour.</div>
            </div>

            <div className="mig-step reveal">
              <div className="mig-step-num">STEP 06 · VERIFY</div>
              <h3>Confirm the cutover.</h3>
              <p>Back in Vercel's Domains page, it'll show a green check once DNS has resolved. Visit <span className="mig-code">catalysthr.co</span> in an incognito window — you should see the new site. Check <span className="mig-code">www.catalysthr.co</span> too (it should redirect).</p>
              <p>Also check:</p>
              <ul>
                <li>The padlock icon shows in the browser — SSL is auto-provisioned by Vercel in ~1 minute after DNS resolves</li>
                <li>Type <span className="mig-code">catalysthr.co/about</span> directly — it should load the About page</li>
              </ul>
            </div>

            <div className="mig-step reveal">
              <div className="mig-step-num">STEP 07 · EMAIL</div>
              <h3>Keep email working.</h3>
              <p>If <span className="mig-code">hello@catalysthr.co</span> was forwarded through Squarespace or Google Workspace, you need to <strong>preserve your MX records</strong> when editing DNS.</p>
              <ul>
                <li><strong>Before editing DNS</strong>, screenshot every record — especially any MX and TXT records.</li>
                <li><strong>After editing</strong>, re-add the MX records exactly as they were. Email is on a separate record type from the website, but if you delete MX records by accident, inbound email stops.</li>
                <li>Also preserve any <span className="mig-code">TXT</span> records for SPF, DKIM or domain verification (Google, Microsoft, etc.).</li>
              </ul>
              <div className="mig-callout"><strong>Safe approach:</strong> add the new Vercel records <em>alongside</em> the Squarespace ones first, remove Squarespace A/CNAMEs only, and leave every MX/TXT untouched.</div>
            </div>

            <div className="mig-step reveal">
              <div className="mig-step-num">STEP 08 · CANCEL</div>
              <h3>Cancel Squarespace (after 7 days).</h3>
              <p>Wait one full week after the cutover. Browse the new site every day. If nothing has broken, go to Squarespace → <strong>Settings → Billing → Cancel</strong>.</p>
              <div className="mig-callout"><strong>Do not cancel sooner.</strong> If you discover a bug in the new site and want to roll back temporarily, you can — but only if the Squarespace site is still paid and the DNS can be flipped back.</div>
            </div>

            <div className="mig-step reveal">
              <div className="mig-step-num">STEP 09 · ANALYTICS & SEO</div>
              <h3>Plug in analytics and submit to Google.</h3>
              <ul>
                <li>Sign up for <strong>Plausible</strong> or <strong>Google Analytics 4</strong>. Paste the snippet into the site's <span className="mig-code">&lt;head&gt;</span>.</li>
                <li>Go to <strong>Google Search Console</strong>, add <span className="mig-code">catalysthr.co</span> as a property, verify via DNS TXT record, and submit the sitemap URL.</li>
                <li>Update the LinkedIn company page with the new URL (same URL — just make sure links still land correctly).</li>
                <li>Update any Google Business Profile, directory listings, or email signatures.</li>
              </ul>
            </div>

            <div className="mig-step reveal">
              <div className="mig-step-num">STEP 10 · HANDOFF</div>
              <h3>Document the final setup.</h3>
              <p>Save a one-page doc somewhere Christine can find it, listing: where the domain is registered, where the site is hosted, the login emails for each, the Vercel project URL, and the backup of the old Squarespace export. Future-you will thank you.</p>
            </div>

          </div>

          <div style={{ marginTop: 64, padding: 32, background: 'var(--teal-tint)', borderRadius: 'var(--radius-lg)' }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>TL;DR</div>
            <h3 style={{ fontSize: 22, marginBottom: 12 }}>The whole migration in 5 lines.</h3>
            <ol style={{ color: 'var(--charcoal-soft)', fontSize: 15.5, lineHeight: 1.8, paddingLeft: 22 }}>
              <li>Back up the Squarespace site (export + screenshots + copy).</li>
              <li>Deploy the new site to Vercel; test on the temporary URL until it's perfect.</li>
              <li>At your domain registrar, replace Squarespace A/CNAME records with Vercel's — leave MX untouched.</li>
              <li>Wait for DNS to propagate (usually &lt;1 hr), then verify at <span className="mig-code">catalysthr.co</span>.</li>
              <li>Wait 7 days, cancel Squarespace, resubmit to Google Search Console.</li>
            </ol>
          </div>
        </div>
      </section>

      <CTASection setPage={setPage} />
    </React.Fragment>
  );
}

Object.assign(window, { ContactPage, MigrationPage });