/* v2 — AxiomPOS landing page (hero + sections + pricing + FAQ + CTA), light SaaS theme */

// ── Helpers ─────────────────────────────────────────────────────
// Build a link into the POS app's self-service signup page.
// The POS app reads the `plan` query param to pre-select the tier.
// URL comes from AxiomConfig.POS_APP_URL (v2/config.jsx).
function posSignupUrl(plan) {
  const base = (window.AxiomConfig && window.AxiomConfig.POS_APP_URL) || '';
  return `${base}/signup${plan ? `?plan=${encodeURIComponent(plan)}` : ''}`;
}

// ── Hero + tablet mockup ────────────────────────────────────────
function PosMockup() {
  return (
    <div className="tablet">
      <div className="tablet-screen">
        <div className="absolute top-0 inset-x-0 h-10 px-3 flex items-center justify-between z-10 bg-gradient-to-b from-black/45 to-transparent text-white">
          <div className="flex items-center gap-2">
            <span className="w-6 h-6 rounded-md inline-flex items-center justify-center text-white text-[10px] font-semibold" style={{ background: 'var(--brand)' }} aria-hidden="true">M</span>
            <div className="leading-tight">
              <div className="text-[11px] font-semibold tracking-tight">My Kota Place</div>
              <div className="text-[9px] text-white/70">Pretoria · Hatfield</div>
            </div>
          </div>
          <div className="flex items-center gap-2 text-[10px] text-white/80">
            <span className="inline-flex items-center gap-1">
              <span className="relative inline-flex w-1.5 h-1.5">
                <span className="absolute inset-0 rounded-full bg-emerald-400" />
                <span className="absolute inset-0 rounded-full bg-emerald-400 pulse-dot" />
              </span>
              Live
            </span>
            <span className="font-mono">14:32</span>
          </div>
        </div>

        <video
          ref={(el) => { if (el) { el.muted = true; el.defaultMuted = true; el.volume = 0; } }}
          src="/media/hero-ambient.mp4" autoPlay loop muted playsInline disableRemotePlayback preload="metadata"
          aria-hidden="true" className="absolute inset-0 w-full h-full object-contain"
        />
      </div>

      {/* Floating WhatsApp callout */}
      <div className="hidden sm:flex card-plain absolute -left-4 md:-left-8 -bottom-6 flex-col gap-1.5 px-3 py-2.5 w-[190px]" style={{ boxShadow: 'var(--shadow-md)' }}>
        <div className="flex items-center gap-1.5">
          <span className="inline-flex items-center justify-center w-5 h-5 rounded-full" style={{ background: 'var(--wa)' }}>
            <Ax.WhatsApp className="w-3 h-3 text-white" strokeWidth={2}/>
          </span>
          <span className="text-[11px] font-semibold text-[color:var(--ink)]">New WhatsApp order</span>
        </div>
        <div className="px-2 py-1.5 rounded-md text-[10px] text-[color:var(--ink-700)] leading-snug" style={{ background: 'var(--bg-alt)', border: '1px solid var(--line)' }}>
          "1 big boss, 1 chips, 1 coke"
        </div>
        <div className="flex items-center justify-between gap-1 text-[10px] mt-0.5">
          <span className="inline-flex items-center gap-1 font-semibold text-emerald-600">
            <Ax.Check className="w-3 h-3" strokeWidth={2.5}/>
            Routed to till
          </span>
          <span className="font-mono text-[color:var(--ink-500)]">14:31</span>
        </div>
      </div>

      {/* Floating margin callout */}
      <div className="hidden sm:flex card-plain absolute -right-4 md:-right-8 -bottom-6 flex-col gap-1 px-3 py-2.5 w-[180px]" style={{ boxShadow: 'var(--shadow-md)' }}>
        <div className="flex items-center justify-between">
          <span className="text-[10px] uppercase tracking-wider text-[color:var(--ink-500)] font-semibold">Margin · today</span>
          <Ax.Activity className="w-3 h-3 text-[color:var(--ink-500)]"/>
        </div>
        <div className="flex items-baseline gap-2">
          <div className="font-mono text-[20px] font-semibold leading-none text-[color:var(--ink)]">
            62.4<span className="text-[12px] text-[color:var(--ink-500)]">%</span>
          </div>
          <div className="flex items-end gap-[2px] h-5">
            {[40, 60, 35, 78, 55, 92, 70].map((h, i) => (
              <span key={i} className="w-[3px] rounded-sm" style={{ height: `${h}%`, background: i === 6 ? 'var(--brand)' : 'var(--brand-200)' }} />
            ))}
          </div>
        </div>
        <div className="text-[10px] text-emerald-600 font-medium">↑ R 1,240 vs yesterday</div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section id="top" className="relative pt-16 sm:pt-24 pb-24 overflow-hidden">
      <div className="max-w-7xl mx-auto px-5 sm:px-8 grid lg:grid-cols-12 gap-10 lg:gap-14 items-center">
        <div className="lg:col-span-6">
          <Reveal variant="up">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[12px] font-medium text-[color:var(--ink-700)]" style={{ background: 'var(--brand-soft)', border: '1px solid var(--brand-200)' }}>
              <span className="inline-flex items-center justify-center w-4 h-4 rounded-full" style={{ background: 'var(--wa)' }}>
                <Ax.WhatsApp className="w-2.5 h-2.5 text-white" strokeWidth={2.5}/>
              </span>
              <span>New · 24/7 WhatsApp ordering bot</span>
            </div>
          </Reveal>
          <Reveal variant="up" delay={80}>
            <h1 className="mt-5 text-[40px] sm:text-[52px] lg:text-[64px] font-semibold tracking-[-0.02em] leading-[1.02] text-balance text-[color:var(--ink)]">
              The POS that runs <br className="hidden sm:block"/>
              your <span className="shiny-text">whole shop</span>.
            </h1>
          </Reveal>
          <Reveal variant="up" delay={160}>
            <p className="mt-6 text-[17px] sm:text-[18px] text-[color:var(--ink-700)] leading-[1.55] max-w-[560px] text-pretty">
              AxiomPOS is the cloud till for South African kotas, takeaways, and cafés. Sell at the counter, take orders on WhatsApp, track stock, and see your margins — all from any browser.
            </p>
          </Reveal>
          <Reveal variant="up" delay={240}>
            <div className="mt-8 flex flex-wrap items-center gap-3">
              <a href={posSignupUrl('starter')} className="btn-primary inline-flex items-center justify-center gap-1.5 rounded-full text-[15px] font-semibold px-5 py-3">
                Start free trial
                <Ax.ArrowRight className="w-4 h-4" />
              </a>
              <a href="#how" className="btn-ghost inline-flex items-center justify-center gap-1.5 rounded-full text-[15px] font-semibold px-5 py-3">
                See how it works
              </a>
            </div>
          </Reveal>
          <Reveal variant="up" delay={320}>
            <div className="mt-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-[13px] text-[color:var(--ink-700)]">
              <span className="inline-flex items-center gap-1.5"><Ax.Check className="w-4 h-4" style={{ color: 'var(--brand)' }} strokeWidth={2.5} />30-day free trial on Starter</span>
              <span className="inline-flex items-center gap-1.5"><Ax.Check className="w-4 h-4" style={{ color: 'var(--brand)' }} strokeWidth={2.5} />Setup in minutes</span>
              <span className="inline-flex items-center gap-1.5"><Ax.Check className="w-4 h-4" style={{ color: 'var(--brand)' }} strokeWidth={2.5} />Cancel anytime</span>
            </div>
          </Reveal>
        </div>

        <Reveal variant="scale" delay={180} className="lg:col-span-6 tablet-wrap">
          <PosMockup />
        </Reveal>
      </div>
    </section>
  );
}

// ── Trust strip ─────────────────────────────────────────────────
function TrustStrip() {
  const items = [
    { icon: Ax.MapPin,   label: 'Built for South African shops' },
    { icon: Ax.Rand,     label: 'ZAR pricing, ZAR receipts' },
    { icon: Ax.WhatsApp, label: 'WhatsApp-native ordering' },
    { icon: Ax.Cloud,    label: 'Cloud-based, works anywhere' },
  ];
  return (
    <section className="border-y border-[color:var(--line)]" style={{ background: 'var(--bg-alt)' }}>
      <div className="max-w-6xl mx-auto px-5 sm:px-8 py-6 grid grid-cols-2 md:grid-cols-4 gap-4">
        {items.map((it, i) => (
          <Reveal key={i} variant="up" delay={i * 70}>
            <div className="flex items-center gap-3 group">
              <span className="inline-flex items-center justify-center w-9 h-9 rounded-lg text-[color:var(--ink-700)] shrink-0 transition-colors group-hover:text-[color:var(--brand)]" style={{ background: 'white', border: '1px solid var(--line)' }}>
                <it.icon className="w-4 h-4" />
              </span>
              <div className="text-[13px] sm:text-[14px] font-medium text-[color:var(--ink)] leading-snug">{it.label}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ── Problem → Solution ─────────────────────────────────────────
function ChatMockup() {
  return (
    <div className="rounded-xl p-3 space-y-2" style={{ background: 'var(--bg-soft)' }}>
      <div className="max-w-[82%] rounded-xl rounded-tl-sm px-3 py-2 bg-white" style={{ border: '1px solid var(--line)' }}>
        <p className="text-[12px] text-[color:var(--ink)] leading-snug">Hi! Can I get 2 Big Boss kotas and a Coke please</p>
        <div className="text-right text-[10px] font-mono text-[color:var(--ink-400)] mt-1">19:42</div>
      </div>
      <div className="max-w-[86%] ml-auto rounded-xl rounded-tr-sm px-3 py-2" style={{ background: '#DCF8C6' }}>
        <p className="text-[12px] text-[color:var(--ink)] leading-snug">Order #A-0427 received — R148. Ready in ~15 min ✓</p>
        <div className="text-right text-[10px] font-mono text-[color:var(--ink-500)] mt-1">19:42</div>
      </div>
    </div>
  );
}

function InventoryMockup() {
  const stock = [
    { name: 'Polony',          val: '3.9 / 5 kg',  pct: 78, low: false },
    { name: 'Bread rolls',     val: '84 / 200',    pct: 42, low: false },
    { name: 'Russian sausage', val: '7 / 50',      pct: 14, low: true  },
    { name: 'Chips',           val: '17 / 20 kg',  pct: 85, low: false },
  ];
  return (
    <div className="rounded-xl p-4 space-y-3" style={{ background: 'var(--bg-soft)' }}>
      {stock.map((s) => (
        <div key={s.name}>
          <div className="flex items-center justify-between text-[11px] font-mono mb-1.5">
            <span className={s.low ? 'font-semibold' : 'text-[color:var(--ink-700)]'} style={s.low ? { color: '#DC2626' } : {}}>{s.name}</span>
            <span className={s.low ? 'font-semibold' : 'text-[color:var(--ink-500)]'} style={s.low ? { color: '#DC2626' } : {}}>{s.val}</span>
          </div>
          <div className="h-1.5 rounded-full" style={{ background: 'var(--line)' }}>
            <div className="h-full rounded-full" style={{ width: `${s.pct}%`, background: s.low ? '#DC2626' : 'var(--brand)' }} />
          </div>
        </div>
      ))}
    </div>
  );
}

function SellersMockup() {
  const sellers = [
    { name: 'Big Boss',  pct: 100, rev: 'R5,980' },
    { name: 'Half Kota', pct: 55,  rev: 'R2,240' },
    { name: 'Russian',   pct: 28,  rev: 'R960'   },
    { name: 'Chips',     pct: 42,  rev: 'R1,710' },
  ];
  return (
    <div className="rounded-xl p-4" style={{ background: 'var(--bg-soft)' }}>
      <div className="flex items-center justify-between mb-3">
        <span className="text-[10px] font-semibold uppercase tracking-wider text-[color:var(--ink-500)]">Top sellers · today</span>
        <span className="inline-flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wider" style={{ color: 'var(--brand)' }}>
          <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--brand)' }} />
          Live
        </span>
      </div>
      <div className="space-y-2.5">
        {sellers.map((s) => (
          <div key={s.name} className="grid grid-cols-[64px_1fr_auto] items-center gap-2.5">
            <span className="text-[11px] font-medium text-[color:var(--ink)]">{s.name}</span>
            <div className="h-2 rounded-full" style={{ background: 'var(--line)' }}>
              <div className="h-full rounded-full" style={{ width: `${s.pct}%`, background: 'var(--brand)' }} />
            </div>
            <span className="text-[11px] font-mono font-semibold text-[color:var(--ink)]">{s.rev}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ProblemSolution() {
  const cards = [
    {
      problem: 'Manual phone orders cost you tips, time and accuracy.',
      title: 'Let customers order on WhatsApp — 24/7, no staff needed.',
      mockup: <ChatMockup />,
    },
    {
      problem: "Lost inventory = lost margin you'll never see.",
      title: 'Stock auto-deducts on every sale — alerts when you’re running low.',
      mockup: <InventoryMockup />,
    },
    {
      problem: "Can't tell what's making money vs what's just busy.",
      title: 'Live dashboard ranks top sellers, margins and cash flow in real time.',
      mockup: <SellersMockup />,
    },
  ];
  return (
    <section className="py-24 sm:py-32">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <Reveal variant="up" className="text-center max-w-2xl mx-auto">
          <div className="inline-flex items-center gap-2 text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>
            <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--brand)' }} />
            Why shop owners switch
          </div>
          <h2 className="mt-4 text-[34px] sm:text-[48px] font-semibold tracking-[-0.02em] leading-[1.05] text-balance text-[color:var(--ink)]">
            You're losing money in the gaps between your tools.
          </h2>
          <p className="mt-5 text-[16px] sm:text-[17px] text-[color:var(--ink-700)] leading-relaxed text-pretty">
            A till here, a notebook there, WhatsApp screenshots in between. AxiomPOS closes the gaps.
          </p>
        </Reveal>

        <div className="mt-14 grid md:grid-cols-3 gap-5">
          {cards.map((c, i) => (
            <Reveal key={i} variant="up" delay={i * 100} className="card p-6 sm:p-7 card-hover flex flex-col">
              <div className="flex items-start gap-2.5">
                <span className="mt-0.5 inline-flex items-center justify-center w-5 h-5 rounded-full shrink-0" style={{ background: '#FEE2E2', color: '#DC2626' }}>
                  <Ax.Minus className="w-3 h-3" strokeWidth={3} />
                </span>
                <p className="text-[13px] text-[color:var(--ink-700)] leading-snug">{c.problem}</p>
              </div>
              <div className="my-5 border-t border-dashed border-[color:var(--line-strong)]" />
              <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight leading-[1.25] text-[color:var(--ink)]">
                {c.title}
              </h3>
              <div className="mt-5">{c.mockup}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Feature grid ───────────────────────────────────────────────
function FeatureCard({ icon: Icon, title, body, accent, badge, featured }) {
  return (
    <div className={"relative p-6 card-hover " + (featured ? "card-dark" : "card")}>
      {badge && (
        <span className="absolute top-4 right-4 inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider text-white" style={{ background: accent || 'var(--brand)' }}>
          {badge}
        </span>
      )}
      <span className="inline-flex items-center justify-center w-10 h-10 rounded-lg" style={{ background: 'var(--brand-soft)', color: 'var(--brand-hover)', border: '1px solid var(--brand-200)' }}>
        <Icon className="w-5 h-5" />
      </span>
      <h3 className="mt-5 text-[17px] font-semibold tracking-tight text-[color:var(--ink)]">{title}</h3>
      <p className="mt-2 text-[14px] leading-relaxed text-[color:var(--ink-700)]">{body}</p>
    </div>
  );
}

function FeatureGrid() {
  const features = [
    { icon: Ax.PosTouch, title: 'Touch-friendly Point of Sale', body: 'Tablet-first interface with big tap targets, configurable category tabs, live cart, and one-tap cash or card with auto change.' },
    { icon: Ax.Bot, title: 'Built-in WhatsApp ordering bot', body: '24/7 bot shows the menu, takes orders, sends confirmation, "being prepared", and "ready for collection" updates — plus a PDF receipt link.', featured: true, badge: 'Differentiator', accent: 'var(--wa)' },
    { icon: Ax.Receipt, title: 'Receipts in three formats', body: 'Thermal-print (80mm), download as PDF, or send via WhatsApp. Configure header, footer, address, phone, and tax registration.' },
    { icon: Ax.Boxes, title: 'Live inventory tracking', body: 'Stock auto-deducts as items sell, with low-stock alerts, waste tracking, purchase orders, suppliers, and a full audit trail.' },
    { icon: Ax.Scale, title: 'Recipes & margins', body: 'Link menu items to ingredient quantities. See cost-per-item and gross margin in real time, so you know what actually makes money.' },
    { icon: Ax.Chart, title: 'Manager dashboard', body: 'Live revenue, orders, average ticket, cash/card split, sales-over-time chart, top sellers, plus CSV export and VAT toggle.' },
    { icon: Ax.Users, title: 'Multi-user with PIN login', body: 'Tellers log in with a 4-digit PIN for speed at the till. Managers get full username/password access. Role-based throughout.' },
    { icon: Ax.Activity, title: 'Active orders board', body: 'Real-time queue of pending orders. Acknowledge to notify the customer; complete to send the "ready for collection" message and receipt.' },
    { icon: Ax.Wrench, title: 'Plug-and-play setup', body: 'Upload your logo, set shop name, address, phone, and tax preferences in a single Settings page. No technical knowledge needed.' },
    { icon: Ax.Shield, title: 'Cloud-hosted & secure', body: '99.9% uptime, single-tenant deployment per shop, automatic backups, and CSV export of everything you put in — no lock-in.' },
  ];
  return (
    <section id="features" className="py-24 sm:py-32" style={{ background: 'var(--bg-alt)' }}>
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <Reveal variant="up" className="max-w-2xl">
          <div className="text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>Everything in one place</div>
          <h2 className="mt-3 text-[32px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-balance text-[color:var(--ink)]">
            Ten features. <br className="hidden sm:block"/>One subscription.
          </h2>
          <p className="mt-5 text-[16px] sm:text-[17px] text-[color:var(--ink-700)] leading-relaxed max-w-xl">
            Built from the ground up for small shops that need more than a till — without paying enterprise prices for things they'll never use.
          </p>
        </Reveal>
        <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {features.map((f, i) => (
            <Reveal key={i} variant="up" delay={(i % 3) * 80}>
              <FeatureCard {...f} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── How it works ───────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    { n: '01', title: 'Sign up — your shop is provisioned automatically.', body: 'Enter your business details, add a card for the 30-day free trial, and your private deployment is ready before the kettle boils. Own database, own data, own URL.', meta: 'Under 5 minutes' },
    { n: '02', title: 'Configure branding & menu.', body: 'Upload your logo, set shop name, address, phone, tax preferences. Add menu items, categories, prices, and recipes via the Settings wizard.', meta: 'Same day' },
    { n: '03', title: 'Start taking orders today.', body: 'Tellers log in with a 4-digit PIN. Customers can order on WhatsApp immediately (Plus / AxiomOne). Receipts print, PDF, or WA — your choice.', meta: 'Go live' },
  ];
  return (
    <section id="how" className="py-24 sm:py-32">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <Reveal variant="up" className="max-w-2xl">
          <div className="text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>How it works</div>
          <h2 className="mt-3 text-[32px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-[color:var(--ink)]">
            From signup to first sale, <br className="hidden sm:block"/>same day.
          </h2>
        </Reveal>
        <div className="mt-12 grid md:grid-cols-3 gap-5">
          {steps.map((s, i) => (
            <Reveal key={s.n} variant="up" delay={i * 120} className="relative card p-7 card-hover">
              <div className="flex items-center gap-3">
                <span className="inline-flex items-center justify-center w-9 h-9 rounded-full text-white text-[13px] font-semibold font-mono" style={{ background: 'var(--brand)' }}>{s.n}</span>
                <span className="text-[11px] font-semibold uppercase tracking-wider text-[color:var(--ink-500)]">{s.meta}</span>
              </div>
              <h3 className="mt-5 text-[20px] font-semibold tracking-tight leading-snug text-[color:var(--ink)]">{s.title}</h3>
              <p className="mt-2 text-[14px] text-[color:var(--ink-700)] leading-relaxed">{s.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Pricing ────────────────────────────────────────────────────
/* PriceCard
   - `href`       — where the CTA links to (default `#demo`)
   - `cta`        — button label
   - `popular`    — applies dark-card treatment + "Most popular" ribbon
   - `disabled`   — renders the CTA as a non-clickable button (e.g. "Coming soon")
   - `trialNote`  — small line under the CTA clarifying trial availability
*/
function PriceCard({ tier, price, suffix, desc, features, popular, cta, href, disabled, trialNote }) {
  const ctaClasses = "mt-6 inline-flex items-center justify-center gap-1.5 rounded-full font-semibold text-[14px] px-5 py-3 " + (popular ? "btn-primary" : "btn-ghost");
  return (
    <div className={"relative p-7 sm:p-8 flex flex-col h-full card-hover " + (popular ? "card-dark" : "card")}>
      {popular && (
        <span className="absolute -top-3 left-1/2 -translate-x-1/2 inline-flex items-center gap-1 px-3 py-1 rounded-full text-[11px] font-semibold uppercase tracking-wider text-white" style={{ background: 'var(--brand)' }}>
          <Ax.Star className="w-3 h-3" strokeWidth={2.4} />
          Most popular
        </span>
      )}
      <div className="text-[13px] font-semibold uppercase tracking-wider" style={{ color: popular ? 'var(--brand)' : 'var(--ink-500)' }}>{tier}</div>
      <div className="mt-3 flex items-baseline gap-1.5">
        <span className="text-[40px] sm:text-[48px] font-semibold tracking-tight leading-none font-mono text-[color:var(--ink)]">{price}</span>
        <span className="text-[14px] text-[color:var(--ink-500)]">{suffix}</span>
      </div>
      <p className="mt-3 text-[14px] leading-relaxed min-h-[3em] text-[color:var(--ink-700)]">{desc}</p>

      {disabled ? (
        <button type="button" disabled aria-disabled="true" className={ctaClasses + " opacity-60 cursor-not-allowed"}>
          {cta}
        </button>
      ) : (
        <a href={href || '#demo'} className={ctaClasses}>
          {cta}
          <Ax.ArrowRight className="w-4 h-4" />
        </a>
      )}

      {trialNote && (
        <div className="mt-2.5 text-[12px] text-[color:var(--ink-500)] text-center leading-snug">
          {trialNote}
        </div>
      )}

      <div className="mt-auto pt-7 border-t border-[color:var(--line)]">
        <ul className="space-y-3">
          {features.map((f, i) => (
            <li key={i} className="flex items-start gap-2.5 text-[14px] leading-relaxed">
              <span className="inline-flex items-center justify-center w-5 h-5 rounded-full shrink-0 mt-0.5" style={{ background: 'var(--brand-soft)', border: '1px solid var(--brand-200)' }}>
                <Ax.Check className="w-3 h-3" strokeWidth={3} style={{ color: 'var(--brand-hover)' }}/>
              </span>
              <span className="text-[color:var(--ink-700)]">
                {f.bold && <strong className="font-semibold text-[color:var(--ink)]">{f.bold} </strong>}
                {f.text}
              </span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function Pricing() {
  return (
    <section id="pricing" className="py-24 sm:py-32" style={{ background: 'var(--bg-alt)' }}>
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <Reveal variant="up" className="text-center max-w-2xl mx-auto">
          <div className="text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>Pricing</div>
          <h2 className="mt-3 text-[32px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-[color:var(--ink)]">
            Simple ZAR pricing. <br className="hidden sm:block"/>Month-to-month.
          </h2>
          <p className="mt-5 text-[16px] sm:text-[17px] text-[color:var(--ink-700)] leading-relaxed">
            No setup fee, no lock-in contract, free onboarding, support included on every tier.
          </p>
        </Reveal>

        <div className="mt-14 grid md:grid-cols-3 gap-5 items-stretch">
          <Reveal variant="up" delay={0} className="h-full">
            <PriceCard tier="AxiomPOS Starter" price="R299" suffix="/ month" cta="Start free trial"
              href={posSignupUrl('starter')}
              trialNote="30-day free trial · card required · cancel anytime"
              desc="The full POS for a single shop — unlimited orders and menu items, on any browser."
              features={[
                { text: 'Full point-of-sale, any browser' },
                { text: 'Unlimited orders & menu items' },
                { text: 'Live inventory & recipes' },
                { text: 'Manager dashboard with CSV export' },
                { text: 'Multi-user with PIN login' },
                { text: 'Print + PDF receipts' },
              ]} />
          </Reveal>
          <Reveal variant="up" delay={120} className="h-full">
            <PriceCard tier="AxiomPOS Plus" price="R599" suffix="/ month" cta="Coming soon" disabled
              trialNote="No free trial · production signup launching soon"
              desc="Everything in Starter, plus the WhatsApp ordering bot and WhatsApp receipts."
              features={[
                { bold: 'Everything in Starter, plus:', text: '' },
                { bold: '5,000', text: 'inbound + outbound WA messages / month' },
                { text: 'WhatsApp ordering bot with menu, confirmations & status updates' },
                { text: 'WhatsApp receipt delivery with one-tap link' },
                { text: 'Active orders board with acknowledge / complete' },
              ]} />
          </Reveal>
          <Reveal variant="up" delay={240} className="h-full">
            <PriceCard tier="AxiomOne" price="R1,099" suffix="/ month" cta="Talk to sales" popular
              href="#demo"
              trialNote="No free trial · book a consultation with our team"
              desc="The full bundle. Everything in Plus, unlimited WhatsApp, plus a managed shop website."
              features={[
                { bold: 'Everything in Plus, plus:', text: '' },
                { bold: 'Unlimited', text: 'WhatsApp messages, no caps' },
                { bold: 'Managed marketing website', text: 'for your shop — built and hosted by us' },
                { text: 'Priority onboarding & support' },
                { text: 'Custom receipt branding consult' },
              ]} />
          </Reveal>
        </div>

        <div className="mt-10 text-center text-[13px] text-[color:var(--ink-500)] flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
          <span className="inline-flex items-center gap-1.5"><Ax.Check className="w-4 h-4" style={{ color: 'var(--brand)' }} strokeWidth={2.5}/>No setup fee</span>
          <span className="inline-flex items-center gap-1.5"><Ax.Check className="w-4 h-4" style={{ color: 'var(--brand)' }} strokeWidth={2.5}/>Cancel anytime</span>
          <span className="inline-flex items-center gap-1.5"><Ax.Check className="w-4 h-4" style={{ color: 'var(--brand)' }} strokeWidth={2.5}/>Free onboarding</span>
          <span className="inline-flex items-center gap-1.5"><Ax.Check className="w-4 h-4" style={{ color: 'var(--brand)' }} strokeWidth={2.5}/>Support included</span>
        </div>
      </div>
    </section>
  );
}

// ── Plan comparison table ──────────────────────────────────────
function PlanComparison() {
  const rows = [
    { feature: 'Full POS, unlimited orders/items',       starter: true,  plus: true,  one: true  },
    { feature: 'Live inventory & recipes',                starter: true,  plus: true,  one: true  },
    { feature: 'Manager dashboard + CSV export',          starter: true,  plus: true,  one: true  },
    { feature: 'Multi-user PIN login',                    starter: true,  plus: true,  one: true  },
    { feature: 'Print + PDF receipts',                    starter: true,  plus: true,  one: true  },
    { feature: 'WhatsApp ordering bot + receipts',        starter: false, plus: '5,000 msg/mo', one: 'Unlimited' },
    { feature: 'Active orders board',                     starter: false, plus: true,  one: true  },
    { feature: 'Managed marketing website',               starter: false, plus: false, one: 'Managed, sales-tier' },
    { feature: 'Priority onboarding / branding consult',  starter: false, plus: false, one: true  },
  ];

  function Check() {
    return (
      <span className="inline-flex items-center justify-center w-6 h-6 rounded-full" style={{ background: 'var(--brand-soft)', border: '1px solid var(--brand-200)' }}>
        <Ax.Check className="w-3.5 h-3.5" strokeWidth={2.5} style={{ color: 'var(--brand-hover)' }} />
      </span>
    );
  }
  function Cross() {
    return (
      <span className="inline-flex items-center justify-center w-6 h-6 rounded-full text-[12px] font-bold" style={{ background: '#FEF2F2', border: '1px solid #FECACA', color: '#DC2626' }}>
        ✕
      </span>
    );
  }
  function Cell({ val, dark }) {
    const textCls = "text-[12px] font-semibold " + (dark ? "text-white/90" : "text-[color:var(--ink-700)]");
    if (val === true)  return <Check />;
    if (val === false) return <Cross />;
    return <span className={textCls}>{val}</span>;
  }

  const darkCol = { background: 'rgba(0,0,0,0.45)' };
  const darkColLight = { background: 'rgba(0,0,0,0.25)' };

  return (
    <section className="py-16 sm:py-20" style={{ background: 'var(--bg-alt)' }}>
      <div className="max-w-5xl mx-auto px-5 sm:px-8">
        <Reveal variant="up" className="text-center max-w-xl mx-auto mb-10">
          <div className="text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>Compare plans</div>
          <h2 className="mt-3 text-[28px] sm:text-[36px] font-semibold tracking-[-0.02em] text-[color:var(--ink)]">
            What's in each tier?
          </h2>
          <p className="mt-3 text-[15px] text-[color:var(--ink-700)] leading-relaxed">
            Every plan includes free onboarding, ZAR billing, and no setup fee.
          </p>
        </Reveal>

        <Reveal variant="up" delay={80}>
          <div className="overflow-x-auto rounded-2xl shadow-sm" style={{ border: '1px solid var(--line)' }}>
            <table className="w-full min-w-[540px] border-collapse">
              <thead>
                <tr>
                  <th className="text-left px-5 py-4 text-[12px] font-semibold uppercase tracking-wide text-[color:var(--ink-500)] bg-white" style={{ width: '44%', borderBottom: '1px solid var(--line)' }}>Feature</th>
                  <th className="px-4 py-4 text-center bg-white" style={{ borderBottom: '1px solid var(--line)' }}>
                    <div className="text-[13px] font-semibold text-[color:var(--ink)]">Starter</div>
                    <div className="mt-0.5 font-mono text-[12px] font-bold" style={{ color: 'var(--brand)' }}>R299/mo</div>
                  </th>
                  <th className="px-4 py-4 text-center bg-white" style={{ borderBottom: '1px solid var(--line)' }}>
                    <div className="text-[13px] font-semibold text-[color:var(--ink)]">Plus</div>
                    <div className="mt-0.5 font-mono text-[12px] font-bold" style={{ color: 'var(--brand)' }}>R599/mo</div>
                  </th>
                  <th className="px-4 py-4 text-center rounded-tr-2xl" style={{ background: 'var(--ink)', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
                    <div className="inline-flex items-center gap-1 mb-1 px-2 py-0.5 rounded-full text-[9px] font-semibold uppercase tracking-wider text-white" style={{ background: 'var(--brand)' }}>
                      <Ax.Star className="w-2.5 h-2.5" strokeWidth={2.5}/> Most popular
                    </div>
                    <div className="text-[13px] font-semibold text-white">AxiomOne</div>
                    <div className="mt-0.5 font-mono text-[12px] font-bold" style={{ color: 'var(--brand)' }}>R1,099/mo</div>
                  </th>
                </tr>
              </thead>
              <tbody>
                {rows.map((row, i) => {
                  const isLast = i === rows.length - 1;
                  const rowBg = i % 2 === 0 ? 'white' : 'var(--bg-alt)';
                  const border = isLast ? '' : '1px solid var(--line)';
                  return (
                    <tr key={i}>
                      <td className="px-5 py-3.5 text-[13px] font-medium text-[color:var(--ink)]" style={{ background: rowBg, borderBottom: border }}>{row.feature}</td>
                      <td className="px-4 py-3.5 text-center" style={{ background: rowBg, borderBottom: border }}><Cell val={row.starter} /></td>
                      <td className="px-4 py-3.5 text-center" style={{ background: rowBg, borderBottom: border }}><Cell val={row.plus} /></td>
                      <td className="px-4 py-3.5 text-center" style={{ background: i % 2 === 0 ? 'rgba(17,24,39,0.88)' : 'rgba(17,24,39,0.80)', borderBottom: isLast ? '' : '1px solid rgba(255,255,255,0.08)' }}>
                        <Cell val={row.one} dark />
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          <p className="mt-5 text-center text-[12px] text-[color:var(--ink-500)]">
            All prices in ZAR, billed monthly · <a href={posSignupUrl('starter')} className="font-semibold underline underline-offset-4" style={{ color: 'var(--brand-hover)' }}>Start free trial</a> on Starter · <a href="#demo" className="font-semibold underline underline-offset-4" style={{ color: 'var(--brand-hover)' }}>Talk to sales</a> for AxiomOne
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ── FAQ ────────────────────────────────────────────────────────
function FAQ() {
  const faqs = [
    { q: 'Do I need to buy a special till or hardware?', a: "No. AxiomPOS runs in any modern browser, so any tablet, phone, or laptop you already have will work. If you want a thermal printer for paper receipts, we can recommend an 80mm model — but it's optional. PDF and WhatsApp receipts work without any hardware.", defaultOpen: true },
    { q: 'Can I use this on my phone, or do I need a tablet?', a: "Both work. The till is designed tablet-first for speed at the counter, but the same interface scales down to a phone for owners checking on the shop from anywhere. The manager dashboard is fully responsive too." },
    { q: 'How do customers order on WhatsApp?', a: "On Plus and AxiomOne you get a WhatsApp number. Customers message it any time — 24/7. The bot shows your menu, accepts orders typed in plain language (\"1 big boss, 1 chips, 1 coke\" or even just numbers), confirms the order, and drops it directly into your till's order queue. You acknowledge it on the Active Orders board." },
    { q: 'What if my internet goes down?', a: "AxiomPOS is a cloud product, so an active connection is needed to ring up sales. We're working on a short offline buffer for outages. In the meantime, most South African shops we work with use a backup LTE router or a phone hotspot as a fallback — and we'll help you set that up during onboarding." },
    { q: 'Can I cancel anytime?', a: "Yes. Every tier is month-to-month with no lock-in contract. If you cancel, you can export every order, customer record, and stock movement to CSV — your data is yours, always." },
    { q: 'Do you support card payments?', a: "AxiomPOS records cash and card sales and auto-calculates change. We don't process card payments ourselves — you keep using your existing card machine (Yoco, iKhokha, SnapScan, Zapper, your bank's terminal) and tap \"Card\" on the till once it approves." },
    { q: 'How long does setup take?', a: "Provisioning your private shop deployment takes under five minutes. Configuring your branding, menu, and initial stock usually takes the same morning — and we'll walk you through it on a free onboarding call. Most shops go live the same day they sign up." },
  ];
  return (
    <section id="faq" className="py-24 sm:py-32">
      <div className="max-w-3xl mx-auto px-5 sm:px-8">
        <Reveal variant="up" className="text-center">
          <div className="text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>FAQ</div>
          <h2 className="mt-3 text-[32px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-[color:var(--ink)]">
            Questions, answered straight.
          </h2>
        </Reveal>
        <Reveal variant="up" delay={100} className="mt-12 border-t border-[color:var(--line)]">
          {faqs.map((f, i) => <FaqItem key={i} {...f} />)}
        </Reveal>
        <div className="mt-10 text-center text-[14px] text-[color:var(--ink-500)]">
          Still have questions?{' '}
          <a href="#demo" className="font-semibold underline underline-offset-4" style={{ color: 'var(--brand-hover)' }}>Book a demo</a>{' '}
          and we'll walk you through everything.
        </div>
      </div>
    </section>
  );
}

// ── Final CTA ──────────────────────────────────────────────────
// Note: self-service signup happens via the Hero + Starter pricing CTAs
// (which link to the POS app's /signup page). This block is the
// AxiomOne / guided-walkthrough path — for shops that want the full
// bundle, want Plus when it launches, or want a human walkthrough first.
function CtaBlock() {
  return (
    <section id="demo" className="py-20 sm:py-28">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
       <div className="relative rounded-3xl p-8 sm:p-12 overflow-hidden" style={{ background: 'linear-gradient(135deg, #D97706 0%, #B45309 100%)', boxShadow: '0 24px 60px rgba(217,119,6,0.30)' }}>
        <div className="absolute inset-0 pointer-events-none" aria-hidden="true" style={{ background: 'radial-gradient(60% 60% at 100% 0%, rgba(255,255,255,0.20), transparent 60%), radial-gradient(50% 50% at 0% 100%, rgba(0,0,0,0.18), transparent 60%)' }} />
        <div className="relative grid lg:grid-cols-12 gap-12 items-start">
        <Reveal variant="left" className="lg:col-span-5">
          <div className="text-[12px] font-semibold uppercase tracking-widest text-white/80">Talk to sales</div>
          <h2 className="mt-3 text-[34px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-balance text-white">
            Want AxiomOne or a guided walkthrough?
          </h2>
          <p className="mt-5 text-[16px] sm:text-[17px] text-white/85 leading-relaxed max-w-md">
            Ready for Starter? <a href={posSignupUrl('starter')} className="underline underline-offset-4 font-semibold text-white hover:text-white/90">Start the free trial</a> — you'll be live in minutes. Want the AxiomOne bundle, the upcoming Plus tier, or a human walkthrough first? Leave your details and we'll be in touch within one business day.
          </p>
          <ContactDetails dark />
        </Reveal>

        <Reveal variant="right" delay={120} className="lg:col-span-7">
          <div className="card p-6 sm:p-8">
            <ContactForm
              source="pos"
              submitLabel="Talk to sales"
              extraField={{
                key: 'interest',
                label: 'What are you interested in?',
                type: 'select',
                defaultValue: 'AxiomOne — the full bundle',
                options: [
                  'AxiomOne — the full bundle',
                  'AxiomPOS Plus — notify me when it launches',
                  'Guided walkthrough before I sign up for Starter',
                  'Something else',
                ],
              }}
              messageLabel="Tell us about your shop (optional)"
              messagePlaceholder="One branch, takeaway focus, 4 tellers, currently using a notebook + WhatsApp."
              successBody={() => `We'll be in touch within one business day to set up a call.`}
            />
          </div>
        </Reveal>
        </div>
       </div>
      </div>
    </section>
  );
}

// ── App ────────────────────────────────────────────────────────
function App() {
  return (
    <>
      <PageBackground />
      <div>
        <Navbar wordmarkSuffix="POS" ctaLabel="Start free trial" ctaHref={posSignupUrl('starter')} />
        <main>
          <Hero />
          <TrustStrip />
          <ProblemSolution />
          <FeatureGrid />
          <HowItWorks />
          <Pricing />
          <PlanComparison />
          <FAQ />
          <AxiomOneCallout />
          <CtaBlock />
        </main>
        <Footer />
      </div>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);