/* Beekon — main app */
const { useState, useEffect, useRef, useMemo } = React;

const PRESETS = [
  { id: "saver",     label: "Saver",     dist: 150, interval: 60, battery: "3–8%",   batPct: 16, desc: "Light background tracking. Best for always-on apps where the user isn’t actively moving." },
  { id: "balanced",  label: "Balanced",  dist: 100, interval: 30, battery: "5–10%",  batPct: 36, desc: "The everyday default. Accurate enough for trips and check-ins, gentle on battery.", isDefault: true },
  { id: "precision", label: "Precision", dist: 30,  interval: 10, battery: "15–25%", batPct: 76, desc: "Live tracking while the app is open. Use for navigation, recording rides or routes." }
];

const PLATFORMS = [
  { id: "android", icon: "Android", name: "Android",      art: "Kotlin library · Android 7 and up",     status: "stable",  ver: "Available now" },
  { id: "ios",     icon: "Apple",   name: "iOS",          art: "Swift library · iOS 15 and up",         status: "soon",    ver: "Coming next" },
  { id: "flutter", icon: "Flutter", name: "Flutter",      art: "Dart plugin · wraps both natives",       status: "soon",    ver: "In progress" },
  { id: "rn",      icon: "RN",      name: "React Native", art: "TypeScript module · wraps both natives", status: "future",  ver: "On the roadmap" }
];

const LICENSES = [
  { id: "android", icon: "Android", name: "Android",      platform: "Kotlin library",      price: 299, feats: ["One production app", "Background tracking + history", "All v1 updates included"] },
  { id: "ios",     icon: "Apple",   name: "iOS",          platform: "Swift library",       price: 299, feats: ["One production app", "Background tracking + history", "All v1 updates included"] },
  { id: "flutter", icon: "Flutter", name: "Flutter",      platform: "Dart plugin",         price: 499, feats: ["One production app", "Both natives in one plugin", "All v1 updates included"] },
  { id: "rn",      icon: "RN",      name: "React Native", platform: "TypeScript module",   price: 499, feats: ["One production app", "Both natives in one module", "All v1 updates included"] }
];

const FAQS = [
  { q: "What does a license cover?", a: "One production app per platform, unlimited builds, every update within the same major version, and email support. If you need to ship more than one app, or want to redistribute the SDK, talk to us about Enterprise." },
  { q: "Why separate libraries for iOS and Android instead of one shared core?", a: "Because location is an operating-system feature, not a math problem. Each platform has its own background rules, permission model, and battery behaviour — and getting them right means writing native code, not wrapping a shared C library and hoping. Both libraries follow the same written contract, so behaviour stays consistent across platforms." },
  { q: "Does it keep tracking when the app is in the background or has been closed?", a: "Yes. On Android we use a foreground service so the system keeps us alive even under battery-saver and aggressive OEM behaviour. On iOS we use the platform’s background location mode plus the system wake-up that fires when the user moves a meaningful distance — the same approach Apple’s own apps use." },
  { q: "Where is location data stored?", a: "On the device, in a local database that ships inside the SDK. Nothing is sent to our servers — we don’t run any. Your app reads history when it needs to. By default we keep the last seven days; older points are pruned automatically." },
  { q: "Do you smooth or filter the location signal?", a: "No. The phone’s own location service already does that work, and it has access to sensors and GPS we don’t. We pass its output through to your app, applying only the distance and interval rules you configure. What the OS sees is what you get." },
  { q: "Can I try it before buying?", a: "Yes. The development build is fully functional and free to use — it just prints a small notice in your logs. A paid license removes the notice and lets you ship to production." }
];

/* ---------- Honeycomb mark ---------- */
const Honeycomb = ({ size = 26 }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
    <defs>
      <linearGradient id="hcA" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stopColor="oklch(82% 0.13 75)"/>
        <stop offset="1" stopColor="oklch(72% 0.16 65)"/>
      </linearGradient>
      <linearGradient id="hcB" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stopColor="oklch(78% 0.15 60)"/>
        <stop offset="1" stopColor="oklch(68% 0.18 50)"/>
      </linearGradient>
    </defs>
    {/* top */}
    <polygon points="32,2 48,11 48,29 32,38 16,29 16,11" fill="url(#hcA)"/>
    {/* bottom-left */}
    <polygon points="16,29 32,38 32,56 16,65 0,56 0,38" fill="url(#hcA)" opacity="0.95"/>
    {/* bottom-right */}
    <polygon points="48,29 64,38 64,56 48,65 32,56 32,38" fill="url(#hcB)"/>
    {/* inset hexes */}
    <polygon points="32,10 42,16 42,28 32,34 22,28 22,16" fill="oklch(86% 0.10 78)" opacity="0.6"/>
    <polygon points="16,37 26,43 26,55 16,61 6,55 6,43" fill="oklch(82% 0.11 70)" opacity="0.6"/>
    <polygon points="48,37 58,43 58,55 48,61 38,55 38,43" fill="oklch(74% 0.15 55)" opacity="0.7"/>
  </svg>
);

/* ---------- Nav ---------- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-inner">
        <a href="#" className="brand">
          <Honeycomb size={26} />
          <span>Beekon</span>
        </a>
        <div className="nav-links">
          <a href="#platforms" className="nav-link">Platforms</a>
          <a href="#presets" className="nav-link">Presets</a>
          <a href="#why" className="nav-link">Why Beekon</a>
          <a href="#pricing" className="nav-link">Pricing</a>
          <a href="#faq" className="nav-link">FAQ</a>
          <a href="#" className="nav-link">Docs ↗</a>
        </div>
        <div className="nav-cta">
          <a href="#" className="btn btn-link tiny mono" style={{display: "none"}}>v0.1</a>
          <a href="https://console.beekon.wayq.in/" className="btn btn-ghost">Console ↗</a>
          <a href="#pricing" className="btn btn-ghost">Buy a license</a>
        </div>
      </div>
    </nav>
  );
}

/* ---------- Hero ---------- */
function Hero() {
  return (
    <section className="hero hero-solo">
      <div className="container">
        <div className="hero-meta">
          <span className="hero-meta-tag">v0.1</span>
          <span>Native location SDK · iOS & Android</span>
        </div>
        <h1 className="h1 hero-h1">
          Background location<br/>
          that actually <span className="accent">stays on</span>
        </h1>
        <p className="lede hero-lede">
          Beekon is a small, focused SDK for capturing where your users go — in the foreground, in the background, and after the app has been swiped away. It runs on the device, keeps a rolling history, and respects the battery. No servers to wire up. No surprises in production.
        </p>
        <div className="hero-cta">
          <a href="#pricing" className="btn btn-primary">
            Get a license <Icon.Arrow />
          </a>
          <a href="#" className="btn btn-ghost">
            <Icon.Github /> View the docs
          </a>
        </div>
        <div className="hero-stats hero-stats-solo">
          <div>
            <div className="stat-num">3</div>
            <div className="stat-label">battery presets — from light passive tracking to live foreground use</div>
          </div>
          <div>
            <div className="stat-num">7d</div>
            <div className="stat-label">of location history kept on the device, ready to read at any time</div>
          </div>
          <div>
            <div className="stat-num">4</div>
            <div className="stat-label">platforms covered: Android, iOS, Flutter, and React Native</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Live SDK event stream — what an integrator actually sees in their console */
function HeroVisual() {
  // Hex grid — axial coords, flat-top
  const cells = [];
  const cols = 5, rows = 7;
  const size = 46; // hex radius
  const w = size * 2;
  const h = Math.sqrt(3) * size;
  for (let r = 0; r < rows; r++) {
    for (let q = 0; q < cols; q++) {
      const x = q * (w * 0.75) + size + 8;
      const y = r * h + (q % 2 ? h / 2 : 0) + size * 0.4;
      cells.push({ q, r, x, y });
    }
  }
  // Pre-pick highlighted cells
  const featured = "2,3"; // big now-cell
  const accentSet = new Set(["0,1","1,2","3,1","4,4","1,5","3,5","0,4"]);
  const dimSet = new Set(["4,0","0,6","4,6","3,3"]);

  const hex = (cx, cy, s) => {
    const pts = [];
    for (let i = 0; i < 6; i++) {
      const a = (Math.PI / 3) * i;
      pts.push(`${cx + s * Math.cos(a)},${cy + s * Math.sin(a)}`);
    }
    return pts.join(" ");
  };

  return (
    <div className="hero-visual hex-hero">
      <svg className="hex-svg" viewBox="0 0 460 480" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="hexFeat" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="oklch(82% 0.13 75)"/>
            <stop offset="1" stopColor="oklch(70% 0.18 50)"/>
          </linearGradient>
          <linearGradient id="hexAcc" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="oklch(86% 0.10 78)" stopOpacity="0.55"/>
            <stop offset="1" stopColor="oklch(76% 0.14 60)" stopOpacity="0.35"/>
          </linearGradient>
        </defs>
        {cells.map(c => {
          const id = `${c.q},${c.r}`;
          const isFeat = id === featured;
          const isAcc = accentSet.has(id);
          const isDim = dimSet.has(id);
          if (isFeat) {
            return (
              <g key={id}>
                <polygon points={hex(c.x, c.y, size - 2)} fill="url(#hexFeat)"/>
                <polygon points={hex(c.x, c.y, size - 12)} fill="none" stroke="oklch(99% 0.005 80 / 0.5)" strokeWidth="1"/>
              </g>
            );
          }
          if (isAcc) return <polygon key={id} points={hex(c.x, c.y, size - 3)} fill="url(#hexAcc)"/>;
          if (isDim) return <polygon key={id} points={hex(c.x, c.y, size - 3)} fill="none" stroke="var(--line-strong)" strokeWidth="1" strokeDasharray="2 3"/>;
          return <polygon key={id} points={hex(c.x, c.y, size - 3)} fill="none" stroke="var(--line)" strokeWidth="1"/>;
        })}
        {/* pulsing ring on feature */}
        {(() => {
          const c = cells.find(c => `${c.q},${c.r}` === featured);
          return (
            <g>
              <polygon points={hex(c.x, c.y, size + 2)} fill="none" stroke="var(--honey)" strokeOpacity="0.4" strokeWidth="1">
                <animate attributeName="stroke-opacity" values="0.5;0.05;0.5" dur="2.4s" repeatCount="indefinite"/>
              </polygon>
            </g>
          );
        })()}
      </svg>

      {/* Top-left mark */}
      <div className="hex-tl">
        <div className="hex-tl-eyebrow">v0.1 · SDK</div>
        <div className="hex-tl-title">Beekon</div>
      </div>

      {/* Live readout pinned over the feature hex */}
      <div className="hex-now">
        <div className="hex-now-row"><span className="hex-now-dot"></span>Tracking</div>
        <div className="hex-now-coord">13.0827° N<br/>80.2707° E</div>
        <div className="hex-now-meta">±4.2m · 30s · fix #247</div>
      </div>

      {/* Bottom rail — four invariants as small captions */}
      <div className="hex-rail">
        <div><span className="rail-num">100m</span><span className="rail-lbl">distance gate</span></div>
        <div><span className="rail-num">30s</span><span className="rail-lbl">interval</span></div>
        <div><span className="rail-num">7d</span><span className="rail-lbl">on-device buffer</span></div>
        <div><span className="rail-num">5–10%</span><span className="rail-lbl">battery / hr</span></div>
      </div>
    </div>
  );
}

/* ---------- Logo strip ---------- */
function LogoStrip() {
  return (
    <div className="container">
      <div className="logo-strip">
        <div className="logo-strip-label">Built on the platforms you already trust</div>
        <div className="logo-row">
          <div className="logo-item"><Icon.Android size={20}/> FusedLocation</div>
          <div className="logo-item"><Icon.Apple size={20}/> CoreLocation</div>
          <div className="logo-item"><Icon.Flutter size={18}/> pub.dev</div>
          <div className="logo-item"><Icon.RN size={20}/> npm</div>
          <div className="logo-item">Maven Central</div>
          <div className="logo-item">SPM</div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Platform grid ---------- */
function PlatformGrid() {
  return (
    <section id="platforms">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">01 · Platforms</div>
            <h2 className="h2" style={{marginTop: 16}}>One SDK.<br/>Every platform you ship on.</h2>
          </div>
          <p className="lede">
            We build the Android and iOS libraries ourselves, in their native languages. Flutter and React Native get the same SDK through a thin language wrapper — same behaviour, same battery, same history. Pick whichever stack your team is on; we keep them in step.
          </p>
        </div>
        <div className="platform-grid">
          {PLATFORMS.map(p => {
            const I = Icon[p.icon];
            return (
              <div key={p.id} className="platform-card">
                <div className="platform-icon"><I size={20}/></div>
                <div className={`platform-status status-${p.status}`}>
                  {p.status === "stable" ? "Available" : p.status === "soon" ? "Coming soon" : "Roadmap"}
                </div>
                <div>
                  <div className="platform-name">{p.name}</div>
                  <div className="platform-art" style={{marginTop: 6}}>{p.art}</div>
                </div>
                <div className="platform-version">
                  <span>{p.ver}</span>
                  <span><Icon.Arrow size={12}/></span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------- Code samples ---------- */
function CodeSamples() {
  const [tab, setTab] = useState("kotlin");
  const [copied, setCopied] = useState(false);
  const sample = window.CODE_SAMPLES[tab];

  const copy = () => {
    const text = sample.lines.map(line => line.map(t => t[1] || "").join("")).join("\n");
    navigator.clipboard?.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 1200);
  };

  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">02 · Integration</div>
            <h2 className="h2" style={{marginTop: 16}}>Configure.<br/>Start. Listen.</h2>
          </div>
          <p className="lede">
            The shape of the API is the same on every platform: one config object, one start call, and a stream of locations to listen to. The naming follows whatever feels natural in your language — Kotlin Flow on Android, AsyncStream on iOS, Streams in Dart, event listeners in TypeScript. Nothing exotic to learn.
          </p>
        </div>
        <div className="code-block">
          <div className="code-tabs">
            {Object.entries(window.CODE_SAMPLES).map(([id, s]) => (
              <button
                key={id}
                className="code-tab"
                data-active={id === tab}
                onClick={() => setTab(id)}>
                <span>{s.label}</span>
                <span className="code-tab-badge">{s.sub.split(" · ")[0]}</span>
              </button>
            ))}
          </div>
          <div className="code-body">
            <pre>{sample.lines.map((line, i) => (
              <div key={i}>{line.length === 0 ? <>&nbsp;</> : line.map((tok, j) => (
                <span key={j} className={`tok-${ {k:"key",f:"fn",s:"str",n:"num",c:"com",t:"typ",p:"pun",v:""}[tok[0]] }`}>{tok[1]}</span>
              ))}</div>
            ))}</pre>
          </div>
          <div className="code-foot">
            <span>{sample.pkg} · {sample.file}</span>
            <button className="copy-btn" onClick={copy}>
              {copied ? <><Icon.Check/> copied</> : <><Icon.Copy/> copy</>}
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Battery presets ---------- */
function Presets() {
  const [active, setActive] = useState("balanced");
  const preset = PRESETS.find(p => p.id === active);
  return (
    <section id="presets">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">03 · Battery</div>
            <h2 className="h2" style={{marginTop: 16}}>Three presets.<br/>Honest battery numbers.</h2>
          </div>
          <p className="lede">
            Pick how often you need a fix and how far apart points should be — those are the only two knobs. The presets cover the common cases, and you can override either value when you need to. The battery numbers below are measured on real phones running real builds, not estimated.
          </p>
        </div>
        <div className="preset-stage">
          <div className="preset-list">
            {PRESETS.map(p => (
              <button key={p.id} className="preset-row" data-active={active === p.id} onClick={() => setActive(p.id)}>
                <span className="preset-radio"></span>
                <span>
                  <span className="preset-label">
                    {p.label}
                    {p.isDefault && <span className="preset-default">Default</span>}
                  </span>
                  <div className="preset-desc">{p.desc}</div>
                </span>
                <span className="preset-bat">{p.battery}</span>
              </button>
            ))}
          </div>
          <div className="preset-readout">
            <div className="readout-grid">
              <div className="readout-cell">
                <div className="readout-cell-label">Distance between fixes</div>
                <div className="readout-cell-value">{preset.dist}<span className="unit">m</span></div>
              </div>
              <div className="readout-cell">
                <div className="readout-cell-label">Update interval</div>
                <div className="readout-cell-value">{preset.interval}<span className="unit">s</span></div>
              </div>
              <div className="readout-cell">
                <div className="readout-cell-label">Battery / hour</div>
                <div className="readout-cell-value mono" style={{fontFamily: "var(--f-mono)", fontSize: 22}}>{preset.battery}</div>
              </div>
              <div className="readout-cell">
                <div className="readout-cell-label">Use case</div>
                <div style={{fontSize: 14, color: "var(--ink-2)", marginTop: 4, lineHeight: 1.45}}>{preset.desc.split(".")[0]}.</div>
              </div>
            </div>
            <div>
              <div style={{display: "flex", justifyContent: "space-between", marginBottom: 8, fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--ink-3)"}}>
                <span>Battery draw</span>
                <span>1h sustained</span>
              </div>
              <div className="bat-bar">
                <div className="bat-fill" style={{width: `${preset.batPct}%`}}></div>
              </div>
              <div className="bat-readout-row">
                <span>0%</span>
                <span style={{color: "var(--ink)"}}>{preset.battery} on Pixel 8 · iPhone 15 Pro</span>
                <span>30%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Why Beekon ---------- */
function WhyBeekon() {
  const items = [
    {
      n: "01",
      title: "Built natively. No shared core.",
      body: "Each platform gets a real native library, written in its own language. We don’t squeeze a shared C engine into both — location is too tied to the operating system for that to work well. Instead, the two libraries follow the same spec, behave the same way, and are tested side-by-side.",
      meta: ["Kotlin for Android", "Swift for iOS"]
    },
    {
      n: "02",
      title: "What the OS sees, you see.",
      body: "The phone’s own location service already does the heavy lifting — fusing GPS, Wi-Fi, sensors, and motion. We don’t second-guess it with our own filters or smoothing layers. You get accurate, faithful points, not numbers we’ve massaged in the middle.",
      meta: ["No mystery filtering", "Faithful to the source"]
    },
    {
      n: "03",
      title: "History stays on the device.",
      body: "Every point goes into a local database that lives inside the SDK. Nothing is sent to our servers, because we don’t run any. Your app reads history when it needs to — even when the user has been offline for days. We keep the last seven days by default, and prune older points automatically.",
      meta: ["Local storage", "Read history any time"]
    }
  ];
  return (
    <section id="why" style={{background: "var(--bg-sunk)"}}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">04 · What makes it different</div>
            <h2 className="h2" style={{marginTop: 16}}>Three things we<br/>refuse to compromise on.</h2>
          </div>
          <p className="lede">
            Most location SDKs cut a corner somewhere — a shared core that pretends to be native, a smoothing layer that hides what the phone actually saw, or a server you didn’t ask to depend on. Beekon doesn’t. These are the choices that make continuous tracking actually work in the wild.
          </p>
        </div>
        <div className="invariants">
          {items.map(it => (
            <div key={it.n} className="invariant">
              <div className="invariant-num">{it.n}</div>
              <div className="invariant-title">{it.title}</div>
              <div className="invariant-body">{it.body}</div>
              <div className="invariant-meta">
                <span>{it.meta[0]}</span>
                <span>{it.meta[1]}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Pricing ---------- */
function Pricing() {
  const [billing, setBilling] = useState("yearly"); // monthly | yearly
  const [selected, setSelected] = useState({ android: true, ios: true, flutter: false, rn: false });

  const items = LICENSES.filter(l => selected[l.id]);
  const subtotal = items.reduce((s, l) => s + l.price, 0);
  const bundleDiscount = items.length >= 3 ? Math.round(subtotal * 0.2) : items.length === 2 ? Math.round(subtotal * 0.1) : 0;
  const yearlyMul = billing === "yearly" ? 10 : 1; // pay 10× monthly for yearly
  const total = (subtotal - bundleDiscount) * yearlyMul;

  return (
    <section id="pricing" className="pricing-section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">05 · Pricing</div>
            <h2 className="h2" style={{marginTop: 16}}>License what<br/>you actually ship.</h2>
          </div>
          <p className="lede">
            Pay for the platforms you actually ship on. One license covers one app and unlimited builds, including every update we ship on the same major version. Bundle two or more and the price drops automatically.
          </p>
        </div>

        <div className="pricing-mode">
          <button className="pricing-mode-btn" data-active={billing === "monthly"} onClick={() => setBilling("monthly")}>Monthly</button>
          <button className="pricing-mode-btn" data-active={billing === "yearly"} onClick={() => setBilling("yearly")}>Yearly · save 17%</button>
        </div>

        <div className="license-grid">
          {LICENSES.map(l => {
            const I = Icon[l.icon];
            const isSel = selected[l.id];
            return (
              <button key={l.id} className="license-card" data-selected={isSel} onClick={() => setSelected({...selected, [l.id]: !isSel})}>
                <div className="license-head">
                  <div className="license-icon"><I size={18}/></div>
                  <div className="license-check">{isSel && <Icon.Check size={12}/>}</div>
                </div>
                <div>
                  <div className="license-name">{l.name}</div>
                  <div className="license-platform">{l.platform}</div>
                </div>
                <div className="license-price">
                  ${l.price}<span className="per"> /mo</span>
                </div>
                <ul className="license-feats">
                  {l.feats.map((f, i) => <li key={i}>{f}</li>)}
                </ul>
              </button>
            );
          })}
        </div>

        <div className="cart">
          <div className="cart-summary">
            {items.length === 0 ? (
              <span style={{color: "var(--ink-3)"}}>Select at least one platform to see your total.</span>
            ) : (
              <>
                <strong>{items.map(l => l.name).join(" + ")}</strong>
                <span style={{color: "var(--ink-3)"}}>
                  {" · "}{items.length} {items.length === 1 ? "license" : "licenses"}
                  {bundleDiscount > 0 && <> · bundle saves ${bundleDiscount}/mo</>}
                </span>
              </>
            )}
          </div>
          <div className="cart-total">
            ${total.toLocaleString()}<span className="per">/{billing === "yearly" ? "yr" : "mo"}</span>
          </div>
          <a href="#" className="btn btn-primary">
            Continue to checkout <Icon.Arrow/>
          </a>
        </div>

        <div className="tier-grid">
          <div className="tier-card">
            <div className="tier-head">
              <div className="tier-name">Indie</div>
            </div>
            <div className="tier-price">$299<span className="per"> /platform/mo</span></div>
            <ul className="tier-feats">
              <li>One production app per license</li>
              <li>Email support · 48h response</li>
              <li>All v1 updates included</li>
              <li>For teams under $1M annual revenue</li>
            </ul>
            <div className="tier-meta">For solo devs and small teams</div>
          </div>
          <div className="tier-card featured">
            <div className="tier-head">
              <div className="tier-name">Enterprise</div>
              <div className="tier-tag">Custom</div>
            </div>
            <div className="tier-price">Let's talk</div>
            <ul className="tier-feats">
              <li>Unlimited apps and bundle IDs</li>
              <li>Source escrow and security review</li>
              <li>Dedicated Slack · 4h response · NDA</li>
              <li>Custom test routes · roadmap input</li>
              <li>White-label and OEM redistribution</li>
            </ul>
            <div className="tier-meta">For OEMs, fleets, and platforms</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">06 · Questions</div>
            <h2 className="h2" style={{marginTop: 16}}>Asked, often.</h2>
          </div>
          <p className="lede">
            The questions we get most often — and a few you should ask before picking any location SDK.
            If something here doesn’t match what you need, the Enterprise tier is where we get into the details.
          </p>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div key={i} className="faq-item" data-open={open === i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-toggle"><Icon.Plus size={12}/></span>
              </button>
              <div className="faq-a"><div className="faq-a-inner">{f.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand-block">
            <div className="brand">
              <Honeycomb size={26}/>
              <span>Beekon</span>
            </div>
            <p className="body">
              Native location SDK for iOS and Android. Background-first. Battery-aware. History built in.
            </p>
            <p className="body" style={{marginTop: 12, fontSize: 13, color: "var(--ink-3)"}}>
              A product of <a href="https://wayq.in/" style={{color: "var(--ink)", textDecoration: "underline", textDecorationColor: "var(--line-strong)", textUnderlineOffset: 3}}>WayQ Technologies Pvt Ltd</a>.
            </p>
          </div>
          <div className="footer-col">
            <h5>Product</h5>
            <ul>
              <li><a href="#platforms">Platforms</a></li>
              <li><a href="#presets">Presets</a></li>
              <li><a href="#why">Architecture</a></li>
              <li><a href="#pricing">Pricing</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Developers</h5>
            <ul>
              <li><a href="#">Documentation</a></li>
              <li><a href="#">Android guide</a></li>
              <li><a href="#">iOS guide</a></li>
              <li><a href="#">Sample apps</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Company</h5>
            <ul>
              <li><a href="https://wayq.in/">WayQ Technologies</a></li>
              <li><a href="#">Contact sales</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="#">Press kit</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Legal</h5>
            <ul>
              <li><a href="#">Terms</a></li>
              <li><a href="#">Privacy</a></li>
              <li><a href="#">EULA</a></li>
              <li><a href="#">DPA</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 WayQ Technologies Pvt Ltd</span>
          <span>v0.1 · Updated May 2026</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Tweaks ---------- */
const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "honey",
  "density": "spacious",
  "hero_variant": "trace"
}/*EDITMODE-END*/;

function Tweaks() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULS);

  useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    document.documentElement.dataset.density = tweaks.density;
    const accents = {
      honey:  ["74% 0.16 65", "82% 0.13 75", "68% 0.18 50", "45% 0.14 55"],
      amber:  ["72% 0.18 50", "80% 0.15 60", "65% 0.20 35", "42% 0.16 45"],
      sunset: ["70% 0.19 35", "78% 0.16 50", "62% 0.22 22", "40% 0.18 30"]
    }[tweaks.accent];
    const r = document.documentElement.style;
    r.setProperty("--honey",     `oklch(${accents[0]})`);
    r.setProperty("--honey-2",   `oklch(${accents[1]})`);
    r.setProperty("--honey-3",   `oklch(${accents[2]})`);
    r.setProperty("--honey-ink", `oklch(${accents[3]})`);
  }, [tweaks]);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection title="Appearance">
        <window.TweakRadio label="Theme" value={tweaks.theme}
          options={[{value: "light", label: "Light"}, {value: "dark", label: "Dark"}]}
          onChange={v => setTweak("theme", v)}/>
        <window.TweakRadio label="Accent" value={tweaks.accent}
          options={[{value: "honey", label: "Honey"}, {value: "amber", label: "Amber"}, {value: "sunset", label: "Sunset"}]}
          onChange={v => setTweak("accent", v)}/>
        <window.TweakRadio label="Density" value={tweaks.density}
          options={[{value: "spacious", label: "Spacious"}, {value: "compact", label: "Compact"}]}
          onChange={v => setTweak("density", v)}/>
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

/* ---------- App root ---------- */
function App() {
  return (
    <>
      <Nav/>
      <Hero/>
      <LogoStrip/>
      <PlatformGrid/>
      <CodeSamples/>
      <Presets/>
      <WhyBeekon/>
      <Pricing/>
      <FAQ/>
      <Footer/>
      <Tweaks/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
