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

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

// ── TopNav v5 ──────────────────────────────────────────────────────────
function TopNavV5({ onOpenDashboard }) {
  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",
    }}>
      <a href="#" style={{ display: "flex", alignItems: "center", gap: 9 }}>
        <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="#FFFFFF"/>
          <circle cx="12" cy="13" r="2.2" fill="#0A1830"/>
        </svg>
        <span style={{ fontSize: 17, fontWeight: 600, letterSpacing: "-0.01em" }}>HomeSplicer</span>
      </a>

      <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>

      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <a onClick={onOpenDashboard} style={{ color: "rgba(255,255,255,0.82)", fontSize: 14, cursor: "pointer" }}>Log in</a>
        <button style={{
          background: "#1E5BFF", color: "#FFFFFF",
          border: 0, padding: "9px 18px", borderRadius: 10,
          fontSize: 14, fontWeight: 500,
        }}><span className="r-topnav-cta-text">Set your goal</span><span style={{ display: "none" }} className="">Start</span></button>
      </div>
    </nav>
  );
}

// ── 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;