// Yew — landing page

function NavBar({ onSignIn, taglineIdx, setTaglineIdx }) {
  return (
    <header
      style={{
        position: "sticky", top: 0, zIndex: 50,
        background: "color-mix(in oklab, var(--bg) 88%, transparent)",
        backdropFilter: "blur(8px)",
        borderBottom: "1px solid var(--rule)",
      }}
    >
      <Container>
        <div
          style={{
            height: 84,
            display: "flex", alignItems: "center", justifyContent: "space-between",
          }}
        >
          <YewWordmark size={36} glyphSize={30} />
          <nav
            style={{
              display: "flex", alignItems: "center", gap: 36,
              fontSize: 14, color: "var(--fg)",
            }}
          >
            <a className="tlink" href="#how">How it works</a>
            <a className="tlink" href="#coverage">Coverage</a>
            <a className="tlink" href="#pricing">Pricing</a>
            <a className="tlink" href="#faq">FAQ</a>
            <span style={{ width: 1, height: 18, background: "var(--rule)" }} />
            <button className="btn-link" onClick={onSignIn}>Sign in →</button>
            <a className="btn btn-primary" href="/intake.html" style={{ textDecoration: "none" }}>Begin intake</a>
          </nav>
        </div>
      </Container>
    </header>
  );
}

function Hero({ taglineIdx }) {
  const t = TAGLINES[taglineIdx % TAGLINES.length];
  return (
    <section style={{ paddingTop: 96, paddingBottom: 120, position: "relative" }}>
      <Container>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1.15fr 1fr",
            gap: 80,
            alignItems: "center",
          }}
        >
          <div>
            <Eyebrow accent>A Deep Forest AI product · est. 2026</Eyebrow>
            <h1
              className="serif"
              style={{
                fontFamily: "var(--serif)",
                fontWeight: 500,
                fontSize: "clamp(56px, 7vw, 104px)",
                lineHeight: 0.98,
                letterSpacing: "-0.028em",
                margin: "28px 0 0 0",
                color: "var(--brand)",
                textWrap: "balance",
              }}
            >
              {t.primary}
            </h1>
            <p
              style={{
                marginTop: 28,
                fontSize: 20,
                lineHeight: 1.45,
                color: "var(--muted)",
                maxWidth: 520,
                textWrap: "pretty",
              }}
            >
              {t.sub}
            </p>

            <div style={{ marginTop: 40, display: "flex", gap: 12, alignItems: "center" }}>
              <a href="/intake.html" className="btn btn-primary" style={{ textDecoration: "none" }}>
                Begin intake <span style={{ opacity: 0.6, marginLeft: 6 }}>—</span>
              </a>
              <a href="mailto:hello@yew.ai?subject=Speak%20with%20a%20steward" className="btn btn-ghost" style={{ textDecoration: "none" }}>
                Speak with a steward
              </a>
            </div>

            <div
              style={{
                marginTop: 56,
                paddingTop: 24,
                borderTop: "1px solid var(--rule)",
                display: "grid",
                gridTemplateColumns: "repeat(3, 1fr)",
                gap: 24,
                maxWidth: 520,
              }}
            >
              <MiniStat n="97+" l="Brokers monitored" />
              <MiniStat n="∞" l="Quarterly re-runs" />
              <MiniStat n="2,000 yr" l="Yew lifespan" mute />
            </div>
          </div>

          <div style={{ position: "relative" }}>
            <div
              style={{
                width: "100%",
                aspectRatio: "4 / 5",
                borderRadius: 1,
                backgroundImage: "url('https://images.unsplash.com/photo-1448375240586-882707db888b?w=900&h=1125&fit=crop&q=80')",
                backgroundSize: "cover",
                backgroundPosition: "center",
                filter: "saturate(0.85) contrast(1.05)",
              }}
              aria-label="A dim, misty forest interior."
            ></div>
            {/* Caption strip */}
            <div
              style={{
                position: "absolute",
                left: -24, bottom: 32,
                background: "var(--bg)",
                padding: "14px 18px",
                borderLeft: "2px solid var(--accent)",
                maxWidth: 280,
              }}
            >
              <div className="eyebrow">A note from the founder</div>
              <p
                className="serif"
                style={{
                  fontFamily: "var(--serif)",
                  fontStyle: "italic",
                  fontSize: 18,
                  lineHeight: 1.35,
                  margin: "10px 0 0 0",
                  color: "var(--fg)",
                }}
              >
                "Privacy used to be the default. Yew makes it default again — quietly."
              </p>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function MiniStat({ n, l, mute }) {
  return (
    <div>
      <div
        className="serif num"
        style={{
          fontFamily: "var(--serif)",
          fontSize: 32,
          lineHeight: 1,
          color: mute ? "var(--muted)" : "var(--brand)",
        }}
      >
        {n}
      </div>
      <div className="eyebrow" style={{ marginTop: 8 }}>{l}</div>
    </div>
  );
}

/* ---------- Marquee strip of brokers (placeholder) ---------- */
function BrokerMarquee() {
  const brokers = [
    "Spokeo", "Whitepages", "BeenVerified", "Intelius", "PeopleFinder",
    "Radaris", "MyLife", "TruthFinder", "FastPeopleSearch", "USPhoneBook",
    "Acxiom", "LexisNexis", "Epsilon", "Oracle Data Cloud", "Experian",
    "PeekYou", "ZabaSearch", "AnyWho", "InstantCheckmate", "PublicRecords",
  ];
  const row = [...brokers, ...brokers];
  return (
    <section
      style={{
        borderTop: "1px solid var(--rule)",
        borderBottom: "1px solid var(--rule)",
        padding: "20px 0",
        overflow: "hidden",
        background: "var(--bg-elev)",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 0 }}>
        <div
          className="eyebrow"
          style={{
            paddingLeft: 32, paddingRight: 24,
            borderRight: "1px solid var(--rule)",
            whiteSpace: "nowrap",
            color: "var(--fg)",
            background: "var(--bg-elev)",
            position: "relative",
            zIndex: 2,
            flexShrink: 0,
          }}
        >
          Removing from
        </div>
        <div style={{ flex: 1, minWidth: 0, overflow: "hidden", paddingLeft: 48 }}>
          <div style={{ display: "flex", gap: 48, animation: "marq 60s linear infinite", whiteSpace: "nowrap" }}>
            {row.map((b, i) => (
              <span
                key={i}
                className="serif"
                style={{
                  fontFamily: "var(--serif)",
                  fontSize: 22,
                  color: "var(--muted)",
                  fontStyle: "italic",
                  letterSpacing: "-0.01em",
                }}
              >
                {b}
              </span>
            ))}
          </div>
        </div>
      </div>
      <style>{`@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}`}</style>
    </section>
  );
}

/* ---------- How it works ---------- */
function HowItWorks() {
  const steps = [
    {
      n: "01",
      title: "Intake, in writing.",
      body: "We collect what's needed and nothing more — name, prior addresses, phone, email aliases, family members you want covered. Encrypted, single-use, and never sold.",
      meta: "≈ 8 minutes",
    },
    {
      n: "02",
      title: "The agent submits.",
      body: "An autonomous agent files opt-out requests across 95+ brokers. Where a broker requires postal mail, Yew sends the letter. Where it requires a phone call, Yew makes it.",
      meta: "Days 1–14",
    },
    {
      n: "03",
      title: "Verification, watched.",
      body: "Yew monitors a dedicated inbox for every confirmation link, clicks them, and records the receipt. You sign nothing. You click nothing.",
      meta: "Continuous",
    },
    {
      n: "04",
      title: "Every quarter, forever.",
      body: "Brokers repopulate. Yew re-runs the entire sequence every ninety days for the life of your subscription. You receive a single, quiet report.",
      meta: "Indefinite",
    },
  ];
  return (
    <section id="how" style={{ padding: "120px 0", borderTop: "1px solid var(--rule)" }}>
      <Container>
        <SectionHead
          eyebrow="How it works"
          title="Four steps. Then silence."
          lede="Yew is built to be hands-off. Once intake is complete, the work is invisible by design."
          max={760}
        />

        <div
          style={{
            marginTop: 72,
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 0,
            borderTop: "1px solid var(--rule)",
          }}
        >
          {steps.map((s, i) => (
            <div
              key={s.n}
              style={{
                padding: "32px 28px 36px 0",
                borderRight: i < 3 ? "1px solid var(--rule)" : "none",
                paddingLeft: i === 0 ? 0 : 28,
              }}
            >
              <div
                className="mono"
                style={{
                  fontFamily: "var(--mono)",
                  fontSize: 11,
                  color: "var(--accent)",
                  letterSpacing: "0.1em",
                }}
              >
                {s.n}
              </div>
              <h3
                className="serif"
                style={{
                  fontFamily: "var(--serif)",
                  fontWeight: 500,
                  fontSize: 26,
                  letterSpacing: "-0.01em",
                  margin: "14px 0 12px 0",
                  color: "var(--fg)",
                }}
              >
                {s.title}
              </h3>
              <p
                style={{
                  fontSize: 14.5, lineHeight: 1.55,
                  color: "var(--muted)", margin: 0,
                }}
              >
                {s.body}
              </p>
              <div
                className="mono"
                style={{
                  marginTop: 24,
                  fontFamily: "var(--mono)",
                  fontSize: 10.5,
                  textTransform: "uppercase",
                  letterSpacing: "0.14em",
                  color: "var(--stone-soft)",
                }}
              >
                {s.meta}
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

/* ---------- Coverage ---------- */
function Coverage() {
  const groups = [
    {
      label: "People-search aggregators",
      n: 47,
      sample: ["Spokeo", "Whitepages", "BeenVerified", "Intelius", "PeopleFinder", "Radaris", "MyLife"],
    },
    {
      label: "Marketing data brokers",
      n: 24,
      sample: ["Acxiom", "Epsilon", "Experian Marketing", "Oracle Data Cloud", "TransUnion TLO"],
    },
    {
      label: "Court-records resellers",
      n: 12,
      sample: ["PublicRecords", "BackgroundReport", "InstantCheckmate", "TruthFinder"],
    },
    {
      label: "Address aggregators",
      n: 14,
      sample: ["USPhoneBook", "AddressSearch", "AnyWho", "ZabaSearch"],
    },
  ];
  return (
    <section id="coverage" style={{ padding: "120px 0", background: "var(--bg-elev)" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: 80, alignItems: "start" }}>
          <SectionHead
            eyebrow="Coverage"
            title={<span>Ninety-seven brokers.<br/>One agent.</span>}
            lede="Yew is constantly auditing the broker market. When a new aggregator surfaces, we add it within thirty days — at no additional cost."
          />
          <div style={{ borderTop: "1px solid var(--rule)" }}>
            {groups.map((g, i) => (
              <div
                key={g.label}
                style={{
                  padding: "26px 0",
                  borderBottom: "1px solid var(--rule)",
                  display: "grid",
                  gridTemplateColumns: "60px 1fr auto",
                  gap: 24,
                  alignItems: "baseline",
                }}
              >
                <div
                  className="serif num"
                  style={{
                    fontFamily: "var(--serif)",
                    fontSize: 36,
                    lineHeight: 1,
                    color: "var(--brand)",
                  }}
                >
                  {g.n}
                </div>
                <div>
                  <div
                    style={{
                      fontSize: 17, fontWeight: 500,
                      color: "var(--fg)", marginBottom: 6,
                    }}
                  >
                    {g.label}
                  </div>
                  <div
                    style={{
                      fontSize: 13, color: "var(--muted)",
                      fontStyle: "italic",
                      fontFamily: "var(--serif)",
                    }}
                  >
                    {g.sample.join(" · ")} <span style={{ color: "var(--stone-soft)" }}>and more</span>
                  </div>
                </div>
                <button className="btn-link" style={{ fontSize: 13 }}>
                  Full list →
                </button>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

/* ---------- Testimonial ---------- */
function Quote() {
  return (
    <section style={{ padding: "140px 0", borderTop: "1px solid var(--rule)" }}>
      <Container max={960}>
        <Eyebrow accent>A wealth manager</Eyebrow>
        <blockquote
          className="serif"
          style={{
            fontFamily: "var(--serif)",
            fontWeight: 400,
            fontStyle: "italic",
            fontSize: "clamp(28px, 3.4vw, 44px)",
            lineHeight: 1.18,
            letterSpacing: "-0.012em",
            margin: "28px 0 0 0",
            color: "var(--fg)",
            textWrap: "balance",
          }}
        >
          "Three of my clients had a stalking concern in the same year. Yew is the
          first answer I can give them that doesn't sound like theater. It just
          works, and I never hear about it again."
        </blockquote>
        <div style={{ marginTop: 36, display: "flex", alignItems: "center", gap: 16 }}>
          <div
            style={{
              width: 44, height: 44, borderRadius: "50%",
              background: "var(--stone-soft)",
              border: "1px solid var(--rule)",
            }}
          />
          <div>
            <div style={{ fontSize: 14, fontWeight: 500 }}>Margaret H.</div>
            <div className="eyebrow" style={{ marginTop: 2 }}>Senior advisor · Northeast family office</div>
          </div>
        </div>
      </Container>
    </section>
  );
}

/* ---------- Pricing ---------- */
function Pricing() {
  const tiers = [
    {
      name: "Personal",
      price: "149",
      cadence: "/ year",
      blurb: "One person. Full coverage across 97+ brokers, monitored quarterly.",
      includes: ["One protected identity", "97+ broker coverage", "Quarterly re-run", "Quarterly written report", "Email support"],
      featured: false,
    },
    {
      name: "Family",
      price: "249",
      cadence: "/ year",
      blurb: "Up to five family members under one engagement. The most common choice.",
      includes: ["Up to 5 protected identities", "Shared family dashboard", "Family address linkage", "Priority email support", "Quarterly written briefing"],
      featured: true,
    },
    {
      name: "Concierge",
      price: "799",
      cadence: "/ year",
      blurb: "FCRA disclosure handling, photo-ID brokers, and a dedicated privacy contact.",
      includes: ["Everything in Personal", "FCRA suppression letters (LexisNexis, TransUnion, ChexSystems…)", "Photo-ID broker submissions", "Dedicated privacy contact", "White-glove onboarding"],
      featured: false,
    },
  ];
  return (
    <section id="pricing" style={{ padding: "140px 0", borderTop: "1px solid var(--rule)" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end", marginBottom: 64 }}>
          <SectionHead
            eyebrow="Pricing"
            title="One service. Three sizes."
          />
          <p
            style={{
              fontSize: 16, color: "var(--muted)", maxWidth: 460,
              margin: 0, textWrap: "pretty",
            }}
          >
            All tiers include the same agent, the same coverage, and the same quarterly cadence.
            What changes is how many people you'd like behind the trees.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", borderTop: "1px solid var(--rule)" }}>
          {tiers.map((t, i) => (
            <div
              key={t.name}
              style={{
                padding: "36px 28px 36px",
                borderRight: i < 2 ? "1px solid var(--rule)" : "none",
                borderBottom: "1px solid var(--rule)",
                background: t.featured ? "var(--bg-elev)" : "transparent",
                position: "relative",
              }}
            >
              {t.featured && (
                <div
                  className="mono"
                  style={{
                    position: "absolute", top: -1, left: 28,
                    background: "var(--accent)", color: "var(--mist)",
                    fontSize: 10, padding: "5px 9px",
                    letterSpacing: "0.1em",
                    fontFamily: "var(--mono)",
                  }}
                >
                  MOST CHOSEN
                </div>
              )}
              <div
                className="serif"
                style={{
                  fontFamily: "var(--serif)",
                  fontSize: 26, color: "var(--fg)", fontWeight: 500,
                  marginTop: t.featured ? 8 : 0,
                }}
              >
                {t.name}
              </div>
              <div
                style={{
                  marginTop: 18, display: "flex", alignItems: "baseline", gap: 6,
                }}
              >
                {t.price !== "On request" && (
                  <span
                    className="serif"
                    style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--muted)" }}
                  >
                    $
                  </span>
                )}
                <span
                  className="serif num"
                  style={{
                    fontFamily: "var(--serif)",
                    fontSize: t.price === "On request" ? 32 : 56,
                    lineHeight: 1, letterSpacing: "-0.02em",
                    color: "var(--brand)",
                  }}
                >
                  {t.price}
                </span>
                {t.cadence && (
                  <span style={{ fontSize: 14, color: "var(--muted)" }}>{t.cadence}</span>
                )}
              </div>

              <p style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.55, marginTop: 18 }}>
                {t.blurb}
              </p>

              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0 0" }}>
                {t.includes.map((it) => (
                  <li
                    key={it}
                    style={{
                      fontSize: 14, color: "var(--fg)",
                      padding: "10px 0",
                      borderTop: "1px solid var(--rule)",
                      display: "flex", alignItems: "center", gap: 10,
                    }}
                  >
                    <span
                      style={{
                        width: 4, height: 4, background: "var(--accent)",
                        borderRadius: "50%", flex: "none",
                      }}
                    />
                    {it}
                  </li>
                ))}
              </ul>

              <a
                className={`btn ${t.featured ? "btn-primary" : "btn-ghost"}`}
                href={t.price === "On request" ? "mailto:hello@yew.ai?subject=Office%20tier%20introduction" : "/intake.html"}
                style={{ marginTop: 28, width: "100%", justifyContent: "center", textDecoration: "none" }}
              >
                {t.price === "On request" ? "Request introduction" : "Begin intake"}
              </a>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const items = [
    {
      q: "Is Yew a VPN, or a password manager?",
      a: "Neither. Yew is concerned with what is already published about you on the open web. We do not touch your devices, your accounts, or your network."
    },
    {
      q: "How is this different from a one-time removal service?",
      a: "Brokers repopulate from public records, voter rolls, court filings, and each other. A single removal lasts three to nine months on average. Yew re-runs every ninety days for as long as you're a client."
    },
    {
      q: "What about brokers that require notarized letters?",
      a: "Roughly nine of the brokers we cover require notarization, postal mail, or both. Yew handles all of it. Your steward will request a single notarization session at intake."
    },
    {
      q: "Will I see anything happen?",
      a: "Almost nothing. A quarterly report. A verification email here or there. The point is that it should be quiet — and that an actual person can answer the phone if you'd like to know more."
    },
    {
      q: "Who is behind Yew?",
      a: "Yew is a product of Deep Forest AI, a small studio building agentic services for high-stakes domains. We don't publish a leadership page. Your steward will introduce themselves by name."
    },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={{ padding: "120px 0", background: "var(--bg-elev)" }}>
      <Container max={920}>
        <SectionHead
          eyebrow="Questions"
          title="Asked, plainly."
        />
        <div style={{ marginTop: 64, borderTop: "1px solid var(--rule)" }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div
                key={i}
                style={{ borderBottom: "1px solid var(--rule)" }}
              >
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: "100%",
                    padding: "26px 0",
                    background: "transparent",
                    border: 0,
                    textAlign: "left",
                    cursor: "pointer",
                    display: "flex", alignItems: "baseline", gap: 24,
                    color: "var(--fg)",
                  }}
                >
                  <span
                    className="mono"
                    style={{
                      fontFamily: "var(--mono)",
                      fontSize: 11,
                      color: "var(--muted)",
                      width: 28,
                    }}
                  >
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <span
                    className="serif"
                    style={{
                      fontFamily: "var(--serif)",
                      fontSize: 24,
                      letterSpacing: "-0.01em",
                      flex: 1,
                      fontWeight: 500,
                    }}
                  >
                    {it.q}
                  </span>
                  <span
                    style={{
                      color: "var(--muted)",
                      transform: isOpen ? "rotate(45deg)" : "none",
                      transition: "transform 200ms ease",
                      fontSize: 22, lineHeight: 1,
                    }}
                  >
                    +
                  </span>
                </button>
                {isOpen && (
                  <div
                    style={{
                      padding: "0 0 28px 52px",
                      fontSize: 16, color: "var(--muted)", lineHeight: 1.6,
                      maxWidth: 680,
                      animation: "fade 240ms ease both",
                    }}
                  >
                    {it.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </Container>
    </section>
  );
}

/* ---------- CTA strip ---------- */
function CTAStrip({ onSignIn }) {
  return (
    <section style={{ background: "var(--brand)", color: "var(--mist)", padding: "100px 0" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "center" }}>
          <h2
            className="serif"
            style={{
              fontFamily: "var(--serif)",
              fontWeight: 400,
              fontSize: "clamp(36px, 4.6vw, 64px)",
              lineHeight: 1.05,
              letterSpacing: "-0.018em",
              margin: 0,
              color: "inherit",
              textWrap: "balance",
            }}
          >
            Reclaim what's yours. <span style={{ color: "var(--accent)" }}>Yew.</span>
          </h2>
          <div>
            <p style={{ fontSize: 17, opacity: 0.78, margin: 0, maxWidth: 380 }}>
              Intake takes eight minutes. The first removal runs the same day. You'll hear from us in ninety.
            </p>
            <div style={{ marginTop: 28, display: "flex", gap: 12 }}>
              <a
                className="btn"
                href="/intake.html"
                style={{ background: "var(--mist)", color: "var(--brand)", textDecoration: "none" }}
              >
                Begin intake →
              </a>
              <a
                className="btn"
                href="mailto:hello@yew.ai?subject=Schedule%20a%20call"
                style={{
                  background: "transparent",
                  color: "var(--mist)",
                  border: "1px solid rgba(245,242,236,0.3)",
                  textDecoration: "none",
                }}
              >
                Schedule a call
              </a>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer style={{ padding: "72px 0 56px", borderTop: "1px solid var(--rule)" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 56 }}>
          <div>
            <YewWordmark size={32} glyphSize={26} />
            <p style={{ fontSize: 13, color: "var(--muted)", marginTop: 16, maxWidth: 280, lineHeight: 1.6 }}>
              A Deep Forest AI product. Yew is operated under a fiduciary engagement —
              we never sell, share, or retain client data beyond what is necessary to do the work.
            </p>
          </div>
          <FooterCol title="Service" links={["How it works", "Coverage", "Pricing", "Stewards", "Status"]} />
          <FooterCol title="Trust" links={["Privacy policy", "Engagement terms", "Data handling", "SOC 2 report", "Bug bounty"]} />
          <FooterCol title="Deep Forest" links={["About", "Press inquiries", "Yew — privacy", "Aspen — soon", "Cedar — soon"]} />
        </div>

        <div
          style={{
            marginTop: 56, paddingTop: 24,
            borderTop: "1px solid var(--rule)",
            display: "flex", justifyContent: "space-between", alignItems: "center",
            fontSize: 12, color: "var(--muted)",
            fontFamily: "var(--mono)",
            letterSpacing: "0.04em",
          }}
        >
          <span>© 2026 DEEP FOREST AI · ALL TREES ARE QUIET</span>
          <span>YEW.AI · TM PENDING · USPTO CLASS 42</span>
        </div>
      </Container>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div className="eyebrow" style={{ color: "var(--fg)" }}>{title}</div>
      <ul style={{ listStyle: "none", margin: "20px 0 0 0", padding: 0 }}>
        {links.map((l) => (
          <li key={l} style={{ padding: "6px 0" }}>
            <a
              href="#"
              style={{
                color: "var(--muted)", textDecoration: "none",
                fontSize: 13.5, fontWeight: 400,
              }}
              onMouseEnter={(e) => (e.currentTarget.style.color = "var(--fg)")}
              onMouseLeave={(e) => (e.currentTarget.style.color = "var(--muted)")}
            >
              {l}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

/* ---------- Landing root ---------- */
function Landing({ onSignIn, taglineIdx, setTaglineIdx }) {
  return (
    <div data-screen-label="01 Landing" data-om-validate>
      <NavBar onSignIn={onSignIn} taglineIdx={taglineIdx} setTaglineIdx={setTaglineIdx} />
      <Hero taglineIdx={taglineIdx} />
      <BrokerMarquee />
      <HowItWorks />
      <Coverage />
      <Quote />
      <Pricing />
      <FAQ />
      <CTAStrip onSignIn={onSignIn} />
      <Footer />
    </div>
  );
}

Object.assign(window, { Landing });
