/* global React, AX */
const { useState } = React;

/* ---- NAV ---- */
function PricingNav() {
  return (
    <header className="sticky top-0 z-50 border-b border-line"
      style={{ background:"rgba(10,10,10,0.92)", backdropFilter:"blur(18px)", WebkitBackdropFilter:"blur(18px)" }}>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 h-16 flex items-center justify-between gap-8">
        <div className="flex items-center gap-6">
          <a href="../" className="focusable flex items-center gap-1.5 text-[13px] text-sub hover:text-paper transition-colors">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M9 11L5 7L9 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Back
          </a>
          <span className="w-px h-4 bg-line"/>
          <AX.Wordmark markSize={20} fontSize={16} ls={4}/>
        </div>
        <AX.CTA primary href="mailto:contact@yellogem.com">Get early access</AX.CTA>
      </div>
    </header>
  );
}

/* ---- HERO ---- */
function PricingHero() {
  return (
    <section aria-labelledby="pricing-h1" className="relative pt-24 pb-20 lg:pt-32 lg:pb-24 overflow-hidden">
      <div className="absolute inset-0 pointer-events-none" aria-hidden="true">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] rounded-full blur-[140px]"
          style={{ background:"radial-gradient(ellipse,rgba(250,250,250,0.05),transparent 70%)" }}/>
      </div>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 relative text-center">
        <div className="reveal max-w-[680px] mx-auto">
          <AX.Eyebrow className="justify-center">Transparent pricing</AX.Eyebrow>
          <h1 id="pricing-h1" className="mt-6 font-bold tracking-[-0.04em] leading-[1.0]"
            style={{ fontSize:"clamp(44px,6.5vw,82px)" }}>
            Zero percent.<br className="hidden sm:block"/>No asterisk.
          </h1>
          <p className="mt-7 text-[18px] text-sub leading-relaxed max-w-[520px] mx-auto">
            Sell tickets. Keep everything. No per-ticket fee, no platform cut, no surprise charges at payout. That's the whole pricing model.
          </p>
        </div>
        <div className="reveal mt-10 flex flex-wrap justify-center gap-4" data-d="1">
          <AX.CTA primary href="mailto:contact@yellogem.com">Start for free</AX.CTA>
          <AX.CTA href="#comparison">See comparison</AX.CTA>
        </div>
      </div>
    </section>
  );
}

/* ---- PLAN CARD ---- */
function PricingPlan() {
  return (
    <section aria-labelledby="plan-h" className="relative py-16 lg:py-20">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal max-w-[680px] mx-auto">
          <div className="rounded-[2rem] p-10 lg:p-14 relative overflow-hidden"
            style={{ background:"linear-gradient(145deg,rgba(250,250,250,0.07),rgba(250,250,250,0.02))", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.22)" }}>
            <div className="absolute -top-16 -right-12 w-64 h-64 rounded-full blur-3xl pointer-events-none" aria-hidden="true"
              style={{ background:"radial-gradient(circle,rgba(250,250,250,0.08),transparent 70%)" }}/>
            <div className="relative">
              <div className="flex items-start justify-between flex-wrap gap-4">
                <div>
                  <span className="text-[12px] font-bold uppercase tracking-[0.16em] text-faint">Axxess for Venues</span>
                  <div className="mt-3 flex items-baseline gap-2">
                    <span className="text-[58px] lg:text-[72px] font-bold tracking-[-0.04em] leading-none">0%</span>
                    <span className="text-[18px] text-sub">per ticket</span>
                  </div>
                </div>
                <span className="text-[11px] font-bold px-3 py-1.5 rounded-full bg-paper text-ink">FREE DURING LAUNCH</span>
              </div>
              <p className="mt-6 text-[15.5px] text-sub leading-relaxed max-w-[480px]">
                All features included. No tiers, no add-ons, no usage-based charges. The platform is free; you keep 100% of ticket revenue.
              </p>
              <div className="mt-8 grid sm:grid-cols-2 gap-3">
                {[
                  "Unlimited ticket types","Table reservations","Scan app (any device)","Live analytics dashboard",
                  "Staff accounts","Multi-event management","Guest list & waitlist","Offline door mode",
                  "Fraud-proof validation","Payout in 3–5 days","24/7 event support","API access",
                ].map(item => (
                  <div key={item} className="flex items-center gap-2.5 text-[14px] text-sub">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                      <path d="M3 7.5l2.5 2.5 5.5-6" stroke="rgba(250,250,250,0.6)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                    {item}
                  </div>
                ))}
              </div>
              <div className="mt-10 flex flex-wrap gap-4">
                <AX.CTA primary href="mailto:contact@yellogem.com">Start for free</AX.CTA>
                <AX.CTA href="../venue/">Read venue overview</AX.CTA>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- COMPARISON ---- */
function PricingComparison() {
  const rows = [
    { feature:"Ticket commission", axxess:"0%", eventbrite:"8%", ra:"10%", dice:"10%" },
    { feature:"Booking fee to buyer", axxess:"None", eventbrite:"Up to 15%", ra:"10%", dice:"Varies" },
    { feature:"Payout time", axxess:"3–5 days", eventbrite:"5–7 days", ra:"30+ days", dice:"30+ days" },
    { feature:"Table reservations", axxess:"✓", eventbrite:"—", ra:"—", dice:"—" },
    { feature:"Offline scan mode", axxess:"✓", eventbrite:"—", ra:"—", dice:"—" },
    { feature:"Staff accounts", axxess:"✓", eventbrite:"Limited", ra:"Limited", dice:"Limited" },
    { feature:"Guest list tools", axxess:"✓", eventbrite:"Add-on", ra:"—", dice:"—" },
    { feature:"Live occupancy", axxess:"✓", eventbrite:"—", ra:"—", dice:"—" },
    { feature:"API access", axxess:"✓", eventbrite:"Paid plan", ra:"Paid plan", dice:"—" },
  ];

  const ColHead = ({ children, hi }) => (
    <th className="px-5 py-4 text-left text-[13px] font-bold" style={{ color: hi ? "#FAFAFA" : "rgba(250,250,250,0.45)" }}>{children}</th>
  );
  const Cell = ({ children, hi }) => (
    <td className="px-5 py-3.5 text-[13.5px]" style={{ color: hi ? "#FAFAFA" : "rgba(250,250,250,0.45)" }}>{children}</td>
  );

  return (
    <section id="comparison" aria-labelledby="comp-h" className="relative py-20 lg:py-28"
      style={{ background:"linear-gradient(180deg,transparent,rgba(250,250,250,0.02),transparent)" }}>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal max-w-[540px]">
          <AX.Eyebrow>Platform comparison</AX.Eyebrow>
          <h2 id="comp-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(28px,3.8vw,46px)" }}>
            What you're actually comparing.
          </h2>
          <p className="mt-4 text-[15px] text-sub leading-relaxed">Commission is only part of the story. Here's how the full feature set stacks up.</p>
        </div>

        <div className="reveal mt-10 overflow-x-auto rounded-[1.5rem]" data-d="1"
          style={{ background:"#0f0f12", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.08)" }}>
          <table className="w-full min-w-[600px] border-collapse">
            <thead>
              <tr className="border-b border-line">
                <th className="px-5 py-4 text-left text-[12px] font-bold uppercase tracking-[0.1em] text-faint w-52">Feature</th>
                <ColHead hi>Axxess</ColHead>
                <ColHead>Eventbrite</ColHead>
                <ColHead>Resident Advisor</ColHead>
                <ColHead>DICE</ColHead>
              </tr>
            </thead>
            <tbody>
              {rows.map(({ feature, axxess, eventbrite, ra, dice }, i) => (
                <tr key={feature} className="border-b border-line last:border-0"
                  style={{ background: i%2===0?"transparent":"rgba(250,250,250,0.015)" }}>
                  <td className="px-5 py-3.5 text-[13.5px] text-sub">{feature}</td>
                  <Cell hi>{axxess}</Cell>
                  <Cell>{eventbrite}</Cell>
                  <Cell>{ra}</Cell>
                  <Cell>{dice}</Cell>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

/* ---- FAQ ---- */
function PricingFAQ() {
  const [open, setOpen] = useState(null);
  const qs = [
    { q:"Is 0% really 0%? No catch?", a:"Yes. Axxess takes no cut of your ticket revenue. The platform is free through launch. Future revenue will come from premium operator services — the 0% ticketing model stays." },
    { q:"What happens after the launch period?", a:"The 0% ticketing commission is our core model, not a temporary promotion. We may introduce optional premium features (advanced analytics, white-labelling) at a flat monthly rate in the future — ticket sales stay free." },
    { q:"Who pays the processing fee?", a:"Payment processing is handled by our partner (Stripe). A small processing fee applies but it's covered on our end during launch. We'll communicate clearly before anything changes." },
    { q:"Is there a minimum ticket volume?", a:"No. Whether you run 1 event with 50 guests or 10 events with 2,000 guests, the pricing model is the same: 0% commission on tickets." },
    { q:"What about table reservation deposits?", a:"Reservation deposits are collected and held until the event. If a guest no-shows, you keep the deposit. Processing fees apply on deposits as they do on ticket transactions." },
    { q:"How fast do I get paid?", a:"Payouts are processed within 3–5 business days after your event. Faster payouts are on the roadmap for established venues." },
  ];
  return (
    <section aria-labelledby="pfaq-h" className="relative py-20 lg:py-24">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal max-w-[540px]">
          <AX.Eyebrow>Pricing FAQ</AX.Eyebrow>
          <h2 id="pfaq-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(28px,3.6vw,44px)" }}>
            Questions about the numbers.
          </h2>
        </div>
        <div className="mt-10 max-w-[760px] space-y-2">
          {qs.map(({ q, a },i) => (
            <div key={i} className="reveal rounded-2xl overflow-hidden" data-d={(i%2)+1}
              style={{ background:"rgba(255,255,255,0.025)", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.07)" }}>
              <button
                className="focusable w-full px-6 py-5 flex items-center justify-between gap-4 text-left"
                aria-expanded={open===i}
                onClick={() => setOpen(open===i?null:i)}>
                <span className="text-[15.5px] font-semibold">{q}</span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"
                  style={{ transform: open===i?"rotate(180deg)":"none", transition:"transform .25s", flexShrink:0 }}>
                  <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
              {open===i && (
                <div className="px-6 pb-5 text-[14.5px] text-sub leading-relaxed border-t border-line pt-4">{a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- CTA ---- */
function PricingCTA() {
  return (
    <section id="pricing-cta" aria-labelledby="pcta-h" className="relative pt-12 pb-24 lg:pt-16 lg:pb-32">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal rounded-[2.5rem] p-10 lg:p-16 relative overflow-hidden"
          style={{ background:"linear-gradient(140deg,rgba(250,250,250,0.07),rgba(250,250,250,0.02))", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.2)" }}>
          <div className="absolute -top-16 -right-16 w-72 h-72 rounded-full blur-3xl pointer-events-none" aria-hidden="true"
            style={{ background:"radial-gradient(circle,rgba(250,250,250,0.07),transparent 70%)" }}/>
          <div className="relative max-w-[560px]">
            <AX.Eyebrow>Get started</AX.Eyebrow>
            <h2 id="pcta-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(30px,4vw,52px)" }}>
              Start selling tickets at 0% today.
            </h2>
            <p className="mt-5 text-[16px] text-sub leading-relaxed">Free through launch. No credit card. Your first event live in under 30 minutes.</p>
            <div className="mt-9 flex flex-wrap gap-4">
              <AX.CTA primary href="mailto:contact@yellogem.com">Partner with us</AX.CTA>
              <AX.CTA href="../venue/">See full venue features</AX.CTA>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.AX = Object.assign(window.AX||{}, {
  PricingNav, PricingHero, PricingPlan, PricingComparison, PricingFAQ, PricingCTA,
});