// Shared components used across pages
const { useState: _u, useEffect: _e } = React;

// ───────────────────────── Animated demo: "this home → that buyer" ─────────────────────────
function FlyerMagicDemo({ accent = "coral" }) {
  const [phase, setPhase] = React.useState(0);

  React.useEffect(() => {
    const seq = [
      { p: 0, ms: 1400 },
      { p: 1, ms: 1600 },
      { p: 2, ms: 2200 },
      { p: 3, ms: 2400 },
    ];
    let i = 0;
    let timer;
    const run = () => {
      setPhase(seq[i].p);
      timer = setTimeout(() => {
        i = (i + 1) % seq.length;
        run();
      }, seq[i].ms);
    };
    run();
    return () => clearTimeout(timer);
  }, []);

  const accentColor = accent === "teal" ? "#2EBDBD" : "#E8573A";

  return (
    <div className="demo-stage">
      <div className={`demo-card listing ${phase >= 2 ? "shrunk" : ""}`}>
        <div className="listing-photo">
          <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
            <defs>
              <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#FFD9C7" />
                <stop offset="100%" stopColor="#FFEFE4" />
              </linearGradient>
              <linearGradient id="house" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#FAFAFA" />
                <stop offset="100%" stopColor="#E8E2DD" />
              </linearGradient>
            </defs>
            <rect width="320" height="200" fill="url(#sky)" />
            <rect x="0" y="140" width="320" height="60" fill="#D7CFC7" />
            <polygon points="60,140 160,70 260,140" fill="#0A0A0A" />
            <rect x="80" y="135" width="160" height="60" fill="url(#house)" />
            <rect x="100" y="150" width="32" height="32" fill="#2EBDBD" opacity="0.85" />
            <rect x="180" y="150" width="32" height="32" fill="#2EBDBD" opacity="0.85" />
            <rect x="148" y="160" width="24" height="35" fill="#0A0A0A" />
            <circle cx="50" cy="155" r="12" fill="#3A6B4F" />
            <circle cx="62" cy="160" r="10" fill="#3A6B4F" />
          </svg>
          <span className="listing-tag">NEW LISTING</span>
        </div>
        <div className="listing-meta">
          <div className="listing-addr">412 Henderson Ave</div>
          <div className="listing-row">
            <span>$847,000</span>
            <span className="dot">·</span>
            <span>3bd 2ba</span>
            <span className="dot">·</span>
            <span>1,940 sqft</span>
          </div>
        </div>
      </div>

      <div className={`demo-flow ${phase >= 1 ? "active" : ""}`}>
        <LolaOrb size={28} />
        <div className="flow-line">
          <div className="flow-fill" style={{ background: accentColor }} />
        </div>
      </div>

      <div className={`demo-card buyer ${phase >= 2 ? "shrunk" : ""}`}>
        <div className="buyer-avatar" style={{ background: `linear-gradient(135deg, ${accentColor}, #2EBDBD)` }}>
          <span>JM</span>
        </div>
        <div className="buyer-meta">
          <div className="buyer-name">Jenna &amp; Marcus</div>
          <div className="buyer-row">First-time buyers</div>
          <div className="buyer-row mono">Pre-approved · $920K · 7.125%</div>
          <div className="buyer-tags">
            <span>Walkable</span>
            <span>Schools</span>
            <span>Yard</span>
          </div>
        </div>
      </div>

      <div className={`demo-flyer ${phase >= 2 ? "in" : ""} ${phase >= 3 ? "done" : ""}`}>
        <div className="flyer-paper">
          <div className="flyer-top" style={{ background: accent === "gradient" ? "linear-gradient(135deg, #E8573A 0%, #2EBDBD 100%)" : accentColor }}>
            <div className="flyer-eyebrow mono">FOR JENNA &amp; MARCUS</div>
            <div className="flyer-headline">Your first home.<br />Walkable. Light-filled.</div>
          </div>
          <div className="flyer-body">
            <div className="flyer-stat">
              <div className="mono label">EST. MONTHLY</div>
              <div className="value">$5,694</div>
              <div className="mono small">at 7.125% · 30yr</div>
            </div>
            <div className="flyer-stat">
              <div className="mono label">YOUR BUDGET</div>
              <div className="value">98%</div>
              <div className="mono small">of pre-approval</div>
            </div>
            <div className="flyer-stat">
              <div className="mono label">SCHOOL RATING</div>
              <div className="value">9.1<span className="muted">/10</span></div>
              <div className="mono small">Cedar Elementary</div>
            </div>
          </div>
          <div className="flyer-foot">
            <Wordmark size={11} variant={accent === "teal" ? "teal" : "coral"} />
            <span className="mono">412 HENDERSON AVE</span>
          </div>
        </div>
      </div>

      <div className="demo-caption mono">
        {phase === 0 && "1 · pull listing"}
        {phase === 1 && "2 · ask Lola"}
        {phase === 2 && "3 · build the strategy"}
        {phase === 3 && "✓ ready to send"}
      </div>
    </div>
  );
}

// ───────────────────────── Waitlist ─────────────────────────
function Waitlist({ accent = "coral", compact = false }) {
  const [email, setEmail] = React.useState("");
  const [role, setRole] = React.useState("realtor");
  const [submitted, setSubmitted] = React.useState(false);
  const [err, setErr] = React.useState("");

  const accentBg =
    accent === "teal" ? "#2EBDBD" :
    accent === "gradient" ? "linear-gradient(135deg, #E8573A 0%, #2EBDBD 100%)" :
    "#E8573A";

  function submit(e) {
    e.preventDefault();
    if (!/.+@.+\..+/.test(email)) {
      setErr("Enter a valid email");
      return;
    }
    setErr("");
    setSubmitted(true);
  }

  if (submitted) {
    return (
      <div className="waitlist-done">
        <div className="check" style={{ background: accentBg }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M2 7.5L5.5 11L12 3.5" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <div>
          <div className="wl-done-title">You're on the list.</div>
          <div className="wl-done-sub mono">{email.toUpperCase()} · {role === "realtor" ? "REALTOR" : role === "lo" ? "LOAN OFFICER" : "OTHER"}</div>
        </div>
      </div>
    );
  }

  return (
    <form className="waitlist" onSubmit={submit}>
      {!compact && (
        <div className="wl-row">
          <div className="wl-roles" role="radiogroup" aria-label="Your role">
            {[
              { id: "realtor", label: "Realtor" },
              { id: "lo", label: "Loan officer" },
              { id: "other", label: "Other" },
            ].map((r) => (
              <button
                key={r.id}
                type="button"
                role="radio"
                aria-checked={role === r.id}
                className={`wl-role ${role === r.id ? "active" : ""}`}
                onClick={() => setRole(r.id)}
              >
                {r.label}
              </button>
            ))}
          </div>
        </div>
      )}
      <div className="wl-input-row">
        <input
          type="email"
          className="wl-input"
          placeholder="you@brokerage.com"
          value={email}
          onChange={(e) => { setEmail(e.target.value); setErr(""); }}
          aria-label="Email"
        />
        <button
          type="submit"
          className="wl-submit"
          style={{ background: accentBg }}
        >
          Get early access
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
      </div>
      {err && <div className="wl-err mono">{err}</div>}
      {!compact && (
        <div className="wl-fine mono">
          EARLY ACCESS · ROLLING OUT JUNE 2026 · NO SPAM, EVER
        </div>
      )}
    </form>
  );
}

// ───────────────────────── Live counter ─────────────────────────
function LiveCounter({ start = 1247, label = "REALTORS ON THE LIST" }) {
  const [n, setN] = React.useState(start);
  React.useEffect(() => {
    const id = setInterval(() => {
      if (Math.random() < 0.35) setN((x) => x + 1);
    }, 1800);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="live-counter">
      <span className="dot-live" />
      <span className="mono">{n.toLocaleString()} {label}</span>
    </div>
  );
}

// ───────────────────────── Page hero shell ─────────────────────────
function PageHero({ eyebrow, children, subtitle, kicker }) {
  return (
    <section className="page-hero">
      <div className="page-hero-inner">
        {eyebrow && (
          <div className="hero-eyebrow mono">
            <LolaOrb size={14} />
            <span>{eyebrow}</span>
          </div>
        )}
        <h1 className="page-hero-h1">{children}</h1>
        {subtitle && <p className="page-hero-sub">{subtitle}</p>}
        {kicker}
      </div>
    </section>
  );
}

Object.assign(window, { FlyerMagicDemo, Waitlist, LiveCounter, PageHero });