// homepage.jsx — marketing homepage

const { useState, useEffect, useRef, useMemo } = React;

// ── Top nav ─────────────────────────────────────────────────────────────
function TopNav({ mode, setMode, onOpenDashboard, density }) {
  const py = density === "compact" ? 12 : density === "airy" ? 20 : 16;
  return (
    <nav className="topnav" style={{ padding: `${py}px 32px` }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", maxWidth: 1280, margin: "0 auto" }}>
        <a href="#" style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M4 11.5L12 4l8 7.5V20a1 1 0 01-1 1h-5v-6h-4v6H5a1 1 0 01-1-1z" fill="var(--ink)"/>
            <circle cx="12" cy="13" r="2.2" fill="var(--canvas)"/>
          </svg>
          <span style={{ fontSize: 17, fontWeight: 600, letterSpacing: "-0.01em" }}>HomeWoosh</span>
          <span className="tag" style={{ marginLeft: 6 }}><Icon name="dot" size={10} style={{color:"var(--green)"}}/>Ireland</span>
        </a>

        <div style={{ display: "flex", alignItems: "center", gap: 28, fontSize: 14, color: "var(--ink-2)" }}>
          <a href="#how-it-works">How it works</a>
          <a href="#modes">Lifecycle</a>
          <a href="#magic">The magic</a>
          <a href="#pricing">Pricing</a>
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <button className="btn-ghost" style={{ padding: "8px 14px", fontSize: 13 }} onClick={onOpenDashboard}>
            <Icon name="play" size={13}/> See how it works
          </button>
          <button className="btn-primary" style={{ padding: "8px 14px", fontSize: 13 }}>
            Set your goal <Icon name="arrow" size={14}/>
          </button>
        </div>
      </div>
    </nav>
  );
}

// ── Mode switcher ───────────────────────────────────────────────────────
function ModeSwitcher({ mode, setMode, compact = false }) {
  const modes = ["renter", "saving", "buying", "parent", "upsizing", "downsizing", "investment"];
  return (
    <div className="mode-pill" style={{ flexWrap: "wrap", justifyContent: "flex-end", rowGap: 4 }}>
      {modes.map(m => (
        <button key={m} className={mode === m ? "active" : ""} onClick={() => setMode(m)}>
          <Icon name={MODES[m].icon} size={13} style={{ marginRight: 4, verticalAlign: -2, opacity: 0.85 }}/>
          {MODES[m].label}
        </button>
      ))}
    </div>
  );
}

// ── The live dashboard preview ──────────────────────────────────────────
function LiveDashboardPreview({ mode }) {
  const m = MODES[mode];
  const initialRows = useMemo(() =>
    READINESS[mode].slice(0, 8).map(r => ({...r}))
  , [mode]);

  const [rows, setRows] = useState(initialRows);
  useEffect(() => { setRows(initialRows); }, [initialRows]);

  // Date math: every yellow→green flips a green check & moves date earlier
  const baseDate = useMemo(() => parseDate(m.interception), [mode]);
  const baseYellow = initialRows.filter(r => r.state !== "green").length;
  const currentYellow = rows.filter(r => r.state !== "green").length;
  const cleared = baseYellow - currentYellow;
  const computedDate = useMemo(() => addDays(baseDate, -cleared * 14 - cleared*cleared*3), [baseDate, cleared]);

  const formatDate = (d) => {
    const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    return `${months[d.getMonth()]} ${String(d.getDate()).padStart(2,"0")}, ${d.getFullYear()}`;
  };

  function clearRow(i) {
    setRows(rs => rs.map((r, idx) => idx === i ? {...r, state: "green"} : r));
  }
  function reset() { setRows(initialRows); }

  return (
    <div style={{
      background: "var(--surface)",
      border: "0.5px solid var(--border-strong)",
      borderRadius: 20,
      padding: 28,
      boxShadow: "var(--shadow-lg)",
      position: "relative",
    }}>
      {/* dashboard chrome row */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 22, paddingBottom: 18, borderBottom: "0.5px solid var(--border)" }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 6 }}>Your home goal</div>
          <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: "-0.01em" }}>
            {m.goalShort} <span style={{ color: "var(--ink-3)", fontWeight: 400 }}>· {m.goalDate}</span>
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          <div style={{ textAlign: "right" }}>
            <div className="eyebrow" style={{ fontSize: 10, marginBottom: 2 }}>Readiness</div>
            <div className="display tnum" style={{ fontSize: 22, color: "var(--green-2)", letterSpacing: "-0.01em" }}>
              {Math.round((rows.filter(r=>r.state==="green").length / rows.length) * 100)}<span style={{ fontSize: 14, color: "var(--ink-3)" }}>%</span>
            </div>
          </div>
          <button onClick={reset} style={{
            appearance: "none", background: "transparent", border: 0,
            color: "var(--ink-3)", fontSize: 12, display:"flex", alignItems:"center", gap:6
          }}>
            <Icon name="refresh" size={13}/> Reset
          </button>
        </div>
      </div>

      {/* Big interception date + Today's One Thing — equal weight */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 22 }}>
        <div style={{
          background: "linear-gradient(180deg, var(--surface-2), var(--surface))",
          border: "0.5px solid var(--border)",
          borderRadius: 14, padding: 22,
          display: "flex", flexDirection: "column", justifyContent: "space-between",
          minHeight: 188,
        }}>
          <div className="eyebrow" style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <Icon name="target" size={12}/> {m.metricLabel}
          </div>
          <div>
            <div className="display tnum" style={{ fontSize: 52, color: "var(--ink)", letterSpacing: "-0.025em" }}>
              {formatDate(computedDate)}
            </div>
            <div style={{ marginTop: 8, fontSize: 12.5, color: cleared > 0 ? "var(--green-2)" : "var(--ink-3)", display: "inline-flex", alignItems: "center", gap: 6 }}>
              <Icon name={cleared > 0 ? "arrowUR" : "dot"} size={13}/>
              {cleared > 0
                ? <span><b className="tnum">{cleared * 14 + cleared*cleared*3} days</b> earlier than yesterday</span>
                : <span>Tap any <span style={{ color: "var(--clay)", fontWeight: 500 }}>amber</span> or <span style={{ color: "var(--rose)", fontWeight: 500 }}>red</span> below →</span>
              }
            </div>
          </div>
        </div>

        <div style={{
          background: "linear-gradient(180deg, var(--green-soft), color-mix(in oklab, var(--green-soft) 50%, white))",
          border: "0.5px solid color-mix(in oklab, var(--green) 18%, transparent)",
          borderRadius: 14, padding: 22,
          display: "flex", flexDirection: "column", justifyContent: "space-between",
          minHeight: 188,
          position: "relative", overflow: "hidden",
        }}>
          <div className="eyebrow" style={{ color: "var(--green-2)", display:"flex", alignItems:"center", gap:6 }}>
            <Icon name="bolt" size={12}/> Today's one thing
          </div>
          <div style={{ fontSize: 17, lineHeight: 1.4, color: "var(--green-2)", fontWeight: 500, letterSpacing: "-0.005em" }}>
            {m.todayThing}
          </div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <span className="mono" style={{ fontSize: 10.5, color: "color-mix(in oklab, var(--green-2) 60%, transparent)", letterSpacing: ".02em" }}>
              agent · 06:14 IST · conf. 94%
            </span>
            <span style={{ fontSize: 12, color: "var(--green-2)", fontWeight: 500 }}>
              Do it →
            </span>
          </div>
        </div>
      </div>

      {/* Vitals monitor */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
        <div className="eyebrow">
          Readiness vitals
        </div>
        <div style={{ display: "flex", gap: 14, fontSize: 11, color: "var(--ink-3)" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
            <span style={{ width: 8, height: 8, borderRadius: 2, background: "var(--green)" }}/>
            <span className="tnum"><b style={{ color: "var(--ink)" }}>{rows.filter(r=>r.state==="green").length}</b> done</span>
          </span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
            <span style={{ width: 8, height: 8, borderRadius: 2, background: "var(--clay)" }}/>
            <span className="tnum"><b style={{ color: "var(--ink)" }}>{rows.filter(r=>r.state==="yellow").length}</b> to fix</span>
          </span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
            <span style={{ width: 8, height: 8, borderRadius: 2, background: "var(--rose)" }}/>
            <span className="tnum"><b style={{ color: "var(--ink)" }}>{rows.filter(r=>r.state==="red").length}</b> blocking</span>
          </span>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 6 }}>
        {rows.map((r, i) => (
          <button
            key={r.id}
            className={`chip ${r.state} ${r.state !== "green" ? "clickable" : ""}`}
            onClick={() => r.state !== "green" && clearRow(i)}
            style={{ justifyContent: "flex-start", textAlign: "left", width: "100%" }}
          >
            <span className="dot"/>
            <span style={{ fontWeight: 500, flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              {r.label}
            </span>
            <span style={{ fontSize: 10.5, fontWeight: 500, letterSpacing: ".04em", textTransform: "uppercase", opacity: 0.78 }}>
              {r.state === "green" ? "✓" : r.state === "yellow" ? "FIX" : "BLOCK"}
            </span>
          </button>
        ))}
      </div>

      {/* Interactive demo tag */}
      <div style={{
        position: "absolute", top: -12, right: 20,
        background: "var(--ink)", color: "var(--canvas)",
        padding: "5px 11px", borderRadius: 999, fontSize: 10.5,
        fontWeight: 500, letterSpacing: ".08em", textTransform: "uppercase",
        display: "inline-flex", alignItems: "center", gap: 6,
        boxShadow: "var(--shadow-md)",
      }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--clay-soft)", animation: "pulse-soft 1.8s infinite" }}/>
        Live demo · click to interact
      </div>

      {/* AI win stat row — dagger that proves the magic */}
      <div style={{
        marginTop: 22, padding: "16px 20px",
        background: "var(--ink)", color: "var(--canvas)",
        borderRadius: 14,
        position: "relative",
        overflow: "hidden",
      }}>
        {/* Subtle radial accent */}
        <div style={{
          position: "absolute", right: -40, top: -40,
          width: 220, height: 220,
          background: "radial-gradient(circle, rgba(232,168,58,0.18), transparent 60%)",
          pointerEvents: "none",
        }}/>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18, position: "relative", zIndex: 2 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <span style={{
              width: 38, height: 38, borderRadius: 10,
              background: "linear-gradient(135deg, var(--green) 0%, var(--green-2) 100%)",
              color: "var(--canvas)",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              boxShadow: "0 0 0 4px rgba(30,91,255,0.18)",
            }}>
              <Icon name="sparkles" size={18}/>
            </span>
            <div>
              <div className="eyebrow" style={{ color: "rgba(255,255,255,0.55)", marginBottom: 2, fontSize: 10 }}>The agent · just now</div>
              <div style={{ fontSize: 15, color: "var(--canvas)", fontWeight: 500, display: "flex", alignItems: "baseline", gap: 8 }}>
                <span>Mortgage application</span>
                <span className="display tnum" style={{
                  color: "var(--clay-soft)", fontSize: 26, letterSpacing: "-0.02em", lineHeight: 1,
                }}>72%</span>
                <span>prefilled — and rising.</span>
              </div>
            </div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 11.5, color: "rgba(255,255,255,0.7)", flexShrink: 0 }} className="mono tnum">
            <span>11/16 fields</span>
            <span style={{ width: 1, height: 16, background: "rgba(255,255,255,0.15)" }}/>
            <span>4m 21s saved</span>
            <span style={{
              padding: "5px 11px", borderRadius: 999,
              background: "var(--clay-soft)", color: "var(--ink)",
              fontWeight: 600, fontSize: 11.5, letterSpacing: ".02em",
              display: "inline-flex", alignItems: "center", gap: 5,
              cursor: "pointer",
            }}>
              Review <Icon name="arrow" size={11}/>
            </span>
          </div>
        </div>

        {/* Animated progress bar */}
        <div style={{
          marginTop: 14, height: 4, borderRadius: 999,
          background: "rgba(255,255,255,0.10)",
          overflow: "hidden",
          position: "relative",
        }}>
          <div style={{
            width: "72%", height: "100%",
            background: "linear-gradient(90deg, var(--green), var(--clay-soft))",
            borderRadius: 999,
            position: "relative",
            overflow: "hidden",
          }}>
            <div style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent)",
              backgroundSize: "200% 100%",
              animation: "shimmer 2.4s linear infinite",
            }}/>
          </div>
        </div>
      </div>
    </div>
  );
}

function parseDate(s) {
  // "Apr 14, 2027"
  const [mon, dy, yr] = s.replace(",", "").split(" ");
  const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  return new Date(Number(yr), months.indexOf(mon), Number(dy));
}
function addDays(d, n) { const x = new Date(d); x.setDate(x.getDate() + n); return x; }

// ── Hero ────────────────────────────────────────────────────────────────
function Hero({ mode, setMode }) {
  const m = MODES[mode];
  return (
    <section className="grid-bg" style={{ padding: "64px 32px 80px", position: "relative" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        {/* Eyebrow + mode switcher */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, marginBottom: 36, flexWrap: "wrap" }}>
          <span className="tag" style={{ padding: "6px 11px", background: "var(--surface)" }}>
            <Icon name="sparkles" size={12} style={{color:"var(--green)"}}/>
            <span style={{ color: "var(--ink)" }}>AI agent · for Irish renters &amp; buyers · in beta</span>
          </span>
          <ModeSwitcher mode={mode} setMode={setMode}/>
        </div>

        {/* Headline */}
        <h1 className="display" style={{ fontSize: "clamp(48px, 6.2vw, 84px)", margin: 0, maxWidth: 900, letterSpacing: "-0.035em" }}>
          {m.heroHeadline.split(" ").slice(0, -1).join(" ")}{" "}
          <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>
            {m.heroHeadline.split(" ").slice(-1)[0].replace(/\.$/, "")}
          </span>
          <span style={{ color: "var(--green-2)" }}>.</span>
        </h1>

        <p style={{ fontSize: 19, lineHeight: 1.5, color: "var(--ink-2)", maxWidth: 760, margin: "24px 0 32px", textWrap: "pretty" }}>
          Set your goal. Upload your documents. HomeWoosh builds your readiness plan, fills the paperwork, scores every property, drafts your applications, and tells you exactly what to do next.
        </p>

        <div style={{ display: "flex", gap: 12, marginBottom: 14, flexWrap: "wrap" }}>
          <button className="btn-primary">Set your goal <Icon name="arrow" size={16}/></button>
          <button className="btn-ghost" onClick={() => {
            const el = document.getElementById('how-it-works');
            if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
          }}>
            <Icon name="play" size={13}/>See how it works
          </button>
        </div>
        <p style={{ fontSize: 12.5, color: "var(--ink-3)", margin: 0 }}>
          Free until you're ready to buy · No card required · Built in Ireland, with Irish data
        </p>
      </div>

      {/* Live dashboard preview */}
      <div style={{ maxWidth: 1100, margin: "56px auto 0", position: "relative" }}>
        <LiveDashboardPreview mode={mode}/>

        {/* Subtle bottom caption */}
        <div style={{
          marginTop: 18, textAlign: "center",
          fontSize: 12.5, color: "var(--ink-3)",
          fontFamily: "var(--font-serif)", fontStyle: "italic",
        }}>
          A real date. Recalculated daily, against your real finances. <span style={{ color: "var(--ink-2)" }}>Tap any chip above to see it move.</span>
        </div>
      </div>
    </section>
  );
}

function Annotation({ children, top, left, right, bottom, side = "left", translate = false }) {
  return (
    <div style={{
      position: "absolute",
      top, left, right, bottom,
      transform: translate ? "translateX(-50%)" : "none",
      pointerEvents: "none",
      fontSize: 12,
      color: "var(--ink-3)",
      fontStyle: "italic",
      fontFamily: "var(--font-serif)",
      maxWidth: 200,
      textAlign: side === "right" ? "left" : "left",
    }}>
      {children}
    </div>
  );
}

// ── "What HomeWoosh isn't" strip ─────────────────────────────────────────
function NotAListingsSite({ mode }) {
  return (
    <section style={{
      padding: "80px 32px",
      background: "var(--ink)",
      color: "var(--canvas)",
    }}>
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
          <span className="eyebrow" style={{ color: "rgba(247,244,238,0.6)" }}>What HomeWoosh isn't</span>
        </div>

        <h2 className="display" style={{ fontSize: "clamp(36px, 4.6vw, 60px)", margin: "0 0 22px", lineHeight: 1.05, letterSpacing: "-0.03em" }}>
          A listings board. A search box. <br/>
          <span className="serif" style={{ color: "var(--clay-soft)", fontWeight: 400 }}>A digital classifieds directory.</span>
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.55, color: "rgba(255,255,255,0.7)", margin: "0 0 40px", maxWidth: 760 }}>
          Property portals serve the listing side. <span style={{ color: "var(--canvas)" }}>HomeWoosh serves the person trying to win the home.</span>
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "0.5px solid rgba(247,244,238,0.18)", borderRadius: 16, overflow: "hidden" }}>
          <ComparisonCol
            title="What Daft &amp; MyHome are"
            sub="A classifieds notice-board. Landlords and agents pay to list. You scroll, in their order, on their terms."
            items={[
              { lbl: "Customer", val: "Estate agents (pay €20M+/yr)" },
              { lbl: "You are", val: "Free traffic. The bait." },
              { lbl: "Sorted by", val: "Featured · most recent · whoever paid" },
              { lbl: "Help with mortgage", val: "An AIB banner ad" },
              { lbl: "Tells you when you'll have a home", val: "Never" },
              { lbl: "Fills your forms", val: "No" },
              { lbl: "On your side", val: "Structurally cannot be" },
            ]}
            tone="muted"
          />
          <ComparisonCol
            title="What HomeWoosh is"
            sub="A mission-control dashboard. You're the customer. We work for you, against the system, until you have the keys."
            items={[
              { lbl: "Customer", val: "You — €19 to €59/month" },
              { lbl: "You are", val: "The mission" },
              { lbl: "Sorted by", val: "What scores best for your life" },
              { lbl: "Help with mortgage", val: "AI fills the application in 60 seconds" },
              { lbl: "Tells you when you'll have a home", val: "Yes — to the day" },
              { lbl: "Fills your forms", val: "Every Irish lender. Every scheme." },
              { lbl: "On your side", val: "It's the entire business model" },
            ]}
            tone="bright"
          />
        </div>

        <p style={{ marginTop: 28, fontSize: 18, color: "var(--clay-soft)", maxWidth: 720, fontWeight: 500, letterSpacing: "-0.005em" }}>
          No “Place Ad” button. <span style={{ color: "rgba(247,244,238,0.7)" }}>You're the only customer here.</span>
        </p>
        <p style={{ marginTop: 12, fontSize: 13, color: "rgba(247,244,238,0.5)", maxWidth: 720 }}>
          We aggregate listings from agent-direct sites, MyHome, and public registries. We don't host ads. There is no “Place Ad” page. The only customer here is you.
        </p>
      </div>
    </section>
  );
}

function ComparisonCol({ title, sub, items, tone }) {
  const muted = tone === "muted";
  return (
    <div style={{
      padding: 28,
      background: muted ? "transparent" : "rgba(247,244,238,0.04)",
      borderRight: muted ? "0.5px solid rgba(247,244,238,0.18)" : "none",
    }}>
      <h3 style={{
        fontSize: 18, margin: "0 0 8px",
        fontWeight: 500,
        color: muted ? "rgba(247,244,238,0.7)" : "var(--canvas)",
      }} dangerouslySetInnerHTML={{__html: title}}/>
      <p style={{ fontSize: 13.5, lineHeight: 1.55, margin: "0 0 24px",
        color: muted ? "rgba(247,244,238,0.5)" : "rgba(247,244,238,0.78)",
      }}>{sub}</p>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {items.map((it, i) => (
          <div key={i}>
            <div style={{ fontSize: 11, letterSpacing: ".06em", textTransform: "uppercase",
              color: muted ? "rgba(247,244,238,0.4)" : "rgba(247,244,238,0.55)", marginBottom: 3 }}>
              {it.lbl}
            </div>
            <div style={{ fontSize: 14, color: muted ? "rgba(247,244,238,0.6)" : "var(--canvas)" }}>
              {it.val}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Lifecycle modes ─────────────────────────────────────────────────────
function LifecycleSection() {
  const cards = [
    { mode: "renter",  badge: "Live",     title: "First-time renter",     copy: "Build a reference history from zero. Win viewings on speed and a perfect application pack. Catch illegal RPZ rents the moment they're posted.", status: "live" },
    { mode: "renter",  badge: "Live",     title: "Active renter, no buy", copy: "Track market rents in your area. Flag illegal increases. Generate RTB complaint letters, deposit-return demands, and repair paper trails.", status: "live" },
    { mode: "saving",  badge: "Live",     title: "Saving to buy",         copy: "We read your real spending and run the maths. HTB, FHS, AIP. Cancel a subscription — watch your mortgage-ready date pull forward.", status: "live" },
    { mode: "buying",  badge: "v1",       title: "First-time buyer",      copy: "Score every Irish listing against your AIP, commute, schools and BER. Auto-fill the lender's mortgage application. Bidding coach on call.", primary: true, status: "live" },
    { mode: "buying",  badge: "Q4 2026",  title: "Upsizing",              copy: "Chain choreographer for sell-and-buy. Equity tracker. Bridging-finance maths. Stamp-duty calculator at the higher tier.", status: "soon" },
    { mode: "saving",  badge: "Q1 2027",  title: "Downsizing",            copy: "Equity-release modeller. Right-size analyser. Care-proximity filter. Estate planning view. Sentiment-aware pace — this is grief, not just search.", status: "soon" },
    { mode: "parent",  badge: "Q1 2027",  title: "Helping your kid",      copy: "CAT thresholds, gift letters, sibling fairness register. Shared dashboard with the kid. The deeds trap explained — and avoided.", status: "soon" },
    { mode: "investment", badge: "Q2 2027", title: "Investment",          copy: "Underwrite each BTL after tax. Yield model · RTB landlord compliance · RPZ rent cap · void-month reserves. Sober, not hype.", status: "soon" },
  ];

  return (
    <section id="modes" style={{ padding: "100px 32px", background: "var(--surface-2)", borderTop: "0.5px solid var(--border)", borderBottom: "0.5px solid var(--border)" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, marginBottom: 56, alignItems: "end" }}>
          <div>
            <span className="eyebrow">The lifecycle</span>
            <h2 className="display" style={{ fontSize: 48, margin: "12px 0 0", letterSpacing: "-0.025em", lineHeight: 1.05 }}>
              One asset. <br/>
              <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>A lifetime of decisions.</span>
            </h2>
          </div>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--ink-2)", margin: 0 }}>
            The average Irish household goes through this six to eight times. Renting, saving, bidding, moving up, helping a kid, downsizing, inheriting, investing. Built first for renters and first-time buyers. Expanding into upgrading, downsizing, inheritance and helping your kid.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--border)", border: "0.5px solid var(--border)", borderRadius: 18, overflow: "hidden" }}>
          {cards.map((c, i) => (
            <div key={i} style={{
              background: c.primary ? "var(--ink)" : "var(--surface)",
              color: c.primary ? "var(--canvas)" : "var(--ink)",
              padding: "26px 22px",
              minHeight: 220,
              display: "flex", flexDirection: "column", justifyContent: "space-between",
              opacity: c.status === "soon" ? 0.74 : 1,
            }}>
              <div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
                  <span style={{
                    fontSize: 10, letterSpacing: ".08em", textTransform: "uppercase", fontWeight: 500,
                    padding: "3px 8px", borderRadius: 4,
                    background: c.primary ? "var(--clay)" : c.status === "live" ? "var(--green-soft)" : "var(--soft)",
                    color: c.primary ? "var(--canvas)" : c.status === "live" ? "var(--green-2)" : "var(--ink-3)",
                  }}>
                    {c.badge}
                  </span>
                  <Icon name={MODES[c.mode].icon} size={16} style={{ opacity: 0.7 }}/>
                </div>
                <h3 style={{ fontSize: 18, margin: "0 0 10px", fontWeight: 500 }}>{c.title}</h3>
                <p style={{ fontSize: 13.5, lineHeight: 1.55, margin: 0, opacity: c.primary ? 0.78 : 0.65 }}>{c.copy}</p>
              </div>
              {c.primary && (
                <div style={{ marginTop: 18, fontSize: 12, opacity: 0.85, display: "flex", alignItems: "center", gap: 6 }}>
                  Featured in beta <Icon name="arrow" size={12}/>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── The magic: AI auto-fills mortgage forms ─────────────────────────────
function AutoFillMagic() {
  const [progress, setProgress] = useState(0);
  const [running, setRunning] = useState(true);
  const fields = MORTGAGE_FIELDS;

  useEffect(() => {
    if (!running) return;
    const id = setInterval(() => {
      setProgress(p => {
        if (p >= fields.length) {
          setTimeout(() => { setProgress(0); }, 1800);
          return p;
        }
        return p + 1;
      });
    }, 280);
    return () => clearInterval(id);
  }, [running, fields.length]);

  const visible = fields.slice(0, progress);
  const elapsed = (progress / fields.length * 58).toFixed(0);

  return (
    <section id="magic" style={{ padding: "120px 32px" }}>
      <div className="r-magic-grid" style={{ maxWidth: 1100, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 64, alignItems: "center" }}>
        <div>
          <span className="eyebrow" style={{ color: "var(--green)" }}>The magic moment</span>
          <h2 className="display" style={{ fontSize: 48, margin: "12px 0 20px", lineHeight: 1.05, letterSpacing: "-0.03em" }}>
            Upload your payslips. <br/>
            <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>We fill the mortgage application.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 480 }}>
            Every Irish lender's form. Every scheme. Source-of-funds explanation. Joint gift letters. RTB tenancy applications. AI fills it in 58 seconds. You review. You sign. Done.
          </p>

          <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 14 }}>
            {[
              "AIB · BOI · PTSB · Avant · Haven · ICS · Finance Ireland",
              "Help-to-Buy refund · First Home Scheme equity",
              "Gift letters · sworn declarations · joint co-signing",
              "Tenancy applications · RTB forms · deposit return demands",
            ].map((t, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 14, color: "var(--ink)" }}>
                <span style={{ width: 22, height: 22, borderRadius: 999, background: "var(--green-soft)", color: "var(--green-2)", display:"inline-flex", alignItems:"center", justifyContent:"center" }}>
                  <Icon name="check" size={13}/>
                </span>
                {t}
              </div>
            ))}
          </div>
        </div>

        {/* The faux mortgage form */}
        <div style={{
          background: "var(--surface-2)",
          borderRadius: 18,
          padding: 22,
          border: "0.5px solid var(--border)",
          boxShadow: "var(--shadow-md)",
        }}>
          {/* form chrome */}
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16, padding: "0 6px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <Icon name="file" size={15} style={{ color: "var(--ink-3)" }}/>
              <span style={{ fontSize: 12.5, fontWeight: 500 }}>AIB · Mortgage Application Pack 2026</span>
            </div>
            <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>HG-AGENT-v1.4</span>
          </div>

          <div style={{
            background: "var(--surface)", borderRadius: 12,
            padding: 18,
            border: "0.5px solid var(--border)",
            minHeight: 470,
          }}>
            {/* progress bar */}
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 14, fontSize: 11.5, color: "var(--ink-3)" }}>
              <span className="mono">{progress}/{fields.length} fields completed</span>
              <span className="mono tnum">{elapsed}s elapsed</span>
            </div>
            <div style={{ height: 3, background: "var(--soft)", borderRadius: 999, overflow: "hidden", marginBottom: 20 }}>
              <div style={{
                width: `${(progress / fields.length) * 100}%`,
                height: "100%",
                background: "var(--green)",
                transition: "width .25s ease-out",
              }}/>
            </div>

            {/* form fields */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              {fields.map((f, i) => {
                const filled = i < progress;
                const current = i === progress - 1;
                const fullSpan = f.label.startsWith("Property") || f.label.startsWith("Combined") || f.label.startsWith("Source") || f.label.startsWith("Loan");
                return (
                  <div key={i} style={{
                    gridColumn: fullSpan ? "span 2" : "span 1",
                    opacity: filled ? 1 : 0.32,
                    transition: "opacity .3s",
                  }}>
                    <div style={{ fontSize: 10.5, color: "var(--ink-3)", marginBottom: 3, letterSpacing: ".01em" }}>{f.label}</div>
                    <div className={current ? "ai-fill" : ""} style={{
                      background: filled ? "var(--surface-2)" : "var(--soft)",
                      border: `0.5px solid ${filled ? "var(--green-soft)" : "var(--border)"}`,
                      borderRadius: 6,
                      padding: "7px 10px",
                      fontSize: 13,
                      color: filled ? "var(--ink)" : "transparent",
                      fontWeight: 500,
                      minHeight: 30,
                      display: "flex", alignItems: "center",
                      transition: "all .25s",
                    }}>
                      {filled ? f.value : "—"}
                    </div>
                  </div>
                );
              })}
            </div>

            {/* sig row */}
            {progress >= fields.length && (
              <div style={{ marginTop: 18, padding: "12px 14px", background: "var(--green-soft)", borderRadius: 10, display: "flex", justifyContent: "space-between", alignItems: "center", animation: "fade-in .3s" }} className="fade-in">
                <div style={{ fontSize: 13, color: "var(--green-2)", fontWeight: 500 }}>
                  <Icon name="checkC" size={14} style={{verticalAlign:-2, marginRight:6}}/>
                  Ready to sign · Aoife + Cian
                </div>
                <button style={{ background: "var(--green-2)", color: "var(--canvas)", border: 0, padding: "6px 12px", borderRadius: 6, fontSize: 12, fontWeight: 500 }}>
                  Review &amp; e-sign
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

window.TopNav = TopNav;
window.ModeSwitcher = ModeSwitcher;
window.Hero = Hero;
window.NotAListingsSite = NotAListingsSite;
window.LifecycleSection = LifecycleSection;
window.AutoFillMagic = AutoFillMagic;
window.parseDate = parseDate;
window.addDays = addDays;
window.BridgeQuote = BridgeQuote;
window.UrgencyQuote = UrgencyQuote;

// ── Strategic positioning bridge ───────────────────────────────────────
function BridgeQuote() {
  return (
    <section style={{ padding: "120px 32px", background: "var(--canvas)" }}>
      <div style={{ maxWidth: 980, margin: "0 auto", textAlign: "center" }}>
        <span className="eyebrow" style={{ color: "var(--ink-3)" }}>The reframe</span>
        <h2 className="display" style={{
          fontSize: "clamp(36px, 4.4vw, 56px)",
          margin: "20px 0 0",
          letterSpacing: "-0.03em",
          lineHeight: 1.1,
          color: "var(--ink)",
        }}>
          Daft helps you find listings.
          <br/>
          <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>
            HomeWoosh helps you become the person who wins them.
          </span>
        </h2>
      </div>
    </section>
  );
}

// ── Urgency pull-quote ─────────────────────────────────────────────────
function UrgencyQuote() {
  return (
    <section style={{ padding: "80px 32px", background: "var(--canvas)" }}>
      <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center", borderTop: "0.5px solid var(--border)", borderBottom: "0.5px solid var(--border)", padding: "56px 0" }}>
        <p className="serif" style={{
          fontSize: "clamp(28px, 3.4vw, 40px)",
          letterSpacing: "-0.02em",
          color: "var(--ink-2)",
          margin: 0,
          lineHeight: 1.25,
        }}>
          The right home only appears once.
          <br/>
          <span style={{ color: "var(--ink)" }}>Be ready when it does.</span>
        </p>
      </div>
    </section>
  );
}