// v6_automations.jsx — rotating AI automations carousel
// Replaces PaperworkStripV5, AutoFillMagic, AutoActSection

const { useState: useStateV6, useEffect: useEffectV6, useRef: useRefV6, useMemo: useMemoV6 } = React;

// ── Card content + visuals ─────────────────────────────────────────────
const AUTOMATIONS = [
  {
    id: "formfiller",
    eyebrow: "Form filler",
    headline: "The form filler.",
    headlineItalic: "Any lender, any form, any time.",
    body: "Got a mortgage form, a HTB1, a rental application, a letting agent's PDF? HomeWoosh reads it, fills it, hands it back ready to submit.",
    bullets: [
      "Works with every Irish lender's forms — current and future",
      "As lenders update their forms, HomeWoosh adapts automatically",
      "Upload the PDF or paste the link — drafted with what we already know about you",
      "You review, you sign, you submit — never re-type the same field twice",
    ],
    Visual: FormFillerVisual,
  },
  {
    id: "paperwork",
    eyebrow: "Paperwork",
    headline: "Upload your payslips.",
    headlineItalic: "We fill the mortgage application.",
    body: "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.",
    bullets: [
      "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",
    ],
    Visual: PaperworkVisual,
  },
  {
    id: "ghostchaser",
    eyebrow: "Ghost chaser",
    headline: "The ghost chaser.",
    headlineItalic: "No reply? We follow up. So you don't have to.",
    body: "That landlord who hasn't replied in 6 days? HomeWoosh sent a polite nudge at day 3, escalated at day 7, and logged the outcome when they finally replied — or moved on when they didn't.",
    bullets: [
      "Auto-generated follow-ups · drafted in your voice",
      "Queued for your approval before sending",
      "Tracks response patterns by agent — know who's worth chasing",
      "Escalation cadence adjusts based on market urgency",
    ],
    Visual: GhostChaserVisual,
  },
  {
    id: "market",
    eyebrow: "Market watch & chasing",
    headline: "HomeWoosh does",
    headlineItalic: "the chasing.",
    body: "We watch the market, rank the right opportunities, draft your messages, prepare your documents, and help you move before everyone else does.",
    bullets: [
      "47 Irish portals + agent-direct sites in real time",
      "Every match ranked against your AIP, commute, BER, life",
      "Drafts viewing requests, application packs, source-of-funds letters",
      "Books viewings · syncs your calendar · confirms with the agent",
    ],
    Visual: MarketVisual,
  },
  {
    id: "area",
    eyebrow: "Area intelligence",
    headline: "We watch your area",
    headlineItalic: "so you don't have to.",
    body: "Sold-price comparables, BER history, school catchments, planning applications, RPZ caps and commute times — all anchored to Eircode and updated daily.",
    bullets: [
      "Property Price Register comparables, refreshed nightly",
      "Planning applications flagged within 500m of your shortlist",
      "School catchments, BER trends, walkability scores",
      "RPZ status and 24-month rent cap modelling",
    ],
    status: "live",
    Visual: AreaVisual,
  },
  {
    id: "family",
    eyebrow: "Family coordination",
    headline: "Gift letters,",
    headlineItalic: "fairness handled.",
    body: "Coordinate contributions across siblings, parents and grandparents. Auto-track CAT thresholds, draft co-signed gift letters, and keep the sibling fairness register up to date.",
    bullets: [
      "CAT Group A / B / C tracker · live Revenue 2026 thresholds",
      "Drafted gift letters · sworn declarations · co-signed",
      "Sibling fairness register · what each child has received",
      "Shared dashboard for up to 6 family members",
    ],
    status: "live",
    Visual: FamilyVisual,
  },
  {
    id: "refi",
    eyebrow: "Mortgage refinancing watch",
    headline: "Always on the",
    headlineItalic: "lookout for savings.",
    body: "Once you own the home, the agent doesn't sleep. It watches every Irish lender's rates and tells you the day switching pays for itself — including legal fees.",
    bullets: [
      "All seven Irish lenders · live rate sheet",
      "Break-fee maths · including solicitor costs",
      "Switch when net savings > €1,000 over 24 months",
      "Pre-filled switching application when you say go",
    ],
    status: "soon",
    statusLabel: "Coming Q3 2026",
    Visual: RefiVisual,
  },
  {
    id: "planning",
    eyebrow: "Planning permission watcher",
    headline: "Know what's being",
    headlineItalic: "built around you.",
    body: "Every planning application within 500m of your home or shortlist — pulled from the local-authority portals, classified by impact, and summarised in plain English.",
    bullets: [
      "All 31 local authority planning portals monitored",
      "Impact-classified (zero · cosmetic · view · privacy · noise)",
      "Plain-English summary of every change",
      "Objection-period reminders so you never miss a window",
    ],
    status: "soon",
    statusLabel: "Coming Q4 2026",
    Visual: PlanningVisual,
  },
  {
    id: "deposit",
    eyebrow: "Deposit return assistant",
    headline: "When you move out,",
    headlineItalic: "we get your deposit back.",
    body: "Move-out photo log, RTB-compliant deposit return demand, escalation pack, and a one-tap dispute filing when the landlord doesn't play fair.",
    bullets: [
      "Move-in / move-out photo log with timestamps",
      "Drafted RTB-compliant deposit return demand",
      "Wear-and-tear vs damage classifier",
      "One-tap RTB dispute filing if escalation is needed",
    ],
    status: "soon",
    statusLabel: "Coming Q4 2026",
    Visual: DepositVisual,
  },
];

// ── The carousel shell ─────────────────────────────────────────────────
function AutomationsCarousel() {
  const [idx, setIdx] = useStateV6(0);
  const [paused, setPaused] = useStateV6(false);

  useEffectV6(() => {
    if (paused) return;
    const id = setInterval(() => {
      setIdx(i => (i + 1) % AUTOMATIONS.length);
    }, 4000);
    return () => clearInterval(id);
  }, [paused, idx]);

  const a = AUTOMATIONS[idx];
  const Visual = a.Visual;

  function go(delta) {
    setIdx(i => (i + delta + AUTOMATIONS.length) % AUTOMATIONS.length);
  }

  return (
    <section id="automations" style={{ padding: "100px 48px", background: "#FFFFFF" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        {/* Header */}
        <div style={{ textAlign: "center", marginBottom: 40, maxWidth: 820, marginLeft: "auto", marginRight: "auto" }}>
          <div style={{ fontSize: 11, color: "#1E5BFF", letterSpacing: ".10em", textTransform: "uppercase", fontWeight: 500, marginBottom: 14 }}>
            AI-powered automations
          </div>
          <h2 className="display" style={{ fontSize: "clamp(32px, 4vw, 44px)", margin: "0 0 16px", lineHeight: 1.05, letterSpacing: "-0.025em", fontWeight: 500 }}>
            The work <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>HomeWoosh</span> does for you.
          </h2>
          <p style={{ fontSize: 15.5, color: "var(--ink-2)", margin: 0, lineHeight: 1.6, maxWidth: 640, marginLeft: "auto", marginRight: "auto" }}>
            While you sleep, your agent is filling forms, watching listings, drafting messages, and chasing the things that move you forward.
          </p>
        </div>

        {/* Card stage */}
        <div
          onClick={(e) => {
            // Only toggle pause when clicking the stage background (not arrows / inner controls)
            if (e.target === e.currentTarget || e.target.closest(".r-auto-card")) {
              setPaused(p => !p);
            }
          }}
          style={{
            position: "relative",
            background: "#FBF8F2",
            border: "0.5px solid var(--border)",
            borderRadius: 24,
            padding: 36,
            minHeight: 520,
            boxShadow: "0 8px 40px rgba(10,24,48,0.06)",
            overflow: "hidden",
            cursor: "pointer",
          }}
        >
          {/* Paused indicator */}
          {paused && (
            <div style={{
              position: "absolute", top: 16, left: "50%",
              transform: "translateX(-50%)",
              fontSize: 11, padding: "5px 12px", borderRadius: 999,
              background: "var(--ink)", color: "#FFFFFF",
              letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 600,
              display: "inline-flex", alignItems: "center", gap: 6, zIndex: 4,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "#E8A83A" }}/>
              Paused · click to resume
            </div>
          )}
          {/* Arrow controls */}
          <CarouselArrow side="left"  onClick={() => go(-1)} aria-label="Previous"/>
          <CarouselArrow side="right" onClick={() => go(+1)} aria-label="Next"/>

          {/* The card */}
          <div key={a.id} className="fade-in r-auto-card" style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 48,
            alignItems: "center",
            minHeight: 440,
            cursor: "pointer",
          }}>
            {/* LEFT — copy */}
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 22 }}>
                <span style={{
                  fontSize: 13, color: "#1E5BFF",
                  letterSpacing: ".12em", textTransform: "uppercase", fontWeight: 600,
                }}>{a.eyebrow}</span>
              </div>

              <h3 className="display" style={{
                fontSize: "clamp(36px, 4vw, 52px)",
                margin: "0 0 22px",
                lineHeight: 1.04,
                letterSpacing: "-0.03em",
                fontWeight: 500,
              }}>
                {a.headline}<br/>
                <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>{a.headlineItalic}</span>
              </h3>

              <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--ink-2)", margin: "0 0 26px", maxWidth: 500 }}>
                {a.body}
              </p>

              <div style={{ display: "flex", flexDirection: "column", gap: 13 }}>
                {a.bullets.map((b, i) => (
                  <div key={i} style={{ display: "flex", gap: 12, fontSize: 15, color: "var(--ink-2)", alignItems: "flex-start", lineHeight: 1.45 }}>
                    <span style={{
                      width: 22, height: 22, borderRadius: 999,
                      background: a.status === "soon" ? "var(--soft)" : "var(--green-soft)",
                      color: a.status === "soon" ? "var(--ink-3)" : "var(--green-2)",
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      flexShrink: 0, marginTop: 1,
                    }}>
                      <Icon name="check" size={12} strokeWidth={2.5}/>
                    </span>
                    {b}
                  </div>
                ))}
              </div>
            </div>

            {/* RIGHT — visual */}
            <div onClick={(e) => e.stopPropagation()} style={{ position: "relative", display: "flex", justifyContent: "center", alignItems: "center", cursor: "default" }}>
              <Visual soon={a.status === "soon"}/>
            </div>
          </div>
        </div>

        {/* Progress dots + tabs */}
        <div style={{ marginTop: 28, display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
          {/* Tabs */}
          <div style={{
            display: "flex", gap: 4, flexWrap: "wrap", justifyContent: "center",
            background: "#FBF8F2", padding: 5, borderRadius: 999, border: "0.5px solid var(--border)",
          }} className="r-auto-tabs">
            {AUTOMATIONS.map((x, i) => (
              <button key={x.id} onClick={(e) => { e.stopPropagation(); setIdx(i); setPaused(true); }}
                style={{
                  appearance: "none", border: 0,
                  background: i === idx ? "var(--ink)" : "transparent",
                  color: i === idx ? "#FFFFFF" : "var(--ink-2)",
                  padding: "10px 18px", borderRadius: 999,
                  fontSize: 14, fontWeight: 500,
                  letterSpacing: ".01em",
                  cursor: "pointer", transition: "all .2s",
                  opacity: x.status === "soon" ? (i === idx ? 1 : 0.6) : 1,
                  whiteSpace: "nowrap",
                }}>
                {x.eyebrow}
              </button>
            ))}
          </div>

          {/* Progress dots */}
          <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
            {AUTOMATIONS.map((_, i) => (
              <button key={i} onClick={() => setIdx(i)} style={{
                appearance: "none", border: 0, padding: 0,
                width: i === idx ? 24 : 6, height: 6, borderRadius: 999,
                background: i === idx ? "#1E5BFF" : "var(--soft)",
                transition: "all .35s cubic-bezier(.4,0,.2,1)",
                cursor: "pointer",
              }}/>
            ))}
            <span style={{ marginLeft: 10, fontSize: 11, color: "var(--ink-3)" }} className="tnum">
              {String(idx + 1).padStart(2, "0")} / {String(AUTOMATIONS.length).padStart(2, "0")}
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

function CarouselArrow({ side, onClick }) {
  return (
    <button onClick={onClick} style={{
      position: "absolute",
      top: "50%", transform: "translateY(-50%)",
      [side]: 14,
      width: 40, height: 40, borderRadius: 999,
      background: "#FFFFFF",
      border: "0.5px solid var(--border)",
      boxShadow: "0 4px 14px rgba(10,24,48,0.08)",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      color: "var(--ink)",
      cursor: "pointer", zIndex: 3,
      transition: "transform .15s, box-shadow .15s",
    }}>
      <Icon name="chevR" size={16} style={{ transform: side === "left" ? "rotate(180deg)" : "none" }}/>
    </button>
  );
}

function StatusTag({ status, label }) {
  if (status === "soon") {
    return (
      <span style={{
        fontSize: 10, padding: "3px 9px", borderRadius: 999,
        background: "rgba(232,168,58,0.15)", color: "#A87729",
        fontWeight: 600, letterSpacing: ".04em", textTransform: "uppercase",
        display: "inline-flex", alignItems: "center", gap: 5,
      }}>
        <span style={{ width: 5, height: 5, borderRadius: 999, background: "#E8A83A" }}/>
        {label || "Coming soon"}
      </span>
    );
  }
  return (
    <span style={{
      fontSize: 10, padding: "3px 9px", borderRadius: 999,
      background: "var(--green-soft)", color: "var(--green-2)",
      fontWeight: 600, letterSpacing: ".04em", textTransform: "uppercase",
      display: "inline-flex", alignItems: "center", gap: 5,
    }}>
      <span style={{ width: 5, height: 5, borderRadius: 999, background: "var(--green)", animation: "pulse-soft 2s infinite" }}/>
      Live now
    </span>
  );
}

// ───────────────────────────────────────────────────────────────────────
// VISUALS (one per card)
// ───────────────────────────────────────────────────────────────────────

function FormFillerVisual() {
  const [step, setStep] = useStateV6(0);
  useEffectV6(() => {
    const id = setInterval(() => setStep(s => (s + 1) % 3), 1600);
    return () => clearInterval(id);
  }, []);
  const boxes = [
    { label: "Any form",     sub: "PDF · URL · scan",          icon: "file" },
    { label: "Processing",   sub: "Reading · matching fields", icon: "sparkles" },
    { label: "Ready",        sub: "Filled · review · submit",  icon: "checkC" },
  ];
  return (
    <div style={{
      background: "#FFFFFF", borderRadius: 14, padding: 26,
      border: "0.5px solid var(--border)",
      boxShadow: "0 12px 40px rgba(10,24,48,0.10)",
      width: "100%", maxWidth: 480,
    }}>
      <div style={{ fontSize: 13, fontWeight: 500, color: "var(--ink-3)", letterSpacing: ".06em", textTransform: "uppercase", marginBottom: 18 }}>
        Universal form flow
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 18px 1fr 18px 1fr", gap: 4, alignItems: "center" }}>
        {boxes.map((b, i) => (
          <React.Fragment key={i}>
            <div style={{
              padding: "18px 12px",
              background: step === i ? "rgba(30,91,255,0.08)" : "var(--surface-2)",
              border: step === i ? "1px solid rgba(30,91,255,0.4)" : "0.5px solid var(--border)",
              borderRadius: 10,
              textAlign: "center",
              display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
              transition: "all .35s",
              transform: step === i ? "translateY(-2px)" : "none",
              boxShadow: step === i ? "0 6px 18px rgba(30,91,255,0.18)" : "none",
            }}>
              <span style={{
                width: 36, height: 36, borderRadius: 10,
                background: step === i ? "#1E5BFF" : "var(--surface)",
                color: step === i ? "#FFFFFF" : "var(--ink-3)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                transition: "all .35s",
              }}>
                <Icon name={b.icon} size={17}/>
              </span>
              <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink)" }}>{b.label}</div>
              <div style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{b.sub}</div>
            </div>
            {i < 2 && (
              <Icon name="arrow" size={14} style={{
                color: step > i ? "#1E5BFF" : "var(--ink-4)",
                margin: "0 auto", transition: "color .3s",
              }}/>
            )}
          </React.Fragment>
        ))}
      </div>

      <div style={{ marginTop: 20, padding: "12px 14px", background: "var(--surface-2)", borderRadius: 8, fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5 }}>
        <b style={{ color: "var(--ink)" }}>Examples:</b> AIB mortgage · HTB1 · BOI switcher · Avant remortgage · letting agent application · RTB tenancy · gift letter declaration.
      </div>
    </div>
  );
}

function GhostChaserVisual() {
  return (
    <div style={{
      background: "#FFFFFF", borderRadius: 14, padding: 22,
      border: "0.5px solid var(--border)",
      boxShadow: "0 12px 40px rgba(10,24,48,0.10)",
      width: "100%", maxWidth: 460,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
        <div style={{ fontSize: 13.5, fontWeight: 500 }}>Follow-up thread</div>
        <span style={{ fontSize: 10.5, padding: "3px 9px", borderRadius: 999, background: "var(--surface-2)", color: "var(--ink-3)", fontWeight: 500 }}>Sherry FitzGerald</span>
      </div>

      {/* Message 1 — sent */}
      <div style={{
        background: "var(--surface-2)", borderRadius: 10,
        padding: "12px 14px", marginBottom: 10,
        border: "0.5px solid var(--border)",
      }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 7 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <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={11} strokeWidth={2.5}/>
            </span>
            <span style={{ fontSize: 11.5, color: "var(--ink-3)", letterSpacing: ".04em" }}>Day 3 · Gentle follow-up</span>
          </div>
          <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 999, background: "var(--green-soft)", color: "var(--green-2)", fontWeight: 600, letterSpacing: ".04em" }}>SENT</span>
        </div>
        <div style={{ fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.5, fontStyle: "italic" }}>
          "Hi Mark, just following up on my application for 12 Beechwood Park. Happy to send any extra documents you need…"
        </div>
      </div>

      {/* Message 2 — pending approval */}
      <div style={{
        background: "rgba(232,168,58,0.06)", borderRadius: 10,
        padding: "12px 14px", marginBottom: 14,
        border: "0.5px solid rgba(232,168,58,0.30)",
      }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 7 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{
              width: 22, height: 22, borderRadius: 999,
              background: "rgba(232,168,58,0.20)", color: "#A87729",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              animation: "pulse-soft 2s infinite",
            }}>
              <Icon name="bell" size={11}/>
            </span>
            <span style={{ fontSize: 11.5, color: "var(--ink-3)", letterSpacing: ".04em" }}>Day 7 · Escalation</span>
          </div>
          <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 999, background: "rgba(232,168,58,0.20)", color: "#A87729", fontWeight: 600, letterSpacing: ".04em" }}>READY FOR YOU</span>
        </div>
        <div style={{ fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.5, fontStyle: "italic" }}>
          "Hi Mark, I haven't heard back on Beechwood Park. I'm in a strong position with AIP and ready to view this week — could you confirm if it's still available?"
        </div>
        <button style={{
          marginTop: 10, background: "var(--ink)", color: "#FFFFFF",
          border: 0, padding: "7px 13px", borderRadius: 6,
          fontSize: 11.5, fontWeight: 500,
        }}>
          Approve &amp; send
        </button>
      </div>

      <div style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: ".02em", lineHeight: 1.5 }}>
        <b style={{ color: "var(--ink-2)" }}>Sherry FitzGerald · response rate:</b> 4 of 7 enquiries answered · avg 5.2 days
      </div>
    </div>
  );
}

function PaperworkVisual() {
  // Reuses MORTGAGE_FIELDS to render the 16/16 form
  const [progress, setProgress] = useStateV6(0);
  useEffectV6(() => {
    const id = setInterval(() => {
      setProgress(p => p >= MORTGAGE_FIELDS.length ? 0 : p + 1);
    }, 240);
    return () => clearInterval(id);
  }, []);
  const elapsed = (progress / MORTGAGE_FIELDS.length * 58).toFixed(0);
  return (
    <div style={{
      background: "#FFFFFF",
      borderRadius: 14, padding: 18,
      border: "0.5px solid var(--border)",
      boxShadow: "0 12px 40px rgba(10,24,48,0.10)",
      width: "100%", maxWidth: 480,
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14, padding: "0 4px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, fontWeight: 500 }}>
          <Icon name="file" size={13} style={{ color: "var(--ink-3)" }}/> AIB · Mortgage Application Pack 2026
        </div>
        <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>HG-AGENT-v1.4</span>
      </div>

      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8, fontSize: 11, color: "var(--ink-3)" }}>
        <span className="mono">{progress}/{MORTGAGE_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: 14 }}>
        <div style={{
          width: `${(progress / MORTGAGE_FIELDS.length) * 100}%`,
          height: "100%", background: "#1E5BFF",
          transition: "width .22s ease-out",
        }}/>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, maxHeight: 320, overflow: "hidden" }}>
        {MORTGAGE_FIELDS.slice(0, 12).map((f, i) => {
          const filled = i < progress;
          const current = i === progress - 1;
          return (
            <div key={i} style={{ opacity: filled ? 1 : 0.32, transition: "opacity .25s" }}>
              <div style={{ fontSize: 9.5, color: "var(--ink-3)", marginBottom: 2 }}>{f.label}</div>
              <div className={current ? "ai-fill" : ""} style={{
                background: filled ? "#F4F6FA" : "#F0EFEA",
                border: `0.5px solid ${filled ? "rgba(30,91,255,0.20)" : "var(--border)"}`,
                borderRadius: 5, padding: "5px 8px",
                fontSize: 11, color: filled ? "var(--ink)" : "transparent",
                fontWeight: 500, minHeight: 24,
                display: "flex", alignItems: "center",
              }}>
                {filled ? f.value : "—"}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function MarketVisual() {
  const events = [
    { 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" },
  ];
  const tagColor = { scan: "var(--ink-3)", match: "var(--green-2)", draft: "var(--green-2)", prep: "var(--ink-2)", book: "var(--clay)" };
  const tagBg    = { scan: "#F4F6FA",     match: "var(--green-soft)", draft: "var(--green-soft)", prep: "#F4F6FA", book: "var(--clay-soft)" };

  return (
    <div style={{
      background: "var(--ink)", color: "#FFFFFF",
      borderRadius: 14, padding: 18,
      boxShadow: "0 12px 40px rgba(10,24,48,0.18)",
      width: "100%", maxWidth: 480,
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingBottom: 12, marginBottom: 12, borderBottom: "0.5px solid rgba(255,255,255,0.10)" }}>
        <span style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 12.5, fontWeight: 500 }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: "#7FE5A4", animation: "pulse-soft 2s infinite", boxShadow: "0 0 0 3px rgba(127,229,164,0.18)" }}/>
          Agent activity · live
        </span>
        <span className="mono" style={{ fontSize: 10, color: "rgba(255,255,255,0.45)" }}>Tue 24 May</span>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        {events.map((e) => (
          <div key={e.time} style={{
            display: "grid", gridTemplateColumns: "44px 90px 1fr",
            gap: 10, padding: "9px 4px", alignItems: "center", fontSize: 12.5,
            borderBottom: "0.5px solid rgba(255,255,255,0.06)",
          }}>
            <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: 600, letterSpacing: ".04em", textAlign: "center",
            }}>{e.action}</span>
            <span style={{ color: "rgba(255,255,255,0.88)" }}>{e.target}</span>
          </div>
        ))}
        <div style={{ padding: "9px 4px", display: "flex", alignItems: "center", gap: 8, fontSize: 11, color: "rgba(255,255,255,0.5)" }}>
          <span style={{ width: 5, height: 5, borderRadius: 999, background: "#7FB1FF", animation: "pulse-soft 1.2s infinite" }}/>
          Scanning…
        </div>
      </div>
    </div>
  );
}

function AreaVisual() {
  const months = ["Dec","Jan","Feb","Mar","Apr","May"];
  const trend  = [598, 602, 608, 605, 612, 619];
  const max = 640; const min = 580;
  const norm = v => ((v - min) / (max - min)) * 100;
  return (
    <div style={{
      background: "#FFFFFF", borderRadius: 14, padding: 20,
      border: "0.5px solid var(--border)",
      boxShadow: "0 12px 40px rgba(10,24,48,0.10)",
      width: "100%", maxWidth: 480,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 4 }}>
        <div style={{ fontSize: 14, fontWeight: 500 }}>Ranelagh, Dublin 6</div>
        <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 999, background: "var(--green-soft)", color: "var(--green-2)", fontWeight: 600 }}>High demand</span>
      </div>
      <div className="tnum display" style={{ fontSize: 28, color: "var(--ink)", letterSpacing: "-0.015em", lineHeight: 1.1, marginBottom: 2 }}>
        €619,000
      </div>
      <div style={{ fontSize: 11.5, color: "var(--green-2)", marginBottom: 16 }} className="tnum">
        +6.1% over 12 months · 3-month median
      </div>

      {/* sparkline */}
      <div style={{ display: "flex", alignItems: "flex-end", gap: 8, height: 100, marginBottom: 18, padding: "0 4px" }}>
        {trend.map((v, i) => (
          <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
            <div className="tnum" style={{ fontSize: 9, color: "var(--ink-3)" }}>{v}</div>
            <div style={{
              width: "100%",
              height: `${norm(v) * 0.7 + 20}%`,
              background: i === trend.length - 1 ? "#1E5BFF" : "rgba(30,91,255,0.18)",
              border: i === trend.length - 1 ? "none" : "0.5px solid rgba(30,91,255,0.30)",
              borderRadius: 3, minHeight: 4,
            }}/>
            <div style={{ fontSize: 10, color: "var(--ink-3)" }}>{months[i]}</div>
          </div>
        ))}
      </div>

      {/* row stats */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, fontSize: 11.5, color: "var(--ink-2)", borderTop: "0.5px solid var(--border)", paddingTop: 14 }}>
        <div style={{ display: "flex", justifyContent: "space-between" }}><span>Commute</span><span className="tnum" style={{ color: "var(--ink)" }}>18–24 min</span></div>
        <div style={{ display: "flex", justifyContent: "space-between" }}><span>Top schools</span><span className="tnum" style={{ color: "var(--ink)" }}>6</span></div>
        <div style={{ display: "flex", justifyContent: "space-between" }}><span>Walkability</span><span className="tnum" style={{ color: "var(--ink)" }}>92</span></div>
        <div style={{ display: "flex", justifyContent: "space-between" }}><span>Planning watch</span><span className="tnum" style={{ color: "var(--clay)" }}>2 active</span></div>
      </div>
    </div>
  );
}

function FamilyVisual() {
  const ppl = [
    { name: "Emma (You)", amt: 10000, color: "#1E5BFF" },
    { name: "Dad · Patrick", amt: 10000, color: "#3D6A4F" },
    { name: "Mum · Siobhán", amt:  7000, color: "#E8A83A" },
    { name: "Nana Joan",     amt:  5000, color: "#C76B3C" },
  ];
  return (
    <div style={{
      background: "#FFFFFF", borderRadius: 14, padding: 20,
      border: "0.5px solid var(--border)",
      boxShadow: "0 12px 40px rgba(10,24,48,0.10)",
      width: "100%", maxWidth: 480,
    }}>
      <div style={{ fontSize: 13.5, fontWeight: 500, marginBottom: 4 }}>Contribution plan</div>
      <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginBottom: 14 }}>Emma's first home</div>

      <div className="tnum display" style={{ fontSize: 28, color: "var(--ink)", letterSpacing: "-0.02em", marginBottom: 6, fontWeight: 500 }}>
        €32,000 <span style={{ fontSize: 13, color: "var(--ink-3)", fontWeight: 400 }}>/ €80,000 goal</span>
      </div>
      <div style={{ height: 6, borderRadius: 999, background: "var(--soft)", overflow: "hidden", marginBottom: 16 }}>
        <div style={{ width: "40%", height: "100%", background: "#1E5BFF" }}/>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 16 }}>
        {ppl.map((p, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "20px 1fr auto", gap: 10, alignItems: "center", fontSize: 12.5 }}>
            <span style={{
              width: 20, height: 20, borderRadius: 999, background: p.color,
              color: "#FFFFFF", fontWeight: 600, fontSize: 10,
              display: "inline-flex", alignItems: "center", justifyContent: "center",
            }}>{p.name[0]}</span>
            <span style={{ color: "var(--ink)" }}>{p.name}</span>
            <span className="tnum" style={{ color: "var(--ink-2)", fontWeight: 500 }}>€{p.amt.toLocaleString()}</span>
          </div>
        ))}
      </div>

      <div style={{
        padding: "10px 12px", background: "var(--surface-2)", borderRadius: 8,
        fontSize: 11, color: "var(--ink-2)", lineHeight: 1.45,
      }}>
        <b style={{ color: "var(--ink)" }}>CAT tracker:</b> Emma · €60k of €335k Group A used (17.9%). Sibling fairness register up to date.
      </div>
    </div>
  );
}

function RefiVisual() {
  return (
    <div style={{
      background: "#FFFFFF", borderRadius: 14, padding: 22,
      border: "0.5px solid var(--border)",
      boxShadow: "0 12px 40px rgba(10,24,48,0.10)",
      width: "100%", maxWidth: 460,
      opacity: 0.92,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
        <div style={{ fontSize: 13.5, fontWeight: 500 }}>Refinancing watch</div>
        <span style={{ fontSize: 10.5, padding: "3px 9px", borderRadius: 999, background: "rgba(232,168,58,0.18)", color: "#A87729", fontWeight: 600, letterSpacing: ".04em", textTransform: "uppercase" }}>preview</span>
      </div>

      <div style={{ background: "var(--surface-2)", borderRadius: 10, padding: 14, marginBottom: 14 }}>
        <div style={{ fontSize: 11, color: "var(--ink-3)", marginBottom: 4 }}>Current · AIB · variable</div>
        <div className="tnum" style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.01em" }}>3.85%</div>
        <div style={{ fontSize: 11, color: "var(--ink-3)" }}>€2,398/mo · €433,620 outstanding</div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {[
          { lender: "Avant Money", rate: "3.45%", save: "€88/mo · €5,280 net after fees", best: true },
          { lender: "Haven",       rate: "3.60%", save: "€56/mo · €2,160 net after fees" },
          { lender: "BOI",         rate: "3.75%", save: "€24/mo · €— breakeven 22 months" },
          { lender: "PTSB",        rate: "3.95%", save: "switch costs > savings",         skip: true },
        ].map((r, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "1fr auto auto",
            gap: 12, alignItems: "center", padding: "9px 12px",
            background: r.best ? "var(--green-soft)" : "var(--surface-2)",
            borderRadius: 8, fontSize: 12,
            opacity: r.skip ? 0.55 : 1,
          }}>
            <span style={{ fontWeight: r.best ? 600 : 500, color: r.best ? "var(--green-2)" : "var(--ink)" }}>{r.lender}</span>
            <span className="tnum mono" style={{ color: r.best ? "var(--green-2)" : "var(--ink-2)" }}>{r.rate}</span>
            <span style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{r.save}</span>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 14, fontSize: 11, color: "var(--green-2)",
        display: "flex", alignItems: "center", gap: 6, fontWeight: 500,
      }}>
        <Icon name="bolt" size={12}/> Switching to Avant saves €5,280 over 24 months
      </div>
    </div>
  );
}

function PlanningVisual() {
  return (
    <div style={{
      background: "#FFFFFF", borderRadius: 14, padding: 22,
      border: "0.5px solid var(--border)",
      boxShadow: "0 12px 40px rgba(10,24,48,0.10)",
      width: "100%", maxWidth: 460,
      opacity: 0.92,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
        <div style={{ fontSize: 13.5, fontWeight: 500 }}>Planning watcher</div>
        <span style={{ fontSize: 10.5, padding: "3px 9px", borderRadius: 999, background: "rgba(232,168,58,0.18)", color: "#A87729", fontWeight: 600, letterSpacing: ".04em", textTransform: "uppercase" }}>preview</span>
      </div>

      {/* Mini map */}
      <div style={{
        background: "linear-gradient(135deg, #E8EEF6 0%, #D8E3F0 100%)",
        borderRadius: 10, height: 160, marginBottom: 14, position: "relative", overflow: "hidden",
      }}>
        <svg viewBox="0 0 280 160" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
          <path d="M 0 50 Q 100 60 160 40 T 280 70" stroke="#FFFFFF" strokeWidth="3" fill="none"/>
          <path d="M 40 0 L 60 160" stroke="#FFFFFF" strokeWidth="2.5" fill="none"/>
          <path d="M 180 0 L 200 160" stroke="#FFFFFF" strokeWidth="2.5" fill="none"/>
          <path d="M 0 120 L 280 130" stroke="#FFFFFF" strokeWidth="2" fill="none"/>
          {/* Your home */}
          <g>
            <circle cx="140" cy="80" r="22" fill="rgba(30,91,255,0.10)" stroke="#1E5BFF" strokeWidth="1.2" strokeDasharray="3 3"/>
            <circle cx="140" cy="80" r="6" fill="#1E5BFF"/>
            <text x="140" y="100" textAnchor="middle" fontSize="9" fill="#1E5BFF" fontWeight="600">Your home</text>
          </g>
          {/* Planning markers */}
          <g>
            <circle cx="110" cy="55" r="10" fill="rgba(232,168,58,0.25)" stroke="#E8A83A" strokeWidth="1.2"/>
            <circle cx="110" cy="55" r="3" fill="#E8A83A"/>
          </g>
          <g>
            <circle cx="170" cy="115" r="10" fill="rgba(232,168,58,0.25)" stroke="#E8A83A" strokeWidth="1.2"/>
            <circle cx="170" cy="115" r="3" fill="#E8A83A"/>
          </g>
        </svg>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {[
          { dist: "210m N", title: "12-unit apartment block", impact: "View · Privacy", tone: "amber" },
          { dist: "340m E", title: "Rear single-storey extension", impact: "Zero impact", tone: "green" },
        ].map((p, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "auto 1fr auto",
            gap: 10, alignItems: "center", padding: "10px 12px",
            background: "var(--surface-2)", borderRadius: 8, fontSize: 12,
          }}>
            <span className="mono tnum" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{p.dist}</span>
            <span style={{ color: "var(--ink)" }}>{p.title}</span>
            <span style={{
              fontSize: 10, padding: "2px 7px", borderRadius: 999,
              background: p.tone === "amber" ? "var(--clay-soft)" : "var(--green-soft)",
              color: p.tone === "amber" ? "#7E4318" : "var(--green-2)",
              fontWeight: 600, letterSpacing: ".02em",
            }}>{p.impact}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function DepositVisual() {
  const steps = [
    { lbl: "Move-out photo log", done: true,  sub: "32 timestamped photos" },
    { lbl: "Demand letter drafted", done: true, sub: "RTB-compliant · 14-day return" },
    { lbl: "Landlord response", done: false, current: true, sub: "Day 8 of 14" },
    { lbl: "Escalation pack ready", done: false, sub: "If no return by Day 15" },
    { lbl: "RTB dispute filing", done: false, sub: "One tap when needed" },
  ];
  return (
    <div style={{
      background: "#FFFFFF", borderRadius: 14, padding: 22,
      border: "0.5px solid var(--border)",
      boxShadow: "0 12px 40px rgba(10,24,48,0.10)",
      width: "100%", maxWidth: 460,
      opacity: 0.92,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 }}>
        <div style={{ fontSize: 13.5, fontWeight: 500 }}>Deposit return tracker</div>
        <span style={{ fontSize: 10.5, padding: "3px 9px", borderRadius: 999, background: "rgba(232,168,58,0.18)", color: "#A87729", fontWeight: 600, letterSpacing: ".04em", textTransform: "uppercase" }}>preview</span>
      </div>
      <div style={{ fontSize: 11, color: "var(--ink-3)", marginBottom: 16 }}>14 Glandore Park, Dublin 4 · €2,400</div>

      <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
        {steps.map((s, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "26px 1fr", gap: 12, alignItems: "flex-start", padding: "10px 0" }}>
            <span style={{
              width: 22, height: 22, borderRadius: 999,
              background: s.done ? "var(--green)" : s.current ? "var(--clay)" : "var(--soft)",
              color: "#FFFFFF",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              marginTop: 1,
              animation: s.current ? "pulse-soft 2s infinite" : "none",
            }}>
              {s.done ? <Icon name="check" size={12} strokeWidth={2.5}/> : <span style={{ fontSize: 10, fontWeight: 600 }}>{i+1}</span>}
            </span>
            <div>
              <div style={{ fontSize: 13, fontWeight: 500, color: s.done ? "var(--ink)" : s.current ? "var(--ink)" : "var(--ink-3)" }}>{s.lbl}</div>
              <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 1 }}>{s.sub}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.AutomationsCarousel = AutomationsCarousel;
