/* eslint-disable */
function Landing({ heroVariant: _heroVariant, featured, onCheckout }) {
  const faq = [
    { q: "Executor support?", a: "Works on the usual suspects. If it runs Luarmor loaders, you're fine." },
    { q: "Monthly vs lifetime?", a: "$10/mo auto-renews until you cancel. $25 is one shot, key sticks around." },
    { q: "Where do I pay?", a: "Stripe’s hosted checkout opens in your browser — card fields there are real, not this site." },
  ];

  return (
    <main id="top">
      <section className="section-tight" style={{ paddingTop: 32 }}>
        <div className="wrap">
          <p className="eyebrow">Roblox · automation</p>
          <h1 style={{ marginTop: 20, maxWidth: 920 }}>
            Less grind, more control.{" "}
            <span className="muted" style={{ fontWeight: 500 }}>
              For the people who’d rather execute than argue in #general.
            </span>
          </h1>
          <p className="muted" style={{ marginTop: 18, fontSize: 17, maxWidth: 640, lineHeight: 1.55 }}>
            Pay on Stripe, grab the key on the success page, paste it in your loader. Not glamorous copy — just how it works.
          </p>
          <div className="row" style={{ marginTop: 28, flexWrap: "wrap" }}>
            <button type="button" className="btn accent lg" onClick={() => onCheckout("monthly")}>
              Start monthly <Icon name="arrow-right" size={16} />
            </button>
            <button type="button" className="btn ghost lg" onClick={() => onCheckout("lifetime")}>
              Lifetime — $25
            </button>
          </div>
        </div>
      </section>

      <section className="section" id="pricing">
        <div className="wrap">
          <h2>Pricing</h2>
          <p className="muted" style={{ marginTop: 10, maxWidth: 56ch }}>Two options. Monthly if you like subscriptions, lifetime if you don’t want to think about it again.</p>
          <div className="grid-2" style={{ marginTop: 28 }}>
            <div className="card" style={featured === "monthly" ? { boxShadow: "var(--glow)" } : undefined}>
              <div className="spread">
                <span className="mono" style={{ fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase" }}>Monthly</span>
                {featured === "monthly" ? <span className="badge accent">Featured</span> : null}
              </div>
              <p style={{ fontSize: 36, fontWeight: 600, margin: "12px 0 0" }}>$10<span className="muted" style={{ fontSize: 18, fontWeight: 500 }}>/mo</span></p>
              <p className="muted" style={{ marginTop: 8 }}>Renews every month. Cancel when you want.</p>
              <button type="button" className="btn primary" style={{ marginTop: 20, width: "100%" }} onClick={() => onCheckout("monthly")}>
                Choose monthly
              </button>
            </div>
            <div className="card" style={featured === "lifetime" ? { boxShadow: "var(--glow)" } : undefined}>
              <div className="spread">
                <span className="mono" style={{ fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase" }}>Lifetime</span>
                {featured === "lifetime" ? <span className="badge accent">Featured</span> : null}
              </div>
              <p style={{ fontSize: 36, fontWeight: 600, margin: "12px 0 0" }}>$25<span className="muted" style={{ fontSize: 18, fontWeight: 500 }}> once</span></p>
              <p className="muted" style={{ marginTop: 8 }}>One payment. Key does not subscription-expire on our side.</p>
              <button type="button" className="btn accent" style={{ marginTop: 20, width: "100%" }} onClick={() => onCheckout("lifetime")}>
                Choose lifetime
              </button>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight" id="compatibility">
        <div className="wrap">
          <h2>Executors</h2>
          <p className="muted" style={{ marginTop: 10, maxWidth: 50ch }}>If Luarmor loads it, you’re probably fine. Swap these names for your real list when you’re ready.</p>
          <div className="grid-4" style={{ marginTop: 24 }}>
            {["Wave", "Synapse Z", "Sirhurt", "Volcano"].map((name) => (
              <div key={name} className="surface" style={{ padding: 16, textAlign: "center" }}>
                <Icon name="zap" size={20} />
                <div style={{ marginTop: 8, fontWeight: 600 }}>{name}</div>
                <span className="badge" style={{ marginTop: 6 }}>supported</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" id="faq">
        <div className="wrap" style={{ maxWidth: 720 }}>
          <h2>FAQ</h2>
          <div className="col" style={{ marginTop: 24, gap: 12 }}>
            {faq.map((item) => (
              <div key={item.q} className="card" style={{ padding: 20 }}>
                <h3 style={{ fontSize: 16 }}>{item.q}</h3>
                <p className="muted" style={{ margin: "8px 0 0", fontSize: 14 }}>{item.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

window.Landing = Landing;