// Hotel Walks — Marketing landing page.
// Pitch to hotel GMs / revenue managers. Editorial, calm, direct.

(function() {
  const { SmartKey, Wordmark, Lockup, tokens: HWT } = window.HW;
  const { Caps, Btn, SerifI } = window.UI;
  const { IxRouting, IxTimer, IxLetter, IxLedger, FlowIcon, IxTimeline } = window.HWIx;

  function Section({ children, dark, pad = "80px 64px", style }) {
    return (
      <section style={{
        background: dark ? "var(--ink)" : "var(--bone)",
        color: dark ? "var(--bone)" : "var(--ink)",
        padding: pad,
        ...style,
      }}>
        <div style={{ maxWidth: 1240, margin: "0 auto" }}>{children}</div>
      </section>
    );
  }

  function Hero() {
    const [navOpen, setNavOpen] = React.useState(false);
    return (
      <section style={{ background: "var(--ink)", color: "var(--bone)", padding: "20px 0 0" }}>
        {/* Top bar */}
        <div style={{
          maxWidth: 1240, margin: "0 auto",
          padding: "12px 24px 32px",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 16,
        }} className="mkt-topbar">
          <Lockup size={20} dark tagline="front-desk handoff" />

          {/* Desktop links — Product / Pricing / Markets are placeholders (no pages yet). */}
          <div className="mkt-links" style={{ display: "flex", alignItems: "center", gap: 28 }}>
            {["Product", "Pricing", "Markets"].map(label => (
              <a key={label} href="#" onClick={(e) => e.preventDefault()} style={{ color: "inherit", textDecoration: "none", cursor: "default" }}>
                <Caps color="rgba(244,238,221,0.7)">{label}</Caps>
              </a>
            ))}
            <a href="#/app" style={{ color: "inherit", textDecoration: "none" }}>
              <Btn kind="onInkGhost" size="sm">Try the demo →</Btn>
            </a>
          </div>

          {/* Mobile hamburger */}
          <button
            onClick={() => setNavOpen(o => !o)}
            className="mkt-hamburger"
            aria-label="Menu"
            style={{
              display: "none",
              background: "transparent", border: "1px solid var(--bone)",
              padding: "10px 12px", cursor: "pointer", color: "var(--bone)",
            }}>
            <span style={{ display: "inline-flex", flexDirection: "column", gap: 3 }}>
              <span style={{ width: 16, height: 1.5, background: "var(--bone)", transition: "transform 0.18s", transform: navOpen ? "translateY(4.5px) rotate(45deg)" : "none" }}/>
              <span style={{ width: 16, height: 1.5, background: "var(--bone)", opacity: navOpen ? 0 : 1, transition: "opacity 0.12s" }}/>
              <span style={{ width: 16, height: 1.5, background: "var(--bone)", transition: "transform 0.18s", transform: navOpen ? "translateY(-4.5px) rotate(-45deg)" : "none" }}/>
            </span>
          </button>
        </div>

        {/* Mobile drawer */}
        {navOpen && (
          <div className="mkt-drawer" style={{
            display: "none",
            borderTop: "1px solid rgba(244,238,221,0.18)",
            borderBottom: "1px solid rgba(244,238,221,0.18)",
            marginBottom: 24,
          }}>
            {["Product", "Pricing", "Markets"].map(l => (
              <a key={l} href="#" onClick={(e) => { e.preventDefault(); setNavOpen(false); }} style={{
                display: "flex", alignItems: "center", justifyContent: "space-between",
                padding: "20px 24px",
                textDecoration: "none", color: "var(--bone)",
                borderBottom: "1px solid rgba(244,238,221,0.12)",
                cursor: "default",
              }}>
                <span className="serif-i" style={{ fontSize: 24 }}>{l}</span>
                <Caps color="rgba(244,238,221,0.55)">→</Caps>
              </a>
            ))}
            <a href="#/app" onClick={() => setNavOpen(false)} style={{
              display: "flex", padding: "22px 24px",
              textDecoration: "none", color: "var(--bone)",
              background: "rgba(244,238,221,0.06)",
            }}>
              <span className="serif-i" style={{ fontSize: 24 }}>Try the demo →</span>
            </a>
          </div>
        )}

        {/* Hero copy */}
        <div style={{
          maxWidth: 1240, margin: "0 auto", padding: "30px 48px 120px",
          display: "grid", gridTemplateColumns: "minmax(0, 1.15fr) minmax(0, 1fr)",
          gap: 80, alignItems: "center",
        }} className="hero-grid">
          <div>
            <div style={{ marginBottom: 36 }}>
              <Caps color="rgba(244,238,221,0.55)">For oversold nights · Beta · Brooklyn & South Florida</Caps>
            </div>
            <div className="serif-i hero-headline" style={{ fontSize: "clamp(40px, 5.2vw, 84px)", lineHeight: 0.98, marginBottom: 28, color: "var(--bone)" }}>
              When the rooms run out, the handoff begins.
            </div>
            <p style={{
              fontFamily: "'Spectral', serif", fontWeight: 300,
              fontSize: 19, lineHeight: 1.5,
              color: "rgba(244,238,221,0.72)",
              maxWidth: "44ch", margin: "0 0 40px",
            }} className="hero-sub">
              Hotel Walks is the quiet protocol behind a walked guest.
              Re-house the booking, negotiate the rate, generate the letter,
              and settle the invoice — without the front desk picking up the phone.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }} className="hero-ctas">
              <a href="#/app" style={{ textDecoration: "none" }}><Btn kind="onInk" size="lg">See the demo</Btn></a>
              <Btn kind="onInkGhost" size="lg" onClick={() => {}}>Join the beta</Btn>
            </div>
          </div>

          <HeroMark />
        </div>
      </section>
    );
  }

  function Stat({ label, value, dark }) {
    return (
      <div style={{ minWidth: 140 }}>
        <div className="serif-i" style={{ fontSize: 38, lineHeight: 1, marginBottom: 6, color: dark ? "var(--bone)" : "var(--ink)" }}>{value}</div>
        <Caps color={dark ? "rgba(244,238,221,0.55)" : undefined}>{label}</Caps>
      </div>
    );
  }

  // The hero visual — two stacked walk-letter cards.
  function HeroMark() {
    return (
      <div style={{ position: "relative", width: "100%", minHeight: 480, height: 480 }} className="hero-visual">
        {/* Back letter */}
        <div style={{
          position: "absolute", top: 50, right: 0,
          width: 300, height: 400,
          background: "var(--bone)", color: "var(--ink)",
          transform: "rotate(-5deg)",
          boxShadow: "0 24px 60px rgba(0,0,0,0.4)",
          padding: 26,
          display: "flex", flexDirection: "column", justifyContent: "space-between",
        }}>
          <div>
            <Caps>Walk letter · duplicate</Caps>
            <div className="serif-i" style={{ fontSize: 28, marginTop: 18, lineHeight: 1.1 }}>
              The Hoxton,<br/>Williamsburg
            </div>
            <p style={{ fontSize: 11, color: "var(--muted)", marginTop: 14, lineHeight: 1.5 }}>
              Re-housed for the night of May 21. Confirmation enclosed.
            </p>
          </div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.10em", color: "var(--muted)" }}>
            260521-K-WYTHE-HOXBK-0027841
          </div>
        </div>
        {/* Front letter */}
        <div style={{
          position: "absolute", top: 10, right: 130,
          width: 300, height: 400,
          background: "var(--bone)", color: "var(--ink)",
          transform: "rotate(2deg)",
          boxShadow: "0 30px 80px rgba(0,0,0,0.55)",
          padding: 26,
          display: "flex", flexDirection: "column", justifyContent: "space-between",
        }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 22 }}>
              <SmartKey size={28} />
              <div className="serif-i" style={{ fontSize: 18 }}>Wythe Hotel</div>
            </div>
            <Caps>Re-housing for the guest of</Caps>
            <div className="serif-i" style={{ fontSize: 32, lineHeight: 1.05, marginTop: 14 }}>
              Maya Klein
            </div>
            <div style={{ height: 1, background: "var(--rule)", margin: "18px 0" }}/>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
              <Caps>Re-housed at</Caps>
              <Caps>Rate</Caps>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10 }}>
              <div style={{ fontSize: 13, lineHeight: 1.2 }}>1 Hotel<br/>Brooklyn Bridge</div>
              <div className="mono" style={{ fontSize: 14 }}>$645</div>
            </div>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
            <div>
              <Caps>Authorized</Caps>
              <div className="serif-i" style={{ fontSize: 16, marginTop: 8 }}>A. Nair</div>
            </div>
            <div className="mono" style={{ fontSize: 9, letterSpacing: "0.10em", color: "var(--muted)" }}>
              0027841
            </div>
          </div>
        </div>
      </div>
    );
  }

  function Problem() {
    // Single column template + gap, reused for both the headline row and the timeline row, so everything aligns.
    const gridCols = "minmax(0, 1fr) minmax(0, 1fr)";
    const gridGap = 64;
    return (
      <Section pad="110px 48px">
        <div style={{ display: "grid", gridTemplateColumns: gridCols, gap: gridGap }} className="two-col">
          <div>
            <Caps>The night you don't want</Caps>
            <div className="serif-i" style={{ fontSize: "clamp(36px, 4.5vw, 56px)", lineHeight: 1.02, marginTop: 24 }}>
              A walked guest is a phone call you wish you didn't have to make.
            </div>
          </div>
          <div style={{ paddingTop: 12 }}>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--ink)", margin: "0 0 24px" }}>
              Oversold by three rooms at 11pm. The duty manager starts calling partners.
              First hotel doesn't answer. Second is also sold out. Third offers a rate $200 higher
              than what you can paper. The lobby is filling.
            </p>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--muted)", margin: 0 }}>
              Hotel Walks turns the next 45 minutes into 6.
              One request, broadcast to ranked partners, on your terms.
              Acceptance, confirmation number, letter — done before the guest reaches the desk.
            </p>
          </div>
        </div>

        {/* Before / after timelines — same grid template so the columns line up with the headline row above. */}
        <div style={{ marginTop: 88, display: "grid", gridTemplateColumns: gridCols, gap: gridGap, alignItems: "start" }} className="two-col">
          <div style={{ borderTop: "1px solid var(--ink)", paddingTop: 22 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 28 }}>
              <Caps>Before · the phone tree</Caps>
              <Caps>45 min</Caps>
            </div>
            <IxTimeline color="var(--ink)" fullWidth />
          </div>
          <div style={{ borderTop: "1px solid var(--ink)", paddingTop: 22 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 28 }}>
              <Caps>After · Hotel Walks</Caps>
              <Caps>6 min</Caps>
            </div>
            <IxTimelineAfter fullWidth />
          </div>
        </div>
      </Section>
    );
  }

  // The "after" version — single broadcast, partners ping back, one accepts.
  function IxTimelineAfter({ fullWidth }) {
    return (
      <svg viewBox="0 0 460 120" width="100%" style={{ maxWidth: fullWidth ? "100%" : 460, display: "block" }}>
        {/* main timeline */}
        <line x1="20" y1="60" x2="440" y2="60" stroke="var(--ink)" strokeWidth="2" />
        <line x1="20" y1="50" x2="20" y2="70" stroke="var(--ink)" strokeWidth="2" />
        <line x1="440" y1="50" x2="440" y2="70" stroke="var(--ink)" strokeWidth="2" />
        <text x="20" y="40" fontSize="11" fontFamily="JetBrains Mono, monospace" fill="var(--ink)" letterSpacing="1.5">11:00 PM</text>
        <text x="440" y="40" fontSize="11" fontFamily="JetBrains Mono, monospace" fill="var(--ink)" letterSpacing="1.5" textAnchor="end">11:06 PM</text>

        {/* broadcast dot at start with concentric radiating arcs */}
        <circle cx="20" cy="60" r="5" fill="var(--ink)" />
        <circle cx="20" cy="60" r="12" fill="none" stroke="var(--ink)" strokeWidth="1" opacity="0.55" />
        <circle cx="20" cy="60" r="20" fill="none" stroke="var(--ink)" strokeWidth="1" opacity="0.28" />
        <text x="20" y="92" fontSize="10" fontFamily="JetBrains Mono, monospace" fill="var(--ink)" textAnchor="middle" letterSpacing="1.4">SEND</text>

        {/* partner pings — small ticks above the line */}
        {[110, 175, 240, 305].map((x, i) => (
          <g key={i}>
            <line x1={x} y1="54" x2={x} y2="66" stroke="var(--ink)" strokeWidth="1" opacity="0.55" />
          </g>
        ))}

        {/* accept at end */}
        <circle cx="380" cy="60" r="8" fill="var(--ink)" />
        <polyline points="375,60 379,64 386,55" fill="none" stroke="var(--bone)" strokeWidth="2" strokeLinecap="square" strokeLinejoin="round" />
        <text x="380" y="92" fontSize="10" fontFamily="JetBrains Mono, monospace" fill="var(--ink)" textAnchor="middle" letterSpacing="1.4">ACCEPT</text>
      </svg>
    );
  }

  function Features() {
    const items = [
      {
        eyebrow: "01 · Partner routing",
        title: "Send once. Route by preference or by rate.",
        body: "Rank your partners. Or let the platform broadcast to the best available rate first. Custom sub-markets for the comp set you actually use. A blacklist for the ones you don't.",
        Ix: IxRouting,
      },
      {
        eyebrow: "02 · Escalation",
        title: "Timers that move on without you.",
        body: "Set 30 minutes per partner. If the request goes unanswered, the opportunity moves to the next. Toggle Urgent and it blasts to every partner at once — for the nights when 10pm has already passed.",
        Ix: IxTimer,
      },
      {
        eyebrow: "03 · Walk letter",
        title: "The document, generated and watermarked.",
        body: "Three copies — guest, hotel, receiving property. A unique serial number. Reprints are watermarked DUPLICATE. The certificate cannot be redeemed twice.",
        Ix: IxLetter,
      },
      {
        eyebrow: "04 · Invoices & credits",
        title: "Settled monthly. No phone calls.",
        body: "$4 + 10% per side. No-show toggles only on the receiving line, where they belong. A credits ledger for goodwill, applied to open invoices as needed.",
        Ix: IxLedger,
      },
    ];
    return (
      <Section dark pad="120px 48px" style={{ marginTop: 0 }}>
        <div id="features" />
        <div style={{ marginBottom: 80, maxWidth: 700 }}>
          <Caps color="rgba(244,238,221,0.55)">How it works</Caps>
          <div className="serif-i" style={{ fontSize: "clamp(40px, 5vw, 68px)", lineHeight: 1, marginTop: 18, color: "var(--bone)" }}>
            Four parts. One quiet protocol.
          </div>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          borderTop: "1px solid rgba(244,238,221,0.18)",
          borderLeft: "1px solid rgba(244,238,221,0.18)",
        }} className="features-grid">
          {items.map((it, i) => (
            <article key={i} className="feature-card" style={{
              borderRight: "1px solid rgba(244,238,221,0.18)",
              borderBottom: "1px solid rgba(244,238,221,0.18)",
              padding: "44px 44px 48px",
              display: "grid",
              gridTemplateColumns: "160px 1fr",
              gap: 36,
              alignItems: "start",
            }}>
              <div style={{ color: "currentColor" }}>
                <it.Ix size={150} color="currentColor" bg="var(--hw-paper)" />
              </div>
              <div>
                <Caps className="feature-eyebrow" style={{ color: "currentColor", opacity: 0.6 }}>{it.eyebrow}</Caps>
                <div className="serif-i" style={{ fontSize: 30, lineHeight: 1.1, marginTop: 16, marginBottom: 18, color: "currentColor" }}>{it.title}</div>
                <p className="feature-body" style={{ fontSize: 16, lineHeight: 1.65, color: "currentColor", opacity: 0.78, margin: 0 }}>{it.body}</p>
              </div>
            </article>
          ))}
        </div>
      </Section>
    );
  }

  // A horizontal "walk flow" — connected timeline of the loop, on paper.
  function Flow() {
    const steps = [
      { t: "Request",   time: "T+0:00", d: "3 rooms tonight, $420 target.",       ic: "request"   },
      { t: "Broadcast", time: "T+0:01", d: "Sent to ranked partners in order.",   ic: "broadcast" },
      { t: "Accept",    time: "T+4:00", d: "Partner returns confirmation #.",     ic: "accept"    },
      { t: "Letter",    time: "T+5:30", d: "Three copies generated. Serialised.", ic: "letter"   },
      { t: "Settle",    time: "+30 d",  d: "Both sides invoiced. Done.",          ic: "settle"   },
    ];
    return (
      <Section pad="120px 48px" style={{ background: "var(--paper)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
        <div style={{ marginBottom: 72, display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)", gap: 64, alignItems: "center" }} className="two-col">
          <div>
            <Caps>The walk loop</Caps>
            <div className="serif-i" style={{ fontSize: "clamp(36px, 4.5vw, 56px)", lineHeight: 1, marginTop: 16, maxWidth: "16ch" }}>
              From oversold to settled — in five steps.
            </div>
          </div>
          <div>
            <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--ink)", margin: 0, maxWidth: "44ch" }}>
              The whole loop closes in under six minutes for a typical walk. Settlement is automatic at month-end — no calls, no chase.
            </p>
          </div>
        </div>

        <div className="flow-track" style={{
          position: "relative",
          display: "grid",
          gridTemplateColumns: "repeat(5, 1fr)",
          gap: 0,
        }}>
          {/* connector hairline through node centers — drops behind the discs */}
          <div aria-hidden="true" style={{
            position: "absolute",
            top: 60,           // matches the node-center offset (label height + half disc)
            left: "10%", right: "10%",
            height: 1,
            background: "var(--ink)",
            opacity: 0.22,
            zIndex: 0,
          }} />

          {steps.map((s, i) => (
            <div key={i} className="flow-step" style={{
              padding: "0 18px",
              display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center",
              position: "relative", zIndex: 1,
            }}>
              {/* timing label */}
              <div style={{ marginBottom: 14, minHeight: 14 }}>
                <span className="mono" style={{ fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)" }}>{s.time}</span>
              </div>

              {/* node disc with icon */}
              <div style={{
                width: 68, height: 68, borderRadius: 68,
                background: "var(--ink)", color: "var(--bone)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                boxShadow: "0 0 0 6px var(--paper)",  // crisp gap between node and connector
              }}>
                <FlowIcon kind={s.ic} size={32} color="var(--bone)" />
              </div>

              {/* number + title */}
              <div style={{ marginTop: 26, display: "flex", alignItems: "baseline", gap: 10, justifyContent: "center" }}>
                <span className="mono" style={{ fontSize: 13, color: "var(--muted)", letterSpacing: "0.14em" }}>0{i+1}</span>
                <span className="serif-i" style={{ fontSize: 30, lineHeight: 1 }}>{s.t}</span>
              </div>

              {/* body */}
              <p style={{
                marginTop: 14, marginBottom: 0,
                fontSize: 15, lineHeight: 1.6, color: "var(--muted)",
                maxWidth: "22ch",
              }}>{s.d}</p>
            </div>
          ))}
        </div>
      </Section>
    );
  }

  function Preview() {
    return (
      <Section dark pad="120px 48px">
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.8fr) minmax(0, 1.2fr)", gap: 64, alignItems: "center" }} className="two-col">
          <div>
            <Caps color="rgba(244,238,221,0.55)">Inside the app</Caps>
            <div className="serif-i" style={{ fontSize: "clamp(36px, 4.5vw, 56px)", lineHeight: 1.05, marginTop: 18, color: "var(--bone)" }}>
              What the front desk actually sees.
            </div>
            <p style={{ marginTop: 24, fontSize: 16, lineHeight: 1.65, color: "rgba(244,238,221,0.74)", maxWidth: "44ch" }}>
              One screen. The walks you've sent, the ones inbound, the timer counting down. No tabs to hunt through when 10pm hits and the lobby fills.
            </p>
            <div style={{ marginTop: 36 }}>
              <a href="#/app" style={{ textDecoration: "none" }}>
                <Btn kind="onInk" size="lg">Open the demo →</Btn>
              </a>
            </div>
          </div>

          <a href="#/app" style={{ textDecoration: "none", color: "inherit", display: "block" }}>
            <PreviewFrame />
          </a>
        </div>
      </Section>
    );
  }

  function PreviewFrame() {
    const rows = [
      { time: "3:42 pm", guest: "Maya Klein",     to: "1 Hotel Brooklyn Bridge", rate: "$645", status: "Letter sent",  tone: "filled" },
      { time: "4:08 pm", guest: "Daniel Park",    to: "The Hoxton, Williamsburg", rate: "$372", status: "Accepted",     tone: "good" },
      { time: "4:51 pm", guest: "Ifeoma Okonkwo", to: "— pending —",              rate: "—",    status: "Broadcasting", tone: "warn" },
    ];
    return (
      <div className="preview-frame" style={{
        background: "var(--paper)", color: "var(--ink)",
        boxShadow: "0 40px 100px rgba(0,0,0,0.55)",
        border: "1px solid rgba(244,238,221,0.18)",
        overflow: "hidden",
        position: "relative",
      }}>
        {/* fake top bar — bone like the real app */}
        <div style={{
          padding: "12px 18px",
          borderBottom: "1px solid var(--rule)",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          background: "var(--bone)",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <SmartKey size={22} />
            <span className="serif-i" style={{ fontSize: 15 }}>Hotel Walks</span>
          </div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)" }}>Wythe Hotel · AH</div>
        </div>

        {/* fake tab strip */}
        <div style={{
          padding: "0 14px", borderBottom: "1px solid var(--rule)",
          background: "var(--bone)",
          display: "flex", alignItems: "center", gap: 6,
        }}>
          {["Today","Send","Incoming","Letters","Invoices"].map((t, i) => (
            <span key={t} style={{
              padding: "12px 10px",
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10, letterSpacing: "0.10em", textTransform: "uppercase",
              color: "var(--ink)",
              opacity: i === 0 ? 1 : 0.6,
              fontWeight: i === 0 ? 500 : 400,
              borderBottom: i === 0 ? "2px solid var(--ink)" : "2px solid transparent",
              marginBottom: -1,
              display: "inline-flex", alignItems: "center", gap: 5,
            }}>
              {t}
              {i === 2 && (
                <span style={{
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  minWidth: 16, height: 16, padding: "0 4px",
                  background: "var(--ink)", color: "var(--bone)",
                  fontSize: 9, fontWeight: 500,
                }}>3</span>
              )}
            </span>
          ))}
        </div>

        {/* page head */}
        <div style={{ padding: "22px 22px 18px", borderBottom: "1px solid var(--rule)" }}>
          <span className="caps">Friday · May 22</span>
          <div className="serif-i" style={{ fontSize: 28, lineHeight: 1, marginTop: 8 }}>Today at Wythe Hotel.</div>
          <div className="mono" style={{ marginTop: 12, fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>
            <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: 6, background: "var(--good)", marginRight: 8, transform: "translateY(-1px)" }} />
            Walked 3 · 1 inbound · all timers green
          </div>
        </div>

        {/* stat strip — trimmed to 2 */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: "1px solid var(--rule)" }}>
          <div style={{ padding: "18px 22px", borderRight: "1px solid var(--rule)" }}>
            <span className="caps">Walks open</span>
            <div className="serif-i" style={{ fontSize: 30, lineHeight: 1, marginTop: 8 }}>3</div>
          </div>
          <div style={{ padding: "18px 22px" }}>
            <span className="caps">Next escalation</span>
            <div className="serif-i" style={{ fontSize: 30, lineHeight: 1, marginTop: 8 }}>12m</div>
          </div>
        </div>

        {/* table */}
        <div style={{ padding: "20px 22px 26px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
            <span className="caps">In flight</span>
            <span className="caps">3 walks</span>
          </div>
          <div style={{ borderTop: "1px solid var(--ink)" }}>
            {rows.map((r, i) => (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: "62px 1fr 1.2fr 56px 92px",
                padding: "12px 0", gap: 10,
                borderBottom: i < rows.length - 1 ? "1px solid var(--rule)" : "none",
                alignItems: "center",
              }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>{r.time}</span>
                <span style={{ fontSize: 12, fontWeight: 500 }}>{r.guest}</span>
                <span style={{ fontSize: 12 }}>{r.to}</span>
                <span className="mono" style={{ fontSize: 11, textAlign: "right" }}>{r.rate}</span>
                <span style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 8, letterSpacing: "0.12em", textTransform: "uppercase",
                  padding: "4px 6px",
                  background: r.tone === "filled" ? "var(--ink)" : "transparent",
                  color: r.tone === "filled" ? "var(--bone)" : (r.tone === "good" ? "var(--good)" : "var(--warn)"),
                  border: "1px solid " + (r.tone === "good" ? "var(--good)" : r.tone === "warn" ? "var(--warn)" : "var(--ink)"),
                  textAlign: "center",
                }}>{r.status}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  function Pricing() {
    const included = [
      "Walk letter generation · serialised, watermarked DUPLICATE on reprint",
      "Partner routing · preference or best-rate strategies",
      "Escalation timers · auto-handoff between partners",
      "Urgent mode · simultaneous broadcast for late-night oversells",
      "Invoice generation · monthly settlement, both sides",
      "Credits portal · platform-managed goodwill ledger",
      "Guest cancellation page · standardised verbiage",
      "No-show flag · receiving-side only, waives commission",
    ];
    return (
      <Section pad="120px 48px">
        <div id="pricing" />
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.85fr) minmax(0, 1.15fr)", gap: 72 }} className="two-col">
          {/* LEFT — headline + price tag + audience tiers */}
          <div>
            <Caps>Pricing</Caps>
            <div className="serif-i" style={{ fontSize: "clamp(36px, 4.2vw, 54px)", lineHeight: 1, marginTop: 18 }}>
              Per walk.<br/>Per side.
            </div>
            <p style={{ marginTop: 24, fontSize: 16, lineHeight: 1.6, color: "var(--muted)", maxWidth: "38ch" }}>
              No seats. No contracts. Beta properties in Brooklyn and South Florida ride free through Q3.
            </p>

            {/* Price tag */}
            <div style={{
              marginTop: 48,
              padding: "32px 28px",
              border: "1px solid var(--ink)",
              position: "relative",
              maxWidth: 360,
            }}>
              <span aria-hidden="true" style={{
                position: "absolute", top: -6, left: 22,
                width: 12, height: 12, borderRadius: 12,
                background: "var(--bone)", border: "1px solid var(--ink)",
              }} />
              <Caps>One walk · one side</Caps>
              <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginTop: 16 }}>
                <span className="serif-i" style={{ fontSize: 72, lineHeight: 1 }}>$4</span>
                <span className="serif-i" style={{ fontSize: 30, lineHeight: 1 }}>+ 10%</span>
              </div>
              <div style={{ height: 1, background: "var(--rule)", margin: "20px 0" }} />
              <Caps>Same fee, both sides of the walk</Caps>
            </div>

          </div>

          {/* RIGHT — what's included */}
          <div>
            <Caps>What's included</Caps>
            <div className="serif-i" style={{ fontSize: "clamp(28px, 3.2vw, 40px)", lineHeight: 1.05, marginTop: 14, maxWidth: "22ch" }}>
              The whole protocol, in the price.
            </div>
            <ul style={{
              listStyle: "none", padding: 0,
              margin: "32px 0 0",
              borderTop: "1px solid var(--ink)",
            }}>
              {included.map((line, i) => (
                <li key={i} style={{
                  display: "flex", alignItems: "baseline", gap: 16,
                  padding: "18px 0",
                  borderBottom: "1px solid var(--rule)",
                }}>
                  <span aria-hidden="true" style={{
                    flexShrink: 0,
                    width: 18, height: 18, marginTop: 2,
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    background: "var(--ink)", color: "var(--bone)",
                  }}>
                    <svg viewBox="0 0 12 12" width="11" height="11" fill="none" stroke="var(--bone)" strokeWidth="1.6">
                      <polyline points="2,6.5 5,9 10,3" strokeLinecap="square" strokeLinejoin="round" />
                    </svg>
                  </span>
                  <span style={{ fontSize: 16, lineHeight: 1.55, color: "var(--ink)" }}>{line}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Section>
    );
  }

  function Markets() {
    return (
      <Section dark pad="110px 48px">
        <div id="markets" />
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.8fr) minmax(0, 1.2fr)", gap: 80 }} className="two-col">
          <div>
            <Caps color="rgba(244,238,221,0.55)">Beta markets</Caps>
            <div className="serif-i" style={{ fontSize: "clamp(36px, 4.5vw, 56px)", lineHeight: 1, marginTop: 18, color: "var(--bone)" }}>
              Open in two cities — by invitation.
            </div>
            <p style={{ marginTop: 28, fontSize: 16, lineHeight: 1.6, color: "rgba(244,238,221,0.7)", maxWidth: "42ch" }}>
              Convention hotels, urban centers, properties near major airports.
              The kind of inventory that gets oversold on a Thursday and needs help by Friday morning.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
            <MarketCard city="Brooklyn, NY" sub="14 properties · live" hotels={["Wythe Hotel","1 Hotel Brooklyn Bridge","The William Vale","Ace Hotel Brooklyn","The Hoxton, Williamsburg","The Penny Williamsburg","The Tillary"]} />
            <MarketCard city="South Florida" sub="11 properties · live" hotels={["Eden Roc Miami Beach","Fontainebleau","The Setai","Faena","Mandarin Oriental","1 Hotel South Beach","Delano South Beach"]} />
          </div>
        </div>
      </Section>
    );
  }

  function MarketCard({ city, sub, hotels }) {
    return (
      <div style={{ borderTop: "1px solid rgba(244,238,221,0.28)", paddingTop: 24 }}>
        <div className="serif-i" style={{ fontSize: 24, marginBottom: 4, color: "var(--bone)" }}>{city}</div>
        <Caps color="rgba(244,238,221,0.55)">{sub}</Caps>
        <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0" }}>
          {hotels.map((h, i) => (
            <li key={i} style={{
              padding: "14px 0",
              borderBottom: "1px solid rgba(244,238,221,0.14)",
              fontSize: 16, color: "rgba(244,238,221,0.9)",
              letterSpacing: "-0.005em",
            }}>{h}</li>
          ))}
        </ul>
      </div>
    );
  }

  function Quote() {
    return (
      <Section pad="120px 48px">
        <div style={{ maxWidth: 920, margin: "0 auto", textAlign: "center" }}>
          <Caps>From the front desk</Caps>
          <div className="serif-i" style={{ fontSize: "clamp(32px, 4vw, 48px)", lineHeight: 1.18, marginTop: 32, marginBottom: 36 }}>
            "On a sold-out Friday, we used to triage walks for the entire shift.
            Now the receiving hotel confirms before the guest finishes their second drink."
          </div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 14 }}>
            <div style={{ width: 36, height: 1, background: "var(--ink)" }} />
            <Caps>Front office manager · Williamsburg</Caps>
          </div>
        </div>
      </Section>
    );
  }

  function CTA() {
    return (
      <Section dark pad="120px 48px">
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto", gap: 48, alignItems: "center" }} className="cta-grid">
          <div>
            <Caps color="rgba(244,238,221,0.55)">Beta · invitation only</Caps>
            <div className="serif-i" style={{ fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 1, marginTop: 18, color: "var(--bone)" }}>
              Bring the next oversold night<br/>under control.
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, minWidth: 240 }}>
            <a href="#/app" style={{ textDecoration: "none" }}><Btn kind="onInk" size="lg" full>Open the demo</Btn></a>
            <a href="mailto:hello@hotelwalks.co" style={{ textDecoration: "none" }}><Btn kind="onInkGhost" size="lg" full>Email the founders</Btn></a>
          </div>
        </div>
      </Section>
    );
  }

  function Footer() {
    return (
      <footer style={{ background: "var(--ink)", color: "rgba(244,238,221,0.6)", padding: "48px 48px 60px", borderTop: "1px solid rgba(244,238,221,0.18)" }}>
        <div style={{ maxWidth: 1240, margin: "0 auto", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
          <Lockup size={18} dark tagline="front-desk handoff" />
          <div style={{ display: "flex", gap: 24 }}>
            <Caps color="rgba(244,238,221,0.55)">© 2026 Hotel Walks</Caps>
            <Caps color="rgba(244,238,221,0.55)">Brooklyn · Miami</Caps>
            <Caps color="rgba(244,238,221,0.55)">Beta v0.4</Caps>
          </div>
        </div>
      </footer>
    );
  }

  const responsiveCSS = `
    @media (max-width: 1000px) {
      .hero-grid { grid-template-columns: 1fr !important; gap: 60px !important; }
      .hero-visual { min-height: 460px !important; max-width: 460px; margin: 0 auto; }
      .two-col { grid-template-columns: 1fr !important; gap: 36px !important; }
      .flow-track { grid-template-columns: 1fr 1fr !important; row-gap: 56px !important; }
      .flow-track > [aria-hidden] { display: none !important; }
      .cta-grid { grid-template-columns: 1fr !important; }
      .features-grid { grid-template-columns: 1fr !important; }
      .feature-card { grid-template-columns: 120px 1fr !important; gap: 24px !important; padding: 32px !important; }
    }
    @media (max-width: 720px) {
      .mkt-links { display: none !important; }
      .mkt-hamburger { display: inline-flex !important; }
      .mkt-drawer { display: block !important; }
      .mkt-topbar { padding: 12px 20px 24px !important; }
      .hero-grid { padding: 16px 24px 64px !important; gap: 40px !important; }
      .hero-headline { font-size: clamp(40px, 11vw, 64px) !important; }
      .hero-sub { font-size: 17px !important; margin-bottom: 32px !important; }
      .hero-visual { min-height: 380px !important; max-width: 340px !important; }
      .hero-stat-strip > div { grid-template-columns: 1fr !important; }
      .hero-stat-strip .hero-stat-cell { border-right: none !important; border-bottom: 1px solid var(--rule); flex-direction: row !important; padding: 16px 20px !important; }
      .hero-stat-strip .hero-stat-cell:last-child { border-bottom: none; }
      .hero-stat-strip .hero-stat-cell .serif-i { font-size: 26px !important; }
      .hero-ctas a { flex: 1; }
      .hero-ctas a > * { width: 100%; }
      .flow-track { grid-template-columns: 1fr 1fr !important; row-gap: 56px !important; }
      .flow-track > div:last-child:nth-child(odd) { grid-column: span 2; }
      section { padding: 64px 24px !important; }
    }
    @media (max-width: 640px) {
      .feature-card { grid-template-columns: 1fr !important; padding: 28px !important; }
      .flow-grid { grid-template-columns: 1fr !important; }
    }
  `;

  function LiveTicker() {
    // A thin marquee-style strip — gives the page life without breaking the calm.
    const items = [
      ["00:14", "Wythe", "1 Hotel Brooklyn Bridge", "$645", "accepted"],
      ["00:09", "Ace Brooklyn", "The Hoxton, Williamsburg", "$385", "accepted"],
      ["00:22", "Fontainebleau", "Eden Roc Miami Beach", "$540", "letter sent"],
      ["00:06", "The William Vale", "The Penny Williamsburg", "$410", "accepted"],
      ["00:18", "Faena", "The Setai", "$890", "letter sent"],
      ["00:11", "1 Hotel South Beach", "Delano South Beach", "$520", "accepted"],
    ];
    // Duplicate the items so the marquee can loop seamlessly.
    const row = [...items, ...items];
    return (
      <div style={{
        background: "var(--paper)", color: "var(--ink)",
        borderBottom: "1px solid var(--rule)",
        overflow: "hidden",
        position: "relative",
      }}>
        <style>{`
          @keyframes hw-marquee {
            from { transform: translateX(0); }
            to   { transform: translateX(-50%); }
          }
          .hw-marquee-track {
            display: inline-flex;
            gap: 0;
            white-space: nowrap;
            animation: hw-marquee 64s linear infinite;
          }
          .hw-marquee-track > * { flex: 0 0 auto; }
          @media (prefers-reduced-motion: reduce) {
            .hw-marquee-track { animation: none; }
          }
        `}</style>

        <div style={{ position: "relative", padding: "18px 0" }}>
          <div className="hw-marquee-track">
            {row.map((it, i) => (
              <span key={i} style={{
                display: "inline-flex", alignItems: "baseline", gap: 14,
                padding: "0 28px",
                borderRight: "1px solid var(--rule)",
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 13, letterSpacing: "0.08em",
                color: "var(--ink)",
              }}>
                <span style={{ color: "var(--muted)" }}>{it[0]}</span>
                <span>{it[1]}</span>
                <span style={{ color: "var(--muted)" }}>→</span>
                <span>{it[2]}</span>
                <span style={{ color: "var(--muted)" }}>·</span>
                <span>{it[3]}</span>
                <span style={{ color: "var(--good)", textTransform: "uppercase", letterSpacing: "0.16em" }}>{it[4]}</span>
              </span>
            ))}
          </div>
          {/* fade edges */}
          <div style={{
            pointerEvents: "none",
            position: "absolute", top: 0, bottom: 0, left: 0, width: 80,
            background: "linear-gradient(to right, var(--paper), transparent)",
          }} />
          <div style={{
            pointerEvents: "none",
            position: "absolute", top: 0, bottom: 0, right: 0, width: 80,
            background: "linear-gradient(to left, var(--paper), transparent)",
          }} />
        </div>
      </div>
    );
  }

  function HeroStatStrip() {
    const stats = [
      { label: "Avg time to re-house",     value: "6 min" },
      { label: "Partner acceptance",       value: "78%" },
      { label: "Letters generated · ytd",  value: "11,420" },
    ];
    return (
      <div style={{
        background: "var(--bone)", color: "var(--ink)",
        borderBottom: "1px solid var(--rule)",
      }} className="hero-stat-strip">
        <div style={{
          maxWidth: 1240, margin: "0 auto",
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
        }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              padding: "26px 32px",
              borderRight: i < stats.length - 1 ? "1px solid var(--rule)" : undefined,
              display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16,
            }} className="hero-stat-cell">
              <Caps>{s.label}</Caps>
              <div className="serif-i" style={{ fontSize: 34, lineHeight: 1 }}>{s.value}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  function Marketing() {
    return (
      <div>
        <style>{responsiveCSS}</style>
        <Hero />
        <LiveTicker />
        <HeroStatStrip />
        <Problem />
        <Features />
        <Flow />
        <Preview />
        <Pricing />
        <Markets />
        <Quote />
        <CTA />
        <Footer />
      </div>
    );
  }

  window.Screens = window.Screens || {};
  window.Screens.Marketing = Marketing;
})();
