/* global React, Icon, Logo */
const PageLanding = ({ onNav }) => {
  return (
    <main className="page-main">
      {/* Hero */}
      <section style={{ padding: "80px 0 64px", borderBottom: "1px solid var(--line-1)", position: "relative", overflow: "hidden" }}>
        <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "radial-gradient(60% 80% at 80% 0%, var(--accent-dim), transparent 60%)", pointerEvents: "none" }} />
        <div className="container" style={{ position: "relative" }}>
          <div className="row gap-2" style={{ marginBottom: 24 }}>
            <span className="eyebrow">A housing network · est. 2024</span>
          </div>
          <h1 className="t-display-xl" style={{ maxWidth: 880, marginBottom: 20 }}>
            Find a place to stay <span style={{ color: "var(--accent)" }}>tonight</span>, <br/>
            not a place on a waitlist.
          </h1>
          <p className="t-body muted" style={{ maxWidth: 580, fontSize: 17, marginBottom: 36 }}>
            Roomly connects case workers and individuals with verified hosts who rent
            rooms by the week or month. Vouchers accepted. No deposits required.
          </p>

          <div className="row gap-3" style={{ marginTop: 8 }}>
            <button className="btn btn-primary btn-lg" onClick={() => onNav("search")}>
              <Icon name="search" /> Browse rooms
            </button>
            <button className="btn btn-outline btn-lg" onClick={() => onNav("signup-pick")}>Get started</button>
          </div>
        </div>
      </section>

      {/* Three audience paths */}
      <section style={{ padding: "80px 0" }}>
        <div className="container">
          <div className="row spread" style={{ marginBottom: 40, alignItems: "flex-end" }}>
            <div>
              <span className="eyebrow">Three doors in</span>
              <h2 className="t-display" style={{ marginTop: 12, maxWidth: 540 }}>Pick the path that fits you.</h2>
            </div>
            <p className="t-sm muted" style={{ maxWidth: 320 }}>
              Whether you're placing clients, looking for yourself, or have a room to share — the next step is one click.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
            <PathCard
              tone="b"
              eyebrow="For case workers"
              title="Place clients with confidence."
              body="Search HUD-verified rooms by voucher type, accessibility, and proximity to services. Submit applications on behalf of clients."
              cta="Open agency portal"
              meta={["12,840 verified rooms", "All 50 states", "SOC 2 Type II"]}
              icon="briefcase"
              onClick={() => onNav("login-seeker")}
            />
            <PathCard
              tone="a"
              featured
              eyebrow="For individuals"
              title="Find a room you can move into this week."
              body="Browse rooms in your city. Filter by what matters — rent, room type, vouchers, sober living, pets. Message hosts directly."
              cta="Browse rooms"
              meta={["From $280/mo", "Move in within 7 days", "No credit check"]}
              icon="bed"
              onClick={() => onNav("search")}
            />
            <PathCard
              tone="c"
              eyebrow="For property hosts"
              title="List a room. Help someone close their door."
              body="Earn steady income from your spare room while supporting a verified guest. Background-checked tenants, on-time payments."
              cta="List a room"
              meta={["Avg. $720/mo per room", "Payouts in 48h", "Free to list"]}
              icon="key"
              onClick={() => onNav("login-lister")}
            />
          </div>
        </div>
      </section>

      {/* Live impact band */}
      <section style={{ padding: "32px 0 80px", borderTop: "1px solid var(--line-1)" }}>
        <div className="container">
          <div className="row spread" style={{ marginBottom: 28, alignItems: "flex-end" }}>
            <div>
              <span className="eyebrow">Live · updated hourly</span>
              <h2 className="t-display" style={{ marginTop: 12, maxWidth: 620 }}>The network at a glance.</h2>
            </div>
            <p className="t-sm muted" style={{ maxWidth: 320 }}>
              Real numbers from the Roomly platform — pulled from production at {new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })} today.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--line-1)", borderRadius: 14, overflow: "hidden", boxShadow: "0 0 0 1px var(--line-1)" }}>
            {[
              { k: "12,840", l: "Verified rooms", s: "+186 this week", trend: "up" },
              { k: "8,317", l: "Guests housed in 2024", s: "94% retention at 90 days", trend: "up" },
              { k: "$3.2M", l: "Paid to hosts last month", s: "Avg. $720/room", trend: "flat" },
              { k: "14 days", l: "Median search to move-in", s: "Down from 41 in 2023", trend: "up" },
            ].map(s => (
              <div key={s.l} style={{ background: "var(--bg-1)", padding: 32, display: "flex", flexDirection: "column", gap: 10, minHeight: 180 }}>
                <span className="t-mono-xs muted">{s.l}</span>
                <span className="t-display" style={{ fontSize: 44, lineHeight: 1, marginTop: 4 }}>{s.k}</span>
                <span className="row gap-2 t-sm" style={{ marginTop: "auto", color: s.trend === "up" ? "var(--success)" : "var(--ink-2)" }}>
                  {s.trend === "up" && <Icon name="chart" className="i i-sm" />}
                  {s.s}
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section style={{ padding: "32px 0 80px" }}>
        <div className="container">
          <div className="row spread" style={{ marginBottom: 32, alignItems: "flex-end" }}>
            <div>
              <span className="eyebrow">How it works</span>
              <h2 className="t-display" style={{ marginTop: 12 }}>From search to keys, in four steps.</h2>
            </div>
            <a className="t-sm row gap-2" style={{ color: "var(--accent)", cursor: "pointer" }}>Watch a 90-second walkthrough <Icon name="arrowRight" className="i i-sm" /></a>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--line-1)", borderRadius: 12, overflow: "hidden", boxShadow: "0 0 0 1px var(--line-1)" }}>
            {[
              { n: "01", t: "Search verified rooms", d: "Filter by city, rent, accessibility, vouchers, and program eligibility." },
              { n: "02", t: "Match with a host", d: "Send an introduction. Hosts respond within 24 hours on average." },
              { n: "03", t: "Run background & docs", d: "Voucher verification and identity checks happen in-platform — no faxes." },
              { n: "04", t: "Move in", d: "Sign the standard Roomly room-rental agreement. Payouts begin day one." },
            ].map((s, i) => (
              <div key={s.n} style={{ background: "var(--bg-1)", padding: 28, minHeight: 220, display: "flex", flexDirection: "column", gap: 12 }}>
                <span className="t-mono" style={{ fontSize: 13, color: "var(--accent)" }}>{s.n}</span>
                <h3 className="t-h2" style={{ marginTop: 4 }}>{s.t}</h3>
                <p className="t-sm muted">{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Voices — three audience testimonials */}
      <section style={{ padding: "32px 0 80px", borderTop: "1px solid var(--line-1)" }}>
        <div className="container">
          <div className="row spread" style={{ marginBottom: 32, alignItems: "flex-end" }}>
            <div>
              <span className="eyebrow">Voices from the network</span>
              <h2 className="t-display" style={{ marginTop: 12, maxWidth: 540 }}>Different paths in, same outcome.</h2>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
            {[
              {
                role: "Case worker · Phoenix",
                quote: "I used to spend three weeks of phone calls placing one client. With Roomly I shortlist five rooms in an afternoon and a guest is moved in by Friday.",
                name: "Renée Alvarez", org: "Maricopa County Housing Stability", placed: "47 clients placed",
              },
              {
                role: "Guest · Oakland",
                quote: "I had my voucher for eight months and nowhere to use it. Marian responded the same day. I've been in the room four months and I'm working again.",
                name: "Devon T.", org: "HUD-VASH voucher", placed: "Moved in Jan 2025",
              },
              {
                role: "Host · Houston",
                quote: "The screening removed every awkward conversation. Payouts hit my account on the first. I've hosted three guests in a row with no gaps.",
                name: "Yolanda P.", org: "Hosts 2 rooms", placed: "$1,560/mo income",
              },
            ].map(t => (
              <figure key={t.name} className="card" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 16 }}>
                <span className="t-mono-xs muted">{t.role}</span>
                <blockquote className="t-body" style={{ fontSize: 18, lineHeight: 1.5, fontWeight: 450 }}>
                  &ldquo;{t.quote}&rdquo;
                </blockquote>
                <figcaption className="row gap-3" style={{ marginTop: "auto", paddingTop: 16, borderTop: "1px solid var(--line-1)" }}>
                  <div style={{ width: 40, height: 40, borderRadius: 999, background: "var(--bg-2)", display: "grid", placeItems: "center", color: "var(--ink-2)", fontWeight: 600 }}>
                    {t.name.split(" ").map(w => w[0]).join("")}
                  </div>
                  <div className="col">
                    <span className="t-sm" style={{ fontWeight: 500 }}>{t.name}</span>
                    <span className="t-mono-xs muted">{t.org} · {t.placed}</span>
                  </div>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* Trust band */}
      <section style={{ padding: "32px 0 80px" }}>
        <div className="container">
          <div className="card" style={{ padding: 40, display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 60, alignItems: "center" }}>
            <div className="col gap-4">
              <span className="eyebrow">Trust by design</span>
              <h2 className="t-display">Every host is verified. Every guest is supported.</h2>
              <p className="t-body muted">
                Hosts complete identity, property, and safety checks before listing. Guests
                are supported by case workers, recovery programs, or our in-house housing navigators.
              </p>
              <div className="row gap-3" style={{ marginTop: 8 }}>
                <button className="btn btn-outline">Read our standards</button>
                <button className="btn btn-ghost">Partner agencies →</button>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
              {[
                { i: "shield", t: "ID & background", d: "All hosts verified through Persona." },
                { i: "key", t: "Property check", d: "Photos & inspection within 14 days." },
                { i: "users", t: "Case worker support", d: "Live housing navigators, 7am–9pm." },
                { i: "cash", t: "Voucher network", d: "HUD-VASH, Section 8, EHV accepted." },
              ].map(c => (
                <div key={c.t} className="card card-pad" style={{ padding: 20 }}>
                  <div className="row gap-3" style={{ marginBottom: 10 }}>
                    <span style={{ width: 32, height: 32, background: "var(--accent-dim)", color: "var(--accent)", display: "grid", placeItems: "center", borderRadius: 8 }}>
                      <Icon name={c.i} />
                    </span>
                    <h4 className="t-h3">{c.t}</h4>
                  </div>
                  <p className="t-sm muted">{c.d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Partner agencies + voucher programs */}
      <section style={{ padding: "32px 0 80px", borderTop: "1px solid var(--line-1)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 60 }}>
            <div className="col gap-4">
              <span className="eyebrow">Partner network</span>
              <h2 className="t-display">428 housing agencies route clients through Roomly.</h2>
              <p className="t-body muted">
                From county housing authorities to recovery programs to VA case management
                — agencies use the same shared inventory and submit applications without leaving their workflow.
              </p>
              <button className="btn btn-outline" style={{ alignSelf: "flex-start", marginTop: 8 }}>
                Become a partner agency <Icon name="arrowRight" className="i i-sm" />
              </button>
            </div>
            <div className="col gap-4">
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--line-1)", borderRadius: 12, overflow: "hidden", boxShadow: "0 0 0 1px var(--line-1)" }}>
                {[
                  "Maricopa County HSD", "VA Greater LA", "Houston Coalition",
                  "Atlanta Mission", "Project Home (PHL)", "Bay Area Community Svc.",
                  "Cleveland Housing Net.", "Chrysalis", "Catholic Charities USA",
                ].map(n => (
                  <div key={n} style={{ background: "var(--bg-1)", padding: "22px 18px", display: "flex", alignItems: "center", gap: 12, minHeight: 76 }}>
                    <span style={{ width: 24, height: 24, border: "1px solid var(--line-2)", borderRadius: 6, display: "grid", placeItems: "center", color: "var(--ink-3)", fontSize: 11, fontFamily: "var(--mono)" }}>
                      {n.split(" ").map(w => w[0]).filter(c => /[A-Z]/.test(c)).slice(0, 2).join("")}
                    </span>
                    <span className="t-sm" style={{ fontWeight: 450, lineHeight: 1.3 }}>{n}</span>
                  </div>
                ))}
              </div>
              <div className="row gap-3" style={{ marginTop: 8, flexWrap: "wrap" }}>
                <span className="t-mono-xs muted" style={{ width: "100%", marginBottom: 4 }}>Vouchers &amp; programs accepted</span>
                {["HUD-VASH", "Section 8 (HCV)", "Emergency Housing Voucher", "FUP", "Mainstream", "RRH", "PSH", "TBRA", "State subsidies"].map(v => (
                  <span key={v} className="chip chip-static">{v}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: "32px 0 80px", borderTop: "1px solid var(--line-1)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 60, alignItems: "flex-start" }}>
            <div className="col gap-4" style={{ position: "sticky", top: 100 }}>
              <span className="eyebrow">FAQ</span>
              <h2 className="t-display">Common questions, plain answers.</h2>
              <p className="t-sm muted">Don't see yours? <a style={{ color: "var(--accent)", cursor: "pointer" }}>Talk to a housing navigator →</a></p>
            </div>
            <div className="col" style={{ borderTop: "1px solid var(--line-1)" }}>
              {[
                { q: "Do I need good credit to rent through Roomly?", a: "No. Roomly does not run credit checks. We verify identity, voucher status if applicable, and eviction history within the last three years. Hosts agree to these standards when they list." },
                { q: "How are vouchers paid?", a: "If you have a HUD voucher, the housing authority pays the host directly each month and you cover any tenant portion via Roomly. We handle the W-9, HAP contract, and inspection scheduling." },
                { q: "Can I bring a pet, child, or partner?", a: "Each listing specifies what's allowed. Filter for pet-friendly, family-friendly, or two-occupant rooms. Hosts can require a pet deposit but most don't." },
                { q: "What if a placement doesn't work out?", a: "Either party can end the agreement with 14 days' notice. Roomly will help relocate the guest within 7 days at no cost. We track this — our re-housing rate is 96%." },
                { q: "How are hosts vetted?", a: "Identity verification through Persona, property photos, a 14-day inspection window, and references. We re-verify every 12 months and remove hosts who fall below 4.0 stars." },
                { q: "Is Roomly free?", a: "Free for guests and case workers, always. Hosts pay a 6% service fee on collected rent — that covers screening, inspections, the payout system, and 24/7 dispute support." },
              ].map((f, i) => (
                <FAQItem key={f.q} q={f.q} a={f.a} startOpen={i === 0} />
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section style={{ padding: "60px 0 100px" }}>
        <div className="container">
          <div className="card" style={{
            padding: "60px 56px",
            background: "linear-gradient(135deg, oklch(from var(--accent) l c h / 0.10), var(--bg-1) 60%)",
            boxShadow: "0 0 0 1px var(--accent), 0 30px 80px -30px oklch(from var(--accent) l c h / 0.4)",
            display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, alignItems: "center",
          }}>
            <div className="col gap-4">
              <span className="eyebrow" style={{ color: "var(--accent)" }}>Ready when you are</span>
              <h2 className="t-display-xl" style={{ fontSize: 56, lineHeight: 1.05 }}>
                Someone is looking for a room tonight. Maybe it's yours.
              </h2>
              <p className="t-body muted" style={{ maxWidth: 480 }}>
                List in 8 minutes. We'll handle the rest — verification, payments, paperwork, and a 24/7 housing navigator on call.
              </p>
              <div className="row gap-3" style={{ marginTop: 12 }}>
                <button className="btn btn-primary btn-lg" onClick={() => onNav("login-lister")}>List a room <Icon name="arrowRight" className="i i-sm" /></button>
                <button className="btn btn-ghost" onClick={() => onNav("search")}>Or browse rooms first</button>
              </div>
            </div>
            <div className="col gap-3">
              {[
                { k: "8 min", v: "to publish a listing" },
                { k: "$0", v: "to list — fees only on rent collected" },
                { k: "48 hrs", v: "from rent received to your bank" },
                { k: "24/7", v: "support for hosts &amp; guests" },
              ].map(s => (
                <div key={s.v} className="row spread" style={{ padding: "16px 0", borderBottom: "1px solid var(--line-1)" }}>
                  <span className="t-mono-sm muted" dangerouslySetInnerHTML={{ __html: s.v }} />
                  <span className="t-h2" style={{ fontFamily: "var(--mono)", fontSize: 22 }}>{s.k}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

const SearchSegment = ({ label, placeholder, icon, wide }) => (
  <div className="col" style={{ padding: "10px 18px", flex: wide ? 1.4 : 1, minWidth: 0 }}>
    <span className="t-mono-xs" style={{ color: "var(--ink-2)", marginBottom: 2 }}>{label}</span>
    <div className="row gap-2">
      <Icon name={icon} className="i i-sm" />
      <span className="t-sm" style={{ color: "var(--ink-3)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{placeholder}</span>
    </div>
  </div>
);

const PathCard = ({ tone, eyebrow, title, body, cta, meta, icon, onClick, featured }) => (
  <div
    className="card card-hover"
    onClick={onClick}
    style={{
      cursor: "pointer",
      padding: 0,
      display: "flex",
      flexDirection: "column",
      ...(featured ? { boxShadow: "0 0 0 1px var(--accent)", background: "linear-gradient(180deg, oklch(from var(--accent) l c h / 0.06), var(--bg-1))" } : {})
    }}
  >
    <div className={`photo has-img`} style={{ aspectRatio: "1.6", borderRadius: 0, backgroundImage: `url(${window.PATH_IMG[tone === "b" ? "case" : tone === "a" ? "ind" : "host"]})` }}>
      <span style={{ position: "absolute", top: 16, left: 16, width: 44, height: 44, background: "rgba(0,0,0,0.5)", backdropFilter: "blur(10px)", border: "1px solid rgba(255,255,255,0.2)", borderRadius: 12, display: "grid", placeItems: "center", color: "#fff" }}>
        <Icon name={icon} className="i i-lg" />
      </span>
      {featured && <span className="badge badge-accent" style={{ position: "absolute", top: 16, right: 16 }}>Most common</span>}
    </div>
    <div className="col gap-4" style={{ padding: 28 }}>
      <span className="t-mono-xs muted">{eyebrow}</span>
      <h3 className="t-h1">{title}</h3>
      <p className="t-sm muted">{body}</p>
      <div className="col gap-2" style={{ marginTop: 4 }}>
        {meta.map(m => (
          <div key={m} className="row gap-2 t-sm">
            <Icon name="check" className="i i-sm" style={{ color: "var(--accent)" }} />
            <span className="muted">{m}</span>
          </div>
        ))}
      </div>
      <button className={`btn ${featured ? "btn-primary" : "btn-outline"}`} style={{ marginTop: 8, alignSelf: "flex-start" }}>
        {cta} <Icon name="arrowRight" className="i i-sm" />
      </button>
    </div>
  </div>
);

const FAQItem = ({ q, a, startOpen }) => {
  const [open, setOpen] = React.useState(!!startOpen);
  return (
    <div style={{ borderBottom: "1px solid var(--line-1)" }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          width: "100%", padding: "22px 0", display: "flex", justifyContent: "space-between",
          alignItems: "center", background: "transparent", border: 0, cursor: "pointer",
          color: "var(--ink-0)", textAlign: "left", gap: 16,
        }}
      >
        <span className="t-h3" style={{ fontWeight: 500 }}>{q}</span>
        <span style={{ width: 28, height: 28, borderRadius: 999, border: "1px solid var(--line-2)", display: "grid", placeItems: "center", flexShrink: 0, transform: open ? "rotate(45deg)" : "rotate(0)", transition: "transform .2s" }}>
          <Icon name="plus" className="i i-sm" />
        </span>
      </button>
      <div style={{ maxHeight: open ? 240 : 0, overflow: "hidden", transition: "max-height .25s ease, padding .2s" }}>
        <p className="t-body muted" style={{ paddingBottom: 22, maxWidth: 680, lineHeight: 1.6 }}>{a}</p>
      </div>
    </div>
  );
};

window.PageLanding = PageLanding;