// v4.jsx — v4 additions: dual-path, agentic auto-act, How It Works, vocab intro

// ── Dual-path renter/buyer callout ─────────────────────────────────────
function DualPath({ setMode }) {
  const cards = [
    {
      mode: "renter",
      icon: "key",
      tag: "If you're renting",
      headline: "Build your strongest application pack.",
      body: "The agent watches every listing the moment it's posted, drafts your viewing requests in your voice, and gets you to the top of the pile — before twenty other applicants have even seen it.",
      footer: "RTB-checked · RPZ-aware · landlord-verified",
      cta: "Start as a renter",
    },
    {
      mode: "buying",
      icon: "home",
      tag: "If you're buying",
      headline: "Mortgage-ready, paperwork-ready, bid-ready.",
      body: "The agent fills every Irish lender's form in your voice, scores each property against your AIP, commute and life, and coaches you through bidding — to the day the keys are yours.",
      footer: "AIB · BOI · PTSB · Avant · Haven · ICS · Finance Ireland",
      cta: "Start as a buyer",
      primary: true,
    },
  ];
  return (
    <section style={{ padding: "60px 32px 100px", background: "var(--canvas)" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 36 }}>
          <span className="eyebrow" style={{ color: "var(--ink-3)" }}>Two paths · one agent</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
          {cards.map((c, i) => (
            <div key={i} style={{
              background: c.primary ? "var(--ink)" : "var(--surface)",
              color: c.primary ? "var(--canvas)" : "var(--ink)",
              border: c.primary ? "0.5px solid var(--ink)" : "0.5px solid var(--border)",
              borderRadius: 18,
              padding: 32,
              boxShadow: c.primary ? "var(--shadow-lg)" : "var(--shadow-sm)",
              display: "flex", flexDirection: "column",
              minHeight: 320,
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
                <span style={{
                  width: 28, height: 28, borderRadius: 8,
                  background: c.primary ? "rgba(255,255,255,0.12)" : "var(--surface-2)",
                  color: c.primary ? "var(--clay-soft)" : "var(--green-2)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                }}>
                  <Icon name={c.icon} size={15}/>
                </span>
                <span style={{ fontSize: 12, letterSpacing: ".08em", textTransform: "uppercase", color: c.primary ? "rgba(255,255,255,0.55)" : "var(--ink-3)", fontWeight: 500 }}>
                  {c.tag}
                </span>
              </div>
              <h3 className="display" style={{ fontSize: 26, margin: "0 0 14px", letterSpacing: "-0.02em", lineHeight: 1.15, fontWeight: 500 }}>
                {c.headline}
              </h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, margin: "0 0 22px", color: c.primary ? "rgba(255,255,255,0.78)" : "var(--ink-2)", flex: 1 }}>
                {c.body}
              </p>
              <div style={{
                fontSize: 11, color: c.primary ? "rgba(255,255,255,0.5)" : "var(--ink-3)",
                marginBottom: 18, paddingTop: 16,
                borderTop: c.primary ? "0.5px solid rgba(255,255,255,0.10)" : "0.5px solid var(--border)",
              }} className="mono tnum">
                {c.footer}
              </div>
              <button
                onClick={() => setMode(c.mode)}
                style={{
                  background: c.primary ? "var(--canvas)" : "var(--ink)",
                  color: c.primary ? "var(--ink)" : "var(--canvas)",
                  border: 0, padding: "11px 18px", borderRadius: 10,
                  fontSize: 14, fontWeight: 500,
                  display: "inline-flex", alignItems: "center", gap: 8,
                  alignSelf: "flex-start",
                }}>
                {c.cta} <Icon name="arrow" size={14}/>
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── How It Works ───────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    {
      n: "01",
      title: "Set your goal.",
      sub: "Type, place, when you want the keys. We translate it into a real Irish-property plan in 90 seconds.",
      detail: ["Mode: renting · saving · buying · family", "Place: Eircode, town or commute time", "When: a real date, not a vague quarter"],
    },
    {
      n: "02",
      title: "Connect your finances.",
      sub: "Read-only Open Banking under PSD2. Your payslips, lodgements, savings — the agent reads them, never stores credentials.",
      detail: ["AIB · BOI · PTSB · Revolut · N26", "30-second connect · revocable any time", "GDPR-native · EU-only · never sold"],
    },
    {
      n: "03",
      title: "Watch the agent work.",
      sub: "Every morning your readiness recalculates. The agent watches the market, drafts your paperwork, and tells you the single best thing to do today.",
      detail: ["Readiness re-scored at 06:00 daily", "Listings matched against your life", "One action a day — the highest-leverage one"],
    },
  ];
  return (
    <section id="how-it-works" style={{ padding: "120px 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">How it works</span>
            <h2 className="display" style={{ fontSize: 48, margin: "12px 0 0", letterSpacing: "-0.025em", lineHeight: 1.05 }}>
              Three steps to a <br/>
              <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>date with the keys.</span>
            </h2>
          </div>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--ink-2)", margin: 0 }}>
            Most property tools ask you to do all the work. HomeWoosh asks for three things, in 90 seconds, and then does the work — every morning, until the keys are yours.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              background: "var(--surface)",
              border: "0.5px solid var(--border)",
              borderRadius: 16,
              padding: 26,
              display: "flex", flexDirection: "column",
              minHeight: 320,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
                <span className="mono tnum" style={{ fontSize: 13, color: "var(--ink-3)" }}>{s.n}</span>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--green)", marginTop: 6 }}/>
              </div>
              <h3 className="display" style={{ fontSize: 24, margin: "0 0 10px", letterSpacing: "-0.02em", lineHeight: 1.1, fontWeight: 500 }}>{s.title}</h3>
              <p style={{ fontSize: 14, color: "var(--ink-2)", margin: "0 0 22px", lineHeight: 1.55, flex: 1 }}>{s.sub}</p>
              <div style={{ display: "flex", flexDirection: "column", gap: 7, paddingTop: 18, borderTop: "0.5px solid var(--border)" }}>
                {s.detail.map((d, j) => (
                  <div key={j} style={{ display: "flex", gap: 9, fontSize: 12, color: "var(--ink-3)", lineHeight: 1.45 }}>
                    <Icon name="check" size={12} style={{ color: "var(--green-2)", marginTop: 3, flexShrink: 0 }}/>
                    <span>{d}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Agentic auto-act section ───────────────────────────────────────────
function AutoActSection() {
  // animated agent activity log
  const baseEvents = [
    { time: "06:14", action: "Watched", target: "47 listings overnight", tag: "scan" },
    { time: "06:15", action: "Matched", target: "12 Beechwood Park, Bray — HomeScore 92", tag: "match" },
    { time: "06:16", action: "Drafted", target: "viewing request to Sherry FitzGerald Bray", tag: "draft" },
    { time: "06:17", action: "Prepared", target: "buyer pack: AIP, ID, proof of funds", tag: "prep" },
    { time: "06:18", action: "Booked", target: "Saturday 11:30 — added to your calendar", tag: "book" },
    { time: "06:19", action: "Flagged", target: "4 Glandore Park — illegal RPZ uplift caught", tag: "flag" },
    { time: "06:20", action: "Updated", target: "your interception date: Apr 14 → Apr 02", tag: "date" },
  ];

  const [shown, setShown] = useState(2);
  useEffect(() => {
    const id = setInterval(() => {
      setShown(s => s >= baseEvents.length ? 2 : s + 1);
    }, 1400);
    return () => clearInterval(id);
  }, []);

  const tagColor = {
    scan: "var(--ink-3)", match: "var(--green-2)", draft: "var(--green-2)",
    prep: "var(--ink-2)", book: "var(--clay)", flag: "var(--rose)", date: "var(--green-2)",
  };
  const tagBg = {
    scan: "var(--surface-2)", match: "var(--green-soft)", draft: "var(--green-soft)",
    prep: "var(--surface-2)", book: "var(--clay-soft)", flag: "var(--rose-soft)", date: "var(--green-soft)",
  };

  return (
    <section style={{ padding: "120px 32px", background: "var(--canvas)" }}>
      <div className="r-chasing-grid" style={{ maxWidth: 1100, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center" }}>
        <div>
          <span className="eyebrow" style={{ color: "var(--green)" }}>The agentic layer</span>
          <h2 className="display" style={{ fontSize: 48, margin: "12px 0 20px", letterSpacing: "-0.03em", lineHeight: 1.05 }}>
            HomeWoosh does <br/>
            <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>the chasing.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 460, margin: "0 0 28px" }}>
            We watch the market, rank the right opportunities, draft your messages, prepare your documents, and help you move before everyone else does.
          </p>

          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {[
              { label: "Watches", text: "47 Irish portals + agent-direct sites in real time" },
              { label: "Ranks", text: "every match against your AIP, commute, BER, life" },
              { label: "Drafts", text: "viewing requests, application packs, source-of-funds letters" },
              { label: "Books", text: "viewings · adds to your calendar · confirms with the agent" },
              { label: "Tracks", text: "what to fix next, in priority order, every morning" },
            ].map((r, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "84px 1fr", gap: 14, fontSize: 14, alignItems: "baseline" }}>
                <span className="mono" style={{ color: "var(--green-2)", fontSize: 12, letterSpacing: ".04em", textTransform: "uppercase", fontWeight: 500 }}>{r.label}</span>
                <span style={{ color: "var(--ink-2)" }}>{r.text}</span>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 28, padding: "12px 16px",
            background: "var(--surface-2)", borderRadius: 10,
            border: "0.5px solid var(--border)",
            fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5,
            display: "flex", alignItems: "flex-start", gap: 10,
          }}>
            <Icon name="lock" size={14} style={{ color: "var(--ink-2)", marginTop: 2, flexShrink: 0 }}/>
            <span className="serif" style={{ fontStyle: "italic", fontSize: 14.5, color: "var(--ink)" }}>
              HomeWoosh prepares everything. You approve before anything is sent or booked.
            </span>
          </div>
        </div>

        {/* Activity log preview */}
        <div style={{
          background: "var(--ink)", color: "var(--canvas)",
          borderRadius: 18, padding: 22,
          boxShadow: "var(--shadow-lg)",
          position: "relative",
          overflow: "hidden",
        }}>
          <div style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            paddingBottom: 14, marginBottom: 14,
            borderBottom: "0.5px solid rgba(255,255,255,0.10)",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--green)", boxShadow: "0 0 0 4px rgba(30,91,255,0.18)", animation: "pulse-soft 2s infinite" }}/>
              <span style={{ fontSize: 13, fontWeight: 500 }}>Agent activity · live</span>
            </div>
            <span className="mono" style={{ fontSize: 10.5, color: "rgba(255,255,255,0.5)" }}>this morning · Tue 24 May</span>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 2, minHeight: 360 }}>
            {baseEvents.slice(0, shown).map((e, i) => (
              <div key={e.time} className="fade-in" style={{
                display: "grid", gridTemplateColumns: "44px 78px 1fr",
                gap: 10, padding: "10px 4px",
                fontSize: 12.5,
                borderBottom: i < shown - 1 ? "0.5px solid rgba(255,255,255,0.06)" : "none",
                alignItems: "center",
              }}>
                <span className="mono tnum" style={{ fontSize: 10.5, color: "rgba(255,255,255,0.55)" }}>{e.time}</span>
                <span style={{
                  fontSize: 10, padding: "3px 8px", borderRadius: 999,
                  background: tagBg[e.tag], color: tagColor[e.tag],
                  fontWeight: 500, letterSpacing: ".04em", textTransform: "uppercase",
                  textAlign: "center",
                }}>{e.action}</span>
                <span style={{ color: "rgba(255,255,255,0.88)" }}>{e.target}</span>
              </div>
            ))}
            {shown < baseEvents.length && (
              <div style={{ padding: "10px 4px", display: "flex", alignItems: "center", gap: 8, fontSize: 11.5, color: "rgba(255,255,255,0.45)" }}>
                <span style={{ width: 5, height: 5, borderRadius: 999, background: "var(--clay-soft)", animation: "pulse-soft 1.2s infinite" }}/>
                Scanning…
              </div>
            )}
          </div>

          <div style={{
            marginTop: 18, padding: "12px 14px",
            background: "rgba(255,255,255,0.06)", borderRadius: 10,
            display: "flex", alignItems: "center", justifyContent: "space-between",
            fontSize: 12.5,
          }}>
            <span style={{ color: "var(--canvas)" }}>3 actions waiting for your tap</span>
            <span style={{ color: "var(--clay-soft)", display: "inline-flex", alignItems: "center", gap: 4, fontWeight: 500 }}>
              Review &amp; approve <Icon name="arrow" size={12}/>
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.DualPath = DualPath;
window.HowItWorks = HowItWorks;
window.AutoActSection = AutoActSection;