/* Report page */
const { useState: useStateR, useEffect: useEffectR, useRef: useRefR } = React;

function ReportHeader({ onExit }) {
  return (
    <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>
        <div className="hidden md:flex items-center gap-6 text-[13.5px] text-muted">
          <span className="inline-flex items-center gap-2 text-success"><Icon name="check-circle-2" size={14}/> Saved to your account</span>
          <span>Prepared April 20, 2026</span>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="white" size="sm"><Icon name="mail" size={14}/> Email report</Button>
          <Button variant="white" size="sm"><Icon name="printer" size={14}/> Print</Button>
        </div>
      </div>
    </div>
  );
}

function PropertyHero() {
  return (
    <section className="max-w-[1240px] mx-auto px-6 md:px-10 pt-10 md:pt-14">
      <div className="rounded-[18px] overflow-hidden shadow-soft-lg relative aspect-[2.4/1] min-h-[260px]">
        <HouseScene className="rounded-[18px]"/>
        <div className="absolute inset-0 bg-gradient-to-t from-black/35 via-transparent to-transparent"/>
        <div className="absolute left-6 md:left-10 bottom-6 md:bottom-8 text-white">
          <Pill tone="accent" className="mb-3 bg-white/90 text-primary">
            <Icon name="sparkles" size={12}/> Fix & List — recommended
          </Pill>
          <h1 className="font-display text-[28px] md:text-[42px] leading-tight">1423 N Oliver St</h1>
          <p className="text-white/85 text-[14.5px] md:text-[15.5px]">Wichita, KS 67208</p>
        </div>
      </div>
      <div className="mt-5 flex flex-wrap items-center gap-x-3 gap-y-2 text-[14px] text-muted">
        <span className="text-ink">3 bed</span>
        <span>·</span><span className="text-ink">2 bath</span>
        <span>·</span><span className="text-ink">1,640 sqft</span>
        <span>·</span><span>Built 1987</span>
        <span>·</span><span>Single family</span>
        <span>·</span><span>0.19 acre lot</span>
      </div>
    </section>
  );
}

function PathCard({ p }) {
  const isRec = p.recommended;
  return (
    <div className={"relative rounded-xl bg-surface p-7 flex flex-col gap-5 transition-all " +
      (isRec ? "border-2 border-accent/70 shadow-soft-lg " : "border hairline shadow-card ")
    }>
      {isRec && (
        <span className="absolute -top-3 left-7 inline-flex items-center gap-1.5 bg-gradient-to-b from-accent-soft to-accent/85 text-primary text-[11px] font-semibold tracking-wide px-2.5 py-1 rounded-full shadow-soft">
          <Icon name="sparkles" size={12}/> Recommended for you
        </span>
      )}
      <div>
        <div className="text-[11.5px] uppercase tracking-[0.1em] text-muted flex items-center gap-2">
          <Icon name={p.icon} size={14}/> {p.label}
        </div>
        <h3 className="mt-2 font-display text-[23px] text-primary leading-tight">{p.title}</h3>
      </div>

      <div className="pb-5 border-b hairline">
        <div className="text-[12px] text-muted">Projected net proceeds</div>
        <div className="font-display text-[44px] leading-none text-primary tnum font-[600] mt-1">{p.net}</div>
        <div className="text-[13px] text-muted mt-1.5">Sale price {p.sale}{p.costs ? ` · after ${p.costs}` : ""}</div>
      </div>

      <div className="grid grid-cols-3 gap-4">
        <Stat label="Time to close" value={p.time}/>
        <Stat label="Effort" value={p.effort}/>
        <Stat label="Certainty" value={p.certainty}/>
      </div>

      <p className="text-[14.5px] text-ink leading-relaxed">{p.takeaway}</p>

      <div className="mt-auto flex items-center justify-between">
        <button className="text-[13.5px] text-primary-soft hover:text-primary inline-flex items-center gap-1.5">
          See details <Icon name="arrow-right" size={14}/>
        </button>
        {isRec ? (
          <Pill tone="gold">Best projected outcome</Pill>
        ) : (
          <Pill tone="outline">{p.pill}</Pill>
        )}
      </div>
    </div>
  );
}

function ThreePathsReport() {
  const paths = [
    {
      key: "asis", label: "Path 1", title: "Sell As-Is", icon: "handshake",
      sale: "$204,000", costs: "agent fees & closing", net: "$187,000",
      time: "45 days", effort: "Medium", certainty: "High",
      takeaway: "Straightforward. No renovation required.",
      pill: "Baseline",
    },
    {
      key: "fix", label: "Path 2", title: "Fix & List", icon: "hammer",
      sale: "$232,000", costs: "$24,000 in improvements & fees", net: "$208,000",
      time: "90 days", effort: "Higher", certainty: "Medium",
      takeaway: "You gain about $21,000 more by investing in focused updates.",
      recommended: true,
    },
    {
      key: "cash", label: "Path 3", title: "Cash Offer", icon: "banknote",
      sale: "$158,000", costs: "no agent fees", net: "$158,000",
      time: "14 days", effort: "Lowest", certainty: "Highest",
      takeaway: "Fast, certain, lower proceeds.",
      pill: "Fastest",
    },
  ];
  return (
    <section className="max-w-[1240px] mx-auto px-6 md:px-10 mt-14 md:mt-20">
      <div className="flex items-end justify-between flex-wrap gap-4">
        <div className="max-w-xl">
          <Pill tone="neutral">Your three paths</Pill>
          <h2 className="mt-3 font-display text-[32px] md:text-[40px] leading-[1.1] text-primary">The choice, in one view.</h2>
          <p className="mt-2 text-[15.5px] text-muted leading-relaxed">Three ways to sell 1423 N Oliver St — with real numbers from your neighborhood.</p>
        </div>
        <div className="text-[13px] text-muted inline-flex items-center gap-2"><Icon name="info" size={14}/> Estimates, not guarantees</div>
      </div>
      <div className="mt-8 grid md:grid-cols-3 gap-5 items-stretch">
        {paths.map(p => <PathCard key={p.key} p={p}/>)}
      </div>
    </section>
  );
}

/* Before / After slider */
function BeforeAfter({ before, after, label }) {
  const [pct, setPct] = useStateR(50);
  return (
    <div className="rounded-xl overflow-hidden border hairline bg-white shadow-card">
      <div className="relative aspect-[16/10] select-none">
        {/* after = bottom layer (right side) */}
        <div className={"absolute inset-0 " + after}/>
        {/* before clipped to left */}
        <div className="absolute inset-0" style={{ clipPath: `inset(0 ${100-pct}% 0 0)` }}>
          <div className={"absolute inset-0 " + before}/>
        </div>
        {/* labels */}
        <span className="absolute left-3 top-3 bg-black/55 text-white text-[11px] font-medium px-2 py-1 rounded-full backdrop-blur">Before</span>
        <span className="absolute right-3 top-3 bg-primary text-white text-[11px] font-medium px-2 py-1 rounded-full">After</span>
        {/* divider */}
        <div className="absolute top-0 bottom-0 w-px bg-white/80 shadow-[0_0_0_1px_rgba(15,61,62,0.25)]" style={{ left: `${pct}%` }}/>
        <div className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-9 h-9 rounded-full bg-white border-2 border-primary shadow-soft-lg flex items-center justify-center text-primary"
          style={{ left: `${pct}%` }}
        >
          <Icon name="chevrons-left-right" size={14}/>
        </div>
        {/* range input overlay */}
        <input
          type="range" min={0} max={100} value={pct}
          onChange={(e) => setPct(parseInt(e.target.value, 10))}
          className="ba-range absolute inset-0 w-full h-full opacity-0 cursor-ew-resize"
          aria-label={`${label} before and after slider`}
        />
      </div>
      <div className="flex items-center justify-between px-4 py-3 text-[12px] text-muted">
        <span>Visualization — actual results may vary</span>
        <span>{label}</span>
      </div>
    </div>
  );
}

function RenovationPreview() {
  const [openK, setOpenK] = useStateR(false);
  const [openB, setOpenB] = useStateR(false);
  return (
    <section className="max-w-[1240px] mx-auto px-6 md:px-10 mt-20 md:mt-28">
      <div className="max-w-2xl">
        <Pill tone="neutral">Renovation preview</Pill>
        <h2 className="mt-3 font-display text-[32px] md:text-[40px] leading-[1.1] text-primary">
          What your home could look like with focused improvements.
        </h2>
        <p className="mt-2 text-[15.5px] text-muted leading-relaxed">
          We modeled only the updates that tend to pay back in your neighborhood. Drag the handle to compare.
        </p>
      </div>

      <div className="mt-10 grid md:grid-cols-2 gap-6">
        {/* Kitchen */}
        <div>
          <div className="flex items-center justify-between mb-3">
            <h3 className="font-display text-[22px] text-primary">Kitchen</h3>
            <Pill tone="gold">Cost $12,500 · Value +$18,000 · ROI 144%</Pill>
          </div>
          <BeforeAfter label="Kitchen"
            before="photo-ph-warm"
            after="photo-ph-cool"
          />
          <button onClick={() => setOpenK(!openK)} className="mt-3 text-[13.5px] text-primary hover:text-primary-soft inline-flex items-center gap-1.5">
            Why we recommend this <Icon name={openK ? "chevron-up" : "chevron-down"} size={14}/>
          </button>
          {openK && (
            <p className="mt-2 text-[14px] text-muted leading-relaxed max-w-[520px]">
              In your neighborhood, the homes that sold above $210k this quarter all had updated kitchens with white or light-cabinet refreshes and newer counters. A modest cabinet paint, counter swap, and fixture update tends to return the strongest value here.
            </p>
          )}
        </div>

        {/* Bathroom */}
        <div>
          <div className="flex items-center justify-between mb-3">
            <h3 className="font-display text-[22px] text-primary">Primary bathroom</h3>
            <Pill tone="gold">Cost $6,800 · Value +$9,500 · ROI 140%</Pill>
          </div>
          <BeforeAfter label="Primary bathroom"
            before="photo-ph"
            after="photo-ph-cool"
          />
          <button onClick={() => setOpenB(!openB)} className="mt-3 text-[13.5px] text-primary hover:text-primary-soft inline-flex items-center gap-1.5">
            Why we recommend this <Icon name={openB ? "chevron-up" : "chevron-down"} size={14}/>
          </button>
          {openB && (
            <p className="mt-2 text-[14px] text-muted leading-relaxed max-w-[520px]">
              Small-bath refreshes — new vanity, mirror, and fixtures — consistently outperform gut remodels in homes built between 1980 and 2000. Buyers notice finish quality far more than footprint.
            </p>
          )}
        </div>
      </div>
    </section>
  );
}

function Neighborhood() {
  const comps = [
    { addr: "1408 N Armour Ave",    price: 212000, date: "Mar 12, 2026", br: "3/2", sim: 92 },
    { addr: "2117 N Volutsia St",   price: 218500, date: "Feb 27, 2026", br: "3/2", sim: 88 },
    { addr: "1450 N Oliver St",     price: 195000, date: "Feb 09, 2026", br: "3/2", sim: 86 },
    { addr: "1520 N Armour Ave",    price: 205000, date: "Jan 28, 2026", br: "3/1", sim: 83 },
    { addr: "1338 N Minneapolis St",price: 182000, date: "Jan 14, 2026", br: "3/2", sim: 79 },
  ];
  const max = 250000, min = 150000;
  return (
    <section className="max-w-[1240px] mx-auto px-6 md:px-10 mt-20 md:mt-28">
      <div className="max-w-2xl">
        <Pill tone="neutral">Neighborhood</Pill>
        <h2 className="mt-3 font-display text-[32px] md:text-[40px] leading-[1.1] text-primary">Your neighborhood at a glance.</h2>
        <p className="mt-2 text-[15.5px] text-muted leading-relaxed">Recent sales within a half-mile of your home.</p>
      </div>

      <div className="mt-10 grid md:grid-cols-2 gap-6">
        {/* Map */}
        <div className="rounded-xl overflow-hidden border hairline bg-white shadow-card">
          <MapPlaceholder/>
          <div className="flex items-center justify-between px-4 py-3 text-[12px] text-muted border-t hairline">
            <span>0.5-mile radius · 5 comparable sales</span>
            <span>Source: Heartland MLS</span>
          </div>
        </div>
        {/* Comps */}
        <Card className="p-0 overflow-hidden">
          <div className="px-5 py-4 border-b hairline flex items-center justify-between">
            <div className="font-medium text-[14px] text-ink">Comparable sales · last 90 days</div>
            <button className="text-[12.5px] text-primary">View all</button>
          </div>
          <ul className="divide-y hairline">
            {comps.map((c, i) => (
              <li key={i} className="px-5 py-4 flex items-center gap-4">
                <div className="w-8 h-8 rounded-full bg-primary/5 text-primary inline-flex items-center justify-center text-[11px] font-semibold">{i+1}</div>
                <div className="flex-1 min-w-0">
                  <div className="text-[14px] text-ink truncate">{c.addr}</div>
                  <div className="text-[12px] text-muted">{c.br} · {c.date}</div>
                </div>
                <div className="text-right">
                  <div className="font-display text-[17px] text-primary tnum">${c.price.toLocaleString()}</div>
                  <div className="text-[11.5px] text-muted">{c.sim}% similar</div>
                </div>
              </li>
            ))}
          </ul>
        </Card>
      </div>

      {/* Bar chart */}
      <div className="mt-6">
        <Card className="p-6 md:p-8">
          <div className="flex items-baseline justify-between flex-wrap gap-2">
            <h3 className="font-display text-[20px] text-primary">
              Homes like yours have sold for <span className="tnum">$182k–$205k</span> in the last 90 days.
            </h3>
            <span className="text-[12px] text-muted">12 comparable sales · Wichita 67208</span>
          </div>
          <div className="mt-6 flex items-end gap-3 h-[160px]">
            {[178,192,205,188,195,199,182,207,198,196,202,210].map((v, i) => {
              const h = ((v - 160) / 70) * 100;
              const inRange = v >= 182 && v <= 205;
              return (
                <div key={i} className="flex-1 flex flex-col items-center gap-2">
                  <div
                    className={"w-full rounded-t-md transition-all " + (inRange ? "bg-primary/80" : "bg-primary/30")}
                    style={{ height: `${h}%` }}
                    title={`$${v}k`}
                  />
                </div>
              );
            })}
          </div>
          <div className="mt-2 flex justify-between text-[11px] text-muted tnum">
            <span>$160k</span><span>$180k</span><span>$200k</span><span>$230k</span>
          </div>
        </Card>
      </div>
    </section>
  );
}

function MapPlaceholder() {
  return (
    <div className="relative aspect-[16/10] w-full" style={{
      background: "linear-gradient(135deg, #F0EADA 0%, #E4DCC4 100%)"
    }}>
      {/* grid lines — streets */}
      <svg viewBox="0 0 800 500" className="absolute inset-0 w-full h-full">
        <g stroke="#D5C9A8" strokeWidth="18" strokeLinecap="round">
          <line x1="-20" y1="120" x2="820" y2="110"/>
          <line x1="-20" y1="240" x2="820" y2="250"/>
          <line x1="-20" y1="360" x2="820" y2="370"/>
          <line x1="140" y1="-20" x2="130" y2="520"/>
          <line x1="340" y1="-20" x2="350" y2="520"/>
          <line x1="560" y1="-20" x2="555" y2="520"/>
        </g>
        <g stroke="#fff" strokeWidth="1.5" strokeDasharray="4 6">
          <line x1="-20" y1="120" x2="820" y2="110"/>
          <line x1="-20" y1="240" x2="820" y2="250"/>
          <line x1="-20" y1="360" x2="820" y2="370"/>
          <line x1="140" y1="-20" x2="130" y2="520"/>
          <line x1="340" y1="-20" x2="350" y2="520"/>
          <line x1="560" y1="-20" x2="555" y2="520"/>
        </g>
        {/* parks / blocks */}
        <rect x="400" y="280" width="140" height="80" fill="#B8C9A7" opacity="0.6" rx="6"/>
        <rect x="180" y="140" width="150" height="80" fill="#B8C9A7" opacity="0.5" rx="6"/>
        {/* comp pins */}
        {[
          [230, 170, 1],[420, 130, 2],[610, 220, 3],[300, 340, 4],[520, 400, 5],
        ].map(([x,y,n]) => (
          <g key={n}>
            <circle cx={x} cy={y} r="14" fill="#fff" stroke="#0F3D3E" strokeWidth="2"/>
            <text x={x} y={y+4} textAnchor="middle" fontSize="12" fontWeight="600" fill="#0F3D3E">{n}</text>
          </g>
        ))}
        {/* subject home */}
        <g>
          <circle cx="380" cy="250" r="22" fill="#E4B363" opacity="0.35"/>
          <circle cx="380" cy="250" r="13" fill="#E4B363" stroke="#0F3D3E" strokeWidth="2"/>
          <path d="M372 252 L380 244 L388 252 L388 258 L372 258 Z" fill="#0F3D3E"/>
        </g>
      </svg>
      <div className="absolute left-3 bottom-3 bg-white/90 rounded-md px-2 py-1 text-[11px] text-muted border hairline">
        <span className="inline-block w-2.5 h-2.5 rounded-full bg-accent align-middle mr-1.5 ring-2 ring-accent/30"/>Your home
      </div>
    </div>
  );
}

function WrittenAnalysis() {
  return (
    <section className="max-w-[860px] mx-auto px-6 md:px-10 mt-20 md:mt-28">
      <Pill tone="neutral">The analysis</Pill>
      <h2 className="mt-3 font-display text-[32px] md:text-[40px] leading-[1.1] text-primary">
        Here is what we're seeing in your neighborhood.
      </h2>
      <div className="mt-8 font-display text-[22px] md:text-[24px] leading-[1.55] text-ink/90">
        <p>
          Your home sits in a stable, steadily appreciating part of northeast Wichita. Twelve similar homes have sold in the last ninety days, averaging eighteen days on market. The homes that sold above <span className="tnum">$210,000</span> — three of them on nearby Armour and Volutsia — all had updated kitchens and refinished floors. That is the single clearest signal we see in your neighborhood, and it is why our Fix & List projection shows a <span className="tnum">$21,000</span> net gain over selling As-Is.
        </p>
        <p className="mt-6">
          If your timeline is flexible and you can commit to about ninety days, we believe Fix & List is the path most likely to maximize what you walk away with. If speed and certainty matter more, the Cash Offer path is legitimate — though it reflects the investor margin and a realistic assessment of the repair work your home currently needs.
        </p>
      </div>
      <div className="mt-8 pt-6 border-t hairline flex items-center gap-3 text-[13px] text-muted">
        <Icon name="info" size={14}/> Written by our local market analyst, reviewed against MLS data from the last 90 days.
      </div>
    </section>
  );
}

function NextSteps({ onConnect }) {
  return (
    <section className="max-w-[1240px] mx-auto px-6 md:px-10 mt-20 md:mt-28 mb-16">
      <div className="rounded-[20px] bg-[#F4EFE2] border hairline p-8 md:p-14">
        <div className="grid md:grid-cols-12 gap-10 items-start">
          <div className="md:col-span-5">
            <Pill tone="neutral">Next steps</Pill>
            <h2 className="mt-3 font-display text-[30px] md:text-[38px] leading-[1.1] text-primary">
              Ready to take the next step?
            </h2>
            <p className="mt-3 text-[15.5px] text-muted leading-relaxed max-w-md">
              You're under no obligation. Pick the path that feels right, and we'll introduce you to a vetted local partner.
            </p>
          </div>
          <div className="md:col-span-7 grid gap-3">
            <button onClick={onConnect} className="group text-left bg-white rounded-xl border hairline p-5 flex items-center gap-4 hover:border-primary/60 hover:shadow-soft transition">
              <span className="w-11 h-11 rounded-full bg-primary text-white inline-flex items-center justify-center shrink-0"><Icon name="handshake" size={18}/></span>
              <span className="flex-1">
                <span className="flex items-center gap-2">
                  <span className="text-[15.5px] font-medium text-primary">Connect me with a Fix & List agent</span>
                  <Pill tone="gold">Recommended</Pill>
                </span>
                <span className="block text-[13px] text-muted mt-0.5">Sarah Chen · Wichita Home Partners · 4.9 (127 reviews)</span>
              </span>
              <Icon name="arrow-right" size={16} className="text-primary group-hover:translate-x-0.5 transition"/>
            </button>
            <button className="group text-left bg-white rounded-xl border hairline p-5 flex items-center gap-4 hover:border-primary/60 hover:shadow-soft transition">
              <span className="w-11 h-11 rounded-full bg-primary/5 text-primary inline-flex items-center justify-center shrink-0"><Icon name="banknote" size={18}/></span>
              <span className="flex-1">
                <span className="text-[15.5px] font-medium text-primary">Get a written cash offer</span>
                <span className="block text-[13px] text-muted mt-0.5">From two vetted investors licensed in Kansas.</span>
              </span>
              <Icon name="arrow-right" size={16} className="text-primary/70 group-hover:translate-x-0.5 transition"/>
            </button>
            <button className="group text-left bg-white rounded-xl border hairline p-5 flex items-center gap-4 hover:border-primary/60 hover:shadow-soft transition">
              <span className="w-11 h-11 rounded-full bg-primary/5 text-primary inline-flex items-center justify-center shrink-0"><Icon name="hammer" size={18}/></span>
              <span className="flex-1">
                <span className="text-[15.5px] font-medium text-primary">Get a renovation estimate</span>
                <span className="block text-[13px] text-muted mt-0.5">Licensed local contractors, no obligation.</span>
              </span>
              <Icon name="arrow-right" size={16} className="text-primary/70 group-hover:translate-x-0.5 transition"/>
            </button>

            <div className="mt-4 pt-4 border-t hairline flex flex-col md:flex-row md:items-center gap-3">
              <span className="text-[13.5px] text-muted">Not ready? Save this report.</span>
              <div className="flex gap-2 flex-1">
                <input type="email" placeholder="you@example.com" className="flex-1 h-10 px-3 rounded-lg bg-white border hairline text-[14px] focus:border-primary focus:ring-4 focus:ring-primary/10 outline-none"/>
                <Button size="sm" variant="outline">Save report</Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ReportPage({ onExit, onConnect }) {
  return (
    <div className="min-h-screen bg-bg">
      <ReportHeader onExit={onExit}/>
      <PropertyHero/>
      <ThreePathsReport/>
      <RenovationPreview/>
      <Neighborhood/>
      <WrittenAnalysis/>
      <NextSteps onConnect={onConnect}/>
      <Footer/>
    </div>
  );
}

Object.assign(window, { ReportPage });