// v5_hero.jsx — cinematic hero + Rent/Buy dual cards (v5 redesign)

const { useState: useStateV5, useEffect: useEffectV5, useMemo: useMemoV5 } = React;

// ── TopNav v5 ──────────────────────────────────────────────────────────
function TopNavV5({ onOpenDashboard }) {
  const [navOpen, setNavOpen] = useStateV5(false);

  const links = [
    { href: "#how-it-works", label: "How it works" },
    { href: "#renters",      label: "For renters" },
    { href: "#buyers",       label: "For buyers" },
    { href: "#families",     label: "For families" },
    { href: "#resources",    label: "Resources" },
  ];

  return (
    <>
      <nav className="r-topnav" style={{
        position: "absolute", top: 0, left: 0, right: 0, zIndex: 50,
        padding: "22px 48px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        color: "#FFFFFF",
      }}>
        {/* Left: burger (mobile/tablet) + logo */}
        <div className="r-topnav-left" style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <button
            className="r-topnav-burger"
            onClick={() => setNavOpen(true)}
            aria-label="Open navigation menu"
            style={{
              background: "transparent", border: 0, color: "#FFFFFF",
              padding: 6, cursor: "pointer",
              alignItems: "center", justifyContent: "center",
              borderRadius: 8,
            }}>
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          </button>
          <a href="#" style={{ display: "flex", alignItems: "center", textDecoration: "none" }}>
            <img className="r-topnav-logo" src="assets/homewoosh-logo.png" alt="HomeWoosh" style={{ display: "block", height: 38, width: "auto" }}/>
          </a>
        </div>

        {/* Middle: PC nav (hidden on tablet/mobile via .r-topnav-mid media query) */}
        <div className="r-topnav-mid" style={{ display: "flex", alignItems: "center", gap: 32, fontSize: 14 }}>
          <a href="#how-it-works" style={{ color: "rgba(255,255,255,0.82)" }}>How it works</a>
          <a href="#renters"      style={{ color: "rgba(255,255,255,0.82)" }}>For renters</a>
          <a href="#buyers"       style={{ color: "rgba(255,255,255,0.82)" }}>For buyers</a>
          <a href="#families"     style={{ color: "rgba(255,255,255,0.82)" }}>For families</a>
          <a style={{ color: "rgba(255,255,255,0.82)", display: "inline-flex", alignItems: "center", gap: 4 }}>
            Resources <Icon name="chevD" size={12}/>
          </a>
        </div>

        {/* Right: Login + Set your goal (always visible, slightly larger on mobile via CSS) */}
        <div className="r-topnav-right" style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <a
            onClick={onOpenDashboard}
            className="r-topnav-login"
            style={{
              color: "rgba(255,255,255,0.92)", fontSize: 14, fontWeight: 500,
              cursor: "pointer", padding: "8px 4px", whiteSpace: "nowrap",
            }}>
            Log in
          </a>
          <button
            className="r-topnav-cta"
            style={{
              background: "#1E5BFF", color: "#FFFFFF",
              border: 0, padding: "10px 18px", borderRadius: 10,
              fontSize: 14, fontWeight: 500,
              whiteSpace: "nowrap", cursor: "pointer",
            }}>
            Set your goal
          </button>
        </div>
      </nav>

      {/* Mobile/tablet drawer */}
      {navOpen && (
        <div className="r-topnav-drawer" style={{
          position: "fixed", inset: 0,
          background: "rgba(8, 18, 42, 0.97)",
          backdropFilter: "blur(18px)",
          WebkitBackdropFilter: "blur(18px)",
          zIndex: 100,
          padding: "22px",
          display: "flex", flexDirection: "column",
          color: "#FFFFFF",
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 28 }}>
            <a href="#" onClick={() => setNavOpen(false)} style={{ display: "flex", alignItems: "center", textDecoration: "none" }}>
              <img src="assets/homewoosh-logo.png" alt="HomeWoosh" style={{ display: "block", height: 34, width: "auto" }}/>
            </a>
            <button
              onClick={() => setNavOpen(false)}
              aria-label="Close menu"
              style={{
                background: "transparent", border: 0, color: "#FFFFFF",
                padding: 6, cursor: "pointer",
                fontSize: 30, lineHeight: 1, width: 40, height: 40,
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                borderRadius: 8,
              }}>×</button>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
            {links.map((l) => (
              <a key={l.href} href={l.href} onClick={() => setNavOpen(false)} style={{
                color: "#FFFFFF", textDecoration: "none",
                fontSize: 22, fontWeight: 500, padding: "18px 4px",
                borderBottom: "0.5px solid rgba(255,255,255,0.12)",
              }}>{l.label}</a>
            ))}
          </div>

          <div style={{ marginTop: "auto", paddingTop: 24, display: "flex", flexDirection: "column", gap: 12 }}>
            <button onClick={() => { setNavOpen(false); onOpenDashboard && onOpenDashboard(); }} style={{
              background: "transparent", color: "#FFFFFF",
              border: "1px solid rgba(255,255,255,0.30)", padding: "14px 24px", borderRadius: 10,
              fontSize: 16, fontWeight: 500, cursor: "pointer",
            }}>Log in</button>
            <button style={{
              background: "#1E5BFF", color: "#FFFFFF",
              border: 0, padding: "14px 24px", borderRadius: 10,
              fontSize: 16, fontWeight: 500, cursor: "pointer",
            }}>Set your goal</button>
          </div>
        </div>
      )}
    </>
  );
}

// ── Hero v5: cinematic split with dashboard overlay ────────────────────
function HeroV5() {
  return (
    <section className="r-hero-section" style={{ position: "relative", minHeight: 640, overflow: "hidden", color: "#FFFFFF" }}>
      {/* Background: full-bleed sunset+city+house photo */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: `url("assets/hero-view.png")`,
        backgroundSize: "cover",
        backgroundPosition: "center center",
        backgroundColor: "#08122A",
      }}/>
      {/* Light readability scrim — only on the LEFT, soft */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(100deg, rgba(8,18,42,0.65) 0%, rgba(8,18,42,0.35) 32%, rgba(8,18,42,0.0) 55%)",
        pointerEvents: "none",
      }}/>
      {/* Subtle bottom shadow so the cream cards meet a defined edge */}
      <div style={{
        position: "absolute", left: 0, right: 0, bottom: 0, height: 200,
        background: "linear-gradient(180deg, transparent, rgba(8,18,42,0.35))",
        pointerEvents: "none",
      }}/>
      {/* Bottom city-light glow */}
      <div style={{
        position: "absolute", left: 0, right: 0, bottom: 0, height: 280,
        background: "linear-gradient(180deg, transparent, rgba(232,168,58,0.10) 60%, rgba(8,18,42,0.0))",
        pointerEvents: "none",
      }}/>
      {/* Subtle film grain noise */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(circle at 20% 70%, rgba(232,168,58,0.10), transparent 40%)",
        pointerEvents: "none",
      }}/>

      <TopNavV5 onOpenDashboard={() => window.__openDashboard && window.__openDashboard()}/>

      <div className="r-hero-content" style={{
        position: "relative", zIndex: 2,
        padding: "120px 48px 200px",
        maxWidth: 1320, margin: "0 auto",
        display: "grid",
        gridTemplateColumns: "minmax(0, 520px) minmax(0, 1fr)",
        gap: 60, alignItems: "start",
      }}>
        {/* LEFT: headline + CTAs */}
        <div>
          <h1 className="r-hero-headline" style={{
            fontSize: "clamp(48px, 5.4vw, 72px)",
            lineHeight: 1.04, letterSpacing: "-0.035em",
            margin: 0, fontWeight: 500,
            color: "#FFFFFF",
            textShadow: "0 2px 32px rgba(0,0,0,0.4)",
          }}>
            Mission control<br/>for the biggest<br/>move of your <span className="serif" style={{ color: "#7FB1FF", fontWeight: 400 }}>life</span><span style={{ color: "#7FB1FF" }}>.</span>
          </h1>
          <p style={{
            fontSize: 16.5, lineHeight: 1.55, marginTop: 28, marginBottom: 36,
            color: "rgba(255,255,255,0.82)", maxWidth: 460,
            textWrap: "pretty",
          }}>
            Set your goal. The AI advantage for renters and buyers — we watch the market, prepare your paperwork, and move first so you win.
          </p>

          <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
            <button style={{
              background: "#1E5BFF", color: "#FFFFFF",
              border: 0, padding: "13px 24px", borderRadius: 10,
              fontSize: 15, fontWeight: 500,
              display: "inline-flex", alignItems: "center", gap: 8,
              boxShadow: "0 4px 18px rgba(30,91,255,0.4)",
            }}>
              Set your goal
            </button>
            <button style={{
              background: "transparent", color: "#FFFFFF",
              border: 0, padding: "12px 4px",
              fontSize: 15, fontWeight: 500,
              display: "inline-flex", alignItems: "center", gap: 10,
            }}>
              <span style={{
                width: 32, height: 32, borderRadius: 999,
                background: "rgba(255,255,255,0.12)",
                border: "1px solid rgba(255,255,255,0.3)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
              }}>
                <Icon name="play" size={12} style={{ marginLeft: 2 }}/>
              </span>
              See how it works
            </button>
          </div>
        </div>

        {/* RIGHT: dashboard overlay card */}
        <div className="r-hero-dashcard" style={{ position: "relative", marginTop: -8 }}>
          <HeroDashboardCard/>
        </div>
      </div>
    </section>
  );
}

// ── Hero dashboard card ────────────────────────────────────────────────
function HeroDashboardCard() {
  return (
    <div style={{
      background: "rgba(13, 24, 48, 0.88)",
      backdropFilter: "blur(20px) saturate(160%)",
      WebkitBackdropFilter: "blur(20px) saturate(160%)",
      border: "0.5px solid rgba(255,255,255,0.10)",
      borderRadius: 20,
      padding: 28,
      color: "#FFFFFF",
      maxWidth: 580,
      boxShadow: "0 24px 80px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(255,255,255,0.06) inset",
    }}>
      {/* Top: welcome + readiness ring */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 22 }}>
        <div>
          <div style={{ fontSize: 14, color: "rgba(255,255,255,0.65)", marginBottom: 6 }}>
            Welcome back, Aoife <span style={{
              fontSize: 11, padding: "2px 9px", borderRadius: 5,
              background: "#1E5BFF", color: "#FFFFFF", fontWeight: 700,
              letterSpacing: ".08em", textTransform: "uppercase",
              marginLeft: 6, verticalAlign: 1,
            }}>Pro</span>
          </div>
          <div style={{ fontSize: 14, color: "rgba(255,255,255,0.60)", marginBottom: 4, letterSpacing: ".01em" }}>Home Interception Date</div>
          <div className="tnum" style={{ fontSize: 40, fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1.05 }}>14 Apr 2027</div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 6, marginTop: 8,
            fontSize: 12.5, color: "#7FE5A4", background: "rgba(127,229,164,0.12)",
            padding: "3px 11px", borderRadius: 999, fontWeight: 500,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: "#7FE5A4" }}/> On track
          </div>
        </div>

        <ReadinessRing pct={72}/>
      </div>

      {/* Status rows */}
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        <StatusRow icon="check"   color="#7FE5A4" label="Financial fit"    right="Complete" rightColor="#7FE5A4"/>
        <StatusRow icon="check"   color="#7FE5A4" label="Paperwork"        right="Complete" rightColor="#7FE5A4"/>
        <StatusRow icon="bolt"    color="#E8A83A" label="Market watch"     right="Active"   rightColor="#E8A83A"/>
        <StatusRow icon="sparkles" color="#7FB1FF" label="Matches"         right="3 new"   rightColor="#7FB1FF"/>
        <StatusRow icon="calendar" color="#E8A83A" label="Viewings"        right="1 booked" rightColor="#E8A83A"/>
        <StatusRow icon="map"     color="#7FB1FF" label="Area insights" right="Live" rightColor="#7FB1FF"/>
        {/* Next action row */}
        <div style={{
          marginTop: 6, paddingTop: 12,
          borderTop: "0.5px dashed rgba(255,255,255,0.14)",
          display: "grid", gridTemplateColumns: "26px 1fr auto 14px",
          gap: 12, alignItems: "center",
          padding: "12px 14px",
          background: "rgba(232,168,58,0.06)",
          border: "0.5px solid rgba(232,168,58,0.22)",
          borderRadius: 10,
          fontSize: 14,
        }}>
          <span style={{ color: "#E8A83A", display: "inline-flex" }}>
            <Icon name="bolt" size={15}/>
          </span>
          <span style={{ color: "#FFFFFF" }}>
            <span style={{ fontSize: 10.5, letterSpacing: ".10em", textTransform: "uppercase", color: "#E8A83A", fontWeight: 600, marginRight: 8 }}>Next</span>
            Approve AIB mortgage form
          </span>
          <span style={{ color: "rgba(255,255,255,0.70)", fontSize: 12.5 }}>Tap to review</span>
          <Icon name="chevR" size={12} style={{ color: "rgba(255,255,255,0.55)" }}/>
        </div>
      </div>

      {/* Mortgage callout strip — rotates through 4 examples every 4s */}
      <RotatingFormCallout/>

      {/* Footer ticker */}
      <div style={{
        marginTop: 16, paddingTop: 14,
        borderTop: "0.5px solid rgba(255,255,255,0.08)",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        fontSize: 12.5, color: "rgba(255,255,255,0.55)",
      }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
          <span style={{ width: 7, height: 7, borderRadius: 999, background: "#7FE5A4", animation: "pulse-soft 2s infinite" }}/>
          AI is watching <span className="tnum" style={{ color: "rgba(255,255,255,0.85)", fontWeight: 500 }}>12,430+</span> new properties daily
        </span>
        <span style={{ display: "flex", gap: -6 }}>
          {["#7FB1FF", "#E8A83A", "#7FE5A4", "#D14A3C"].map((c, i) => (
            <span key={i} style={{
              width: 16, height: 16, borderRadius: 999, background: c,
              border: "1.5px solid #0D1830",
              marginLeft: i === 0 ? 0 : -5,
            }}/>
          ))}
        </span>
      </div>
    </div>
  );
}

function ReadinessRing({ pct = 72 }) {
  const r = 32;
  const c = 2 * Math.PI * r;
  return (
    <div style={{ position: "relative", width: 90, height: 90, flexShrink: 0 }}>
      <svg width="90" height="90" viewBox="0 0 90 90" style={{ transform: "rotate(-90deg)" }}>
        <circle cx="45" cy="45" r={r} fill="none" stroke="rgba(255,255,255,0.10)" strokeWidth="7"/>
        <circle cx="45" cy="45" r={r} fill="none" stroke="#7FE5A4" strokeWidth="7"
          strokeLinecap="round"
          strokeDasharray={c}
          strokeDashoffset={c * (1 - pct/100)}
        />
      </svg>
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      }}>
        <div className="tnum" style={{ fontSize: 22, fontWeight: 600, lineHeight: 1, color: "#FFFFFF" }}>{pct}%</div>
        <div style={{ fontSize: 9, color: "rgba(255,255,255,0.62)", marginTop: 3, letterSpacing: ".10em", textTransform: "uppercase", fontWeight: 500 }}>Ready</div>
      </div>
    </div>
  );
}

function RotatingFormCallout() {
  const examples = [
    "AIB mortgage form filled · ready for review",
    "HTB1 form filled · ready for review",
    "PTSB switcher form filled · ready for review",
    "Letting agent application filled · ready for review",
  ];
  const [idx, setIdx] = useStateV5(0);
  const [out, setOut] = useStateV5(false);

  useEffectV5(() => {
    const id = setInterval(() => {
      setOut(true);
      setTimeout(() => {
        setIdx(i => (i + 1) % examples.length);
        setOut(false);
      }, 180);
    }, 4000);
    return () => clearInterval(id);
  }, []);

  return (
    <div style={{
      marginTop: 18, padding: "14px 16px",
      background: "linear-gradient(90deg, rgba(232,168,58,0.16), rgba(232,168,58,0.04))",
      border: "0.5px solid rgba(232,168,58,0.32)",
      borderRadius: 14,
      display: "flex", alignItems: "center", gap: 14,
      overflow: "hidden",
    }}>
      <span style={{
        width: 38, height: 38, borderRadius: 10,
        background: "rgba(232,168,58,0.22)",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        color: "#E8A83A",
        flexShrink: 0,
      }}>
        <Icon name="sparkles" size={18}/>
      </span>
      <div style={{ flex: 1, minWidth: 0, overflow: "hidden" }}>
        <div style={{
          fontSize: 14.5, fontWeight: 500, color: "#FFFFFF", lineHeight: 1.35,
          opacity: out ? 0 : 1,
          transform: out ? "translateY(-4px)" : "translateY(0)",
          transition: "opacity 200ms ease-out, transform 200ms ease-out",
          whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
        }}>
          {examples[idx]}
        </div>
      </div>
      <button style={{
        background: "#FFFFFF", color: "#0A1830",
        border: 0, padding: "9px 18px", borderRadius: 10,
        fontSize: 14, fontWeight: 500,
        flexShrink: 0,
        display: "inline-flex", alignItems: "center", gap: 6,
      }}>
        Review <Icon name="chevR" size={12}/>
      </button>
    </div>
  );
}

function StatusRow({ icon, color, label, right, rightColor }) {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "26px 1fr auto 14px",
      gap: 12, alignItems: "center",
      padding: "11px 14px",
      background: "rgba(255,255,255,0.04)",
      borderRadius: 10,
      fontSize: 15,
    }}>
      <span style={{ color, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
        <Icon name={icon} size={16}/>
      </span>
      <span style={{ color: "#FFFFFF", fontWeight: 400 }}>{label}</span>
      <span style={{ color: rightColor, fontSize: 13.5, fontWeight: 500 }}>{right}</span>
      <Icon name="chevR" size={12} style={{ color: "rgba(255,255,255,0.40)" }}/>
    </div>
  );
}

// ── Rent / Buy dual cards ──────────────────────────────────────────────
function DualCardsV5() {
  const cards = [
    {
      label: "Rent",
      headline: "Move in sooner. Live better.",
      bullets: [
        "Verified homes & landlords",
        "Instant alerts",
        "AI application prep",
        "Viewing coordination",
        "Move-in support",
      ],
      cta: "I want to rent",
      photo: "assets/houseroom.png",
    },
    {
      label: "Buy",
      headline: "Own your future. We make it happen.",
      bullets: [
        "Off-market alerts",
        "Affordability clarity",
        "Mortgage autopilot",
        "Offer strategy",
        "Conveyancing support",
      ],
      cta: "I want to buy",
      photo: "assets/house-2.png",
    },
  ];
  return (
    <section style={{
      position: "relative",
      marginTop: -180, marginBottom: 0,
      padding: "0 48px 50px",
      zIndex: 5,
      background: "linear-gradient(180deg, transparent 0%, transparent 38%, #FBF8F2 38%, #FBF8F2 100%)",
    }}>
      <div style={{
        maxWidth: 1180, margin: "0 auto",
        display: "grid", gridTemplateColumns: "1fr 1fr",
        gap: 18,
      }} className="r-dualcards-grid">
        {cards.map((c, i) => (
          <div key={i} className="r-dualcard-inner" style={{
            background: "#FBF8F2",
            border: "0.5px solid rgba(10,24,48,0.10)",
            borderRadius: 18,
            overflow: "hidden",
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            minHeight: 280,
            boxShadow: "0 24px 60px rgba(10,24,48,0.18)",
          }}>
            <div style={{ padding: "28px 26px 24px", display: "flex", flexDirection: "column" }}>
              <h3 className="display" style={{
                fontSize: 28, margin: "0 0 10px",
                fontWeight: 500, letterSpacing: "-0.02em",
                color: "var(--ink)",
              }}>
                <span className="serif" style={{ fontWeight: 400, color: "var(--ink)" }}>{c.label}</span>
              </h3>
              <div style={{ fontSize: 14.5, lineHeight: 1.4, color: "var(--ink-2)", marginBottom: 18, fontWeight: 500 }}>
                {c.headline}
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
                {c.bullets.map((b, j) => (
                  <div key={j} style={{ display: "flex", gap: 9, fontSize: 13, color: "var(--ink-2)", alignItems: "center" }}>
                    <Icon name="check" size={13} style={{ color: "var(--green)", flexShrink: 0 }}/>
                    <span>{b}</span>
                  </div>
                ))}
              </div>
              <a style={{
                display: "inline-flex", alignItems: "center", gap: 6,
                fontSize: 13.5, fontWeight: 500, color: "#1E5BFF",
                marginTop: 22, alignSelf: "flex-start",
              }}>
                {c.cta} <Icon name="arrow" size={13}/>
              </a>
            </div>
            <div className="r-dualcard-photo" style={{
              background: `url(${c.photo})`,
              backgroundSize: "cover",
              backgroundPosition: "center",
            }}/>
          </div>
        ))}
      </div>
    </section>
  );
}

window.HeroV5 = HeroV5;
window.DualCardsV5 = DualCardsV5;
window.TopNavV5 = TopNavV5;