/* Connect (lead capture) + Confirmation */
const { useState: useStateC } = React;

function ConnectPage({ onExit, onSubmit }) {
  const [form, setForm] = useStateC({ first: "", last: "", phone: "", email: "", contact: "text", time: "anytime", consent: false });
  const canSubmit = form.first && form.last && form.phone && form.email && form.consent;

  return (
    <div className="min-h-screen bg-bg">
      <div className="sticky top-0 z-30 bg-bg/80 backdrop-blur border-b hairline">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 h-[64px] flex items-center justify-between">
          <button onClick={onExit} className="inline-flex items-center gap-2 text-sm text-muted hover:text-primary"><Logo/></button>
          <button onClick={onExit} className="text-sm text-muted hover:text-primary inline-flex items-center gap-1.5"><Icon name="x" size={14}/> Close</button>
        </div>
      </div>

      <main className="max-w-[980px] mx-auto px-6 md:px-10 py-12 md:py-16">
        <div className="grid md:grid-cols-12 gap-10">
          <div className="md:col-span-7">
            <Pill tone="gold">Matched specialist</Pill>
            <h1 className="mt-3 font-display text-[32px] md:text-[40px] leading-[1.1] text-primary">
              Let's connect you with <span className="italic">Sarah Chen</span>, a vetted Fix & List specialist in Wichita.
            </h1>
            <p className="mt-3 text-[15.5px] text-muted leading-relaxed max-w-lg">
              Sarah has helped 42 homeowners in 67208 list with focused pre-sale improvements. She'll reach out on your preferred channel.
            </p>

            <Card className="p-6 md:p-7 mt-8">
              <form className="grid grid-cols-1 sm:grid-cols-2 gap-4" onSubmit={(e)=>{e.preventDefault(); if (canSubmit) onSubmit(form);}}>
                <Field label="First name"><TextInput value={form.first} onChange={(e)=>setForm({...form, first: e.target.value})} placeholder="First"/></Field>
                <Field label="Last name"><TextInput value={form.last} onChange={(e)=>setForm({...form, last: e.target.value})} placeholder="Last"/></Field>
                <Field label="Phone"><TextInput type="tel" value={form.phone} onChange={(e)=>setForm({...form, phone: e.target.value})} placeholder="(316) 555-0114"/></Field>
                <Field label="Email"><TextInput type="email" value={form.email} onChange={(e)=>setForm({...form, email: e.target.value})} placeholder="you@example.com"/></Field>

                <div className="sm:col-span-2">
                  <div className="text-sm font-medium text-ink mb-2">Preferred contact</div>
                  <div className="grid grid-cols-3 gap-2">
                    {[
                      {key:"call",  label:"Call",     icon:"phone"},
                      {key:"text",  label:"Text",     icon:"message-square"},
                      {key:"whats", label:"WhatsApp", icon:"message-circle"},
                    ].map(o => {
                      const checked = form.contact === o.key;
                      return (
                        <button type="button" key={o.key} onClick={()=>setForm({...form, contact: o.key})}
                          role="radio" aria-checked={checked}
                          className={"py-3 rounded-lg border text-[13.5px] inline-flex items-center justify-center gap-2 transition " +
                            (checked ? "border-primary bg-primary/5 text-primary" : "hairline bg-white text-ink hover:border-primary/40")}>
                          <Icon name={o.icon} size={14}/> {o.label}
                        </button>
                      );
                    })}
                  </div>
                </div>

                <Field label="Best time" className="sm:col-span-2">
                  <select value={form.time} onChange={(e)=>setForm({...form, time: e.target.value})}
                    className="w-full h-12 px-4 rounded-lg bg-white border hairline text-ink focus:border-primary focus:ring-4 focus:ring-primary/10 outline-none">
                    <option value="anytime">Anytime</option>
                    <option value="morning">Morning (8am – 12pm)</option>
                    <option value="afternoon">Afternoon (12pm – 5pm)</option>
                    <option value="evening">Evening (5pm – 8pm)</option>
                  </select>
                </Field>

                <label className="sm:col-span-2 flex items-start gap-3 p-4 rounded-xl border hairline bg-bg/60 cursor-pointer">
                  <input type="checkbox" checked={form.consent} onChange={(e)=>setForm({...form, consent: e.target.checked})}
                    className="mt-1 w-4 h-4 rounded border-muted accent-[#0F3D3E]" required/>
                  <span className="text-[12.5px] text-muted leading-relaxed">
                    By checking this box, I authorize Sarah Chen and SellerScope to contact me at the number and email provided, including by autodialed calls and text messages, about my home sale. Consent is not a condition of service. Message and data rates may apply. You may reply STOP at any time. See our <a href="#" className="underline">Privacy Policy</a> and <a href="#" className="underline">Terms</a>.
                  </span>
                </label>

                <div className="sm:col-span-2 flex flex-col-reverse sm:flex-row sm:items-center sm:justify-between gap-4 pt-2">
                  <div className="text-[12.5px] text-muted inline-flex items-center gap-2">
                    <Icon name="lock" size={13}/> Shared only with Sarah. Never sold, never rented.
                  </div>
                  <Button size="lg" type="submit" className={canSubmit ? "" : "opacity-50 pointer-events-none"}>
                    Connect me <Icon name="arrow-right" size={16}/>
                  </Button>
                </div>
              </form>
            </Card>
          </div>

          <div className="md:col-span-5">
            <Card className="p-6 sticky top-24">
              <div className="flex items-center gap-4">
                <div className="w-16 h-16 rounded-full photo-ph-warm shrink-0 ring-2 ring-white shadow-soft"/>
                <div>
                  <div className="font-display text-[20px] text-primary">Sarah Chen</div>
                  <div className="text-[13px] text-muted">Licensed Realtor · Wichita Home Partners</div>
                  <div className="mt-1 inline-flex items-center gap-1 text-accent text-[13px]">
                    {[0,1,2,3,4].map(n => <Icon key={n} name="star" size={12}/>)}
                    <span className="text-muted ml-1">4.9 (127 reviews)</span>
                  </div>
                </div>
              </div>
              <p className="mt-4 text-[14px] text-ink leading-relaxed">
                Sarah grew up in northeast Wichita and has specialized in pre-sale improvement strategies for the last seven years.
              </p>
              <ul className="mt-5 pt-5 border-t hairline space-y-2 text-[13.5px] text-muted">
                <li className="inline-flex items-center gap-2"><Icon name="check" size={14} className="text-success"/> Licensed in Kansas (#KS-84031)</li>
                <li className="inline-flex items-center gap-2"><Icon name="check" size={14} className="text-success"/> 42 closed sales in 67208 last year</li>
                <li className="inline-flex items-center gap-2"><Icon name="check" size={14} className="text-success"/> Average 6 days to first offer</li>
              </ul>
              <div className="mt-5 pt-5 border-t hairline text-[12.5px] text-muted inline-flex items-center gap-2">
                <Icon name="clock" size={13}/> Typically responds in under 15 minutes
              </div>
            </Card>
          </div>
        </div>
      </main>
    </div>
  );
}

/* Page 7 — Confirmation */
function ConfirmationPage({ onExit, onBackToReport }) {
  const MotionDiv = motion.div;
  return (
    <div className="min-h-screen bg-bg flex flex-col">
      <div className="sticky top-0 z-30 bg-bg/80 backdrop-blur border-b hairline">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 h-[64px] flex items-center justify-between">
          <button onClick={onExit} className="inline-flex items-center gap-2 text-sm text-muted hover:text-primary"><Logo/></button>
          <Button variant="ghost" size="sm" onClick={onExit}>Done</Button>
        </div>
      </div>

      <main className="flex-1 max-w-[760px] mx-auto px-6 md:px-10 py-16 md:py-20 w-full">
        <MotionDiv initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}
          className="text-center"
        >
          <MotionDiv
            initial={{ scale: 0.6, opacity: 0 }} animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.6, delay: 0.15, type: "spring", stiffness: 140, damping: 14 }}
            className="mx-auto w-20 h-20 rounded-full bg-success/10 inline-flex items-center justify-center mb-6"
          >
            <motion.span
              initial={{ pathLength: 0 }} animate={{ pathLength: 1 }} transition={{ duration: 0.5, delay: 0.5 }}
              className="text-success"
            >
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                <path d="M20 6 9 17l-5-5"/>
              </svg>
            </motion.span>
          </MotionDiv>

          <h1 className="font-display text-[32px] md:text-[40px] leading-[1.1] text-primary">
            You're all set. Sarah will reach out within 15 minutes.
          </h1>
          <p className="mt-3 text-[15.5px] text-muted leading-relaxed max-w-md mx-auto">
            Expect a WhatsApp message shortly. You can reply anytime — there's no pressure, and no obligation.
          </p>
        </MotionDiv>

        <Card className="mt-10 p-6 md:p-7">
          <div className="flex items-center gap-4">
            <div className="w-16 h-16 rounded-full photo-ph-warm shrink-0 ring-2 ring-white shadow-soft"/>
            <div className="flex-1">
              <div className="font-display text-[20px] text-primary">Sarah Chen</div>
              <div className="text-[13px] text-muted">Licensed Realtor · Wichita Home Partners</div>
              <div className="mt-1 inline-flex items-center gap-1 text-accent text-[13px]">
                {[0,1,2,3,4].map(n => <Icon key={n} name="star" size={12}/>)}
                <span className="text-muted ml-1">4.9 (127 reviews)</span>
              </div>
            </div>
            <Pill tone="success"><Icon name="circle-check" size={12}/> Matched</Pill>
          </div>
          <p className="mt-4 text-[14px] text-ink leading-relaxed">
            Grew up in northeast Wichita. Specializes in pre-sale improvement strategies for homes built 1970–2000.
          </p>

          <div className="mt-6 pt-6 border-t hairline">
            <div className="text-[11.5px] uppercase tracking-[0.1em] text-muted mb-4">What happens next</div>
            <ol className="space-y-5 relative">
              <span className="absolute left-[11px] top-6 bottom-6 w-px bg-primary/15"/>
              {[
                { t: "Now",          title: "Introduction sent", body: "We've shared your analysis with Sarah."},
                { t: "≤ 15 min",     title: "Sarah reaches out", body: "She'll send a short WhatsApp message to say hello." },
                { t: "This week",    title: "Walkthrough", body: "Optional 30-minute call to review the Fix & List plan." },
              ].map((s, i) => (
                <li key={i} className="flex items-start gap-4 relative">
                  <span className={"w-[22px] h-[22px] rounded-full inline-flex items-center justify-center shrink-0 mt-0.5 relative z-10 " +
                    (i === 0 ? "bg-primary text-white" : "bg-white border-2 border-primary/20 text-primary/40")}>
                    {i === 0 ? <Icon name="check" size={12}/> : <span className="w-1.5 h-1.5 rounded-full bg-current"/>}
                  </span>
                  <div className="flex-1">
                    <div className="flex items-center justify-between gap-3">
                      <div className="text-[14.5px] font-medium text-ink">{s.title}</div>
                      <div className="text-[11.5px] text-muted">{s.t}</div>
                    </div>
                    <div className="text-[13px] text-muted mt-0.5">{s.body}</div>
                  </div>
                </li>
              ))}
            </ol>
          </div>
        </Card>

        <div className="mt-8 flex flex-col sm:flex-row justify-center gap-3">
          <Button variant="primary" size="md"><Icon name="mail" size={14}/> Email me my full report</Button>
          <Button variant="outline" size="md" onClick={onBackToReport}>
            <Icon name="arrow-left" size={14}/> Explore my report again
          </Button>
        </div>

        <p className="mt-10 text-center text-[12px] text-muted max-w-md mx-auto">
          All figures shown are estimates and are not guaranteed. Final outcomes depend on market conditions at time of sale.
        </p>
      </main>
    </div>
  );
}

Object.assign(window, { ConnectPage, ConfirmationPage });