/* Pricing page. */

function PricingHero({ bg = '#FFFFFF', accent = '#2563EB' }) {
  return (
    <section className="relative pt-32 lg:pt-40 pb-14 lg:pb-20 overflow-hidden" style={{ backgroundColor: bg }}>
      <div className="absolute inset-0 z-0" aria-hidden="true">
        <img
          src="assets/pricingBg.webp"
          alt=""
          className="w-full h-full object-cover object-top select-none"
          draggable="false"
        />
        <div
          className="absolute inset-0"
          style={{
            background: `linear-gradient(90deg, rgba(241,245,249,0.92) 0%, rgba(241,245,249,0.72) 55%, rgba(241,245,249,0.50) 100%)`,
          }}
        />
      </div>

      <div className="relative z-10 max-w-container mx-auto px-5 sm:px-8">
        <div className="max-w-[920px]">
          <p className="eyebrow reveal mb-5" style={{ color: accent }}>Pricing</p>
          <h1 className="h1 reveal" style={{ transitionDelay: '60ms' }}>
            Honest pricing. One annual figure. Unlimited everything.
          </h1>
          <p className="mt-7 body-lg text-[#05080f] max-w-[760px] reveal" style={{ transitionDelay: '120ms' }}>
            Most engagement platforms quote per-employee, per-month, with a call-us button for the real number. We publish ours. Pick the band that matches your headcount; that is what you pay.
          </p>
          <div className="mt-9 flex flex-col sm:flex-row gap-3 sm:gap-4 reveal" style={{ transitionDelay: '180ms' }}>
            <BtnPrimary href="Book a demo.html" accent>Let's Talk</BtnPrimary>
            <BtnSecondary href="index.html">Back to home</BtnSecondary>
          </div>
        </div>
      </div>
    </section>
  );
}

function PricingTable() {
  const rows = [
    ['1 to 49 employees', '£5,000'],
    ['50 to 99 employees', '£6,000'],
    ['100 to 199 employees', '£12,000'],
    ['200 to 499 employees', '£18,000'],
    ['500+ employees', 'Call for a quote'],
  ];
  return (
    <section className="pt-16 lg:pt-20 pb-20 lg:pb-24 bg-white">
      <div className="max-w-container mx-auto px-5 sm:px-8">
        <div className="reveal">
          <div className="rounded-xl border border-slate-200 bg-white overflow-hidden shadow-card">
            <table className="w-full text-left table-fixed">
              <caption className="sr-only">Annual price by headcount band</caption>
              <thead className="bg-slate-50">
                <tr>
                  <th scope="col" className="px-4 sm:px-6 py-4 text-[12px] sm:text-[13px] uppercase tracking-wider font-semibold text-slate-500 w-[58%]">Headcount</th>
                  <th scope="col" className="px-4 sm:px-6 py-4 text-[12px] sm:text-[13px] uppercase tracking-wider font-semibold text-slate-500 text-right w-[42%]">Annual price</th>
                </tr>
              </thead>
              <tbody>
                {rows.map(([k, v], i) => (
                  <tr key={k} className={`${i !== rows.length - 1 ? 'border-b border-slate-200' : ''}`}>
                    <td className="px-4 sm:px-6 py-4 sm:py-5 text-[15px] sm:text-[17px] text-slate-800 font-medium">{k}</td>
                    <td className="px-4 sm:px-6 py-4 sm:py-5 text-[15px] sm:text-[17px] text-slate-900 font-semibold text-right tabular-nums">{v}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <p className="mt-7 body-md text-slate-600">
            Unlimited surveys, unlimited messages, unlimited support, all included in the same price. No per-seat licensing. No per-survey surcharges.
          </p>
        </div>
      </div>
    </section>
  );
}

function WhatsIncluded() {
  const groups = [
    {
      title: 'Surveys, all of them',
      bullets: [
        'Pulse surveys on any cadence',
        'Annual engagement survey',
        'Exit surveys, including the ten-days-before-leave-date trigger',
        'Onboarding surveys at week one, week eight and month six',
        'Custom one-off and transactional surveys',
        'Unlimited responses; no per-survey limit',
      ],
    },
    {
      title: 'Messaging, all four channels',
      bullets: [
        'Work email and work SMS',
        'Personal email and personal SMS',
        'Branded templates with your logo and colours',
        'Audience builder on any employee attribute',
        'Automated onboarding, exit and training journeys',
        'Unlimited sends; emails are free, SMS has a small charge',
      ],
    },
    {
      title: 'AI, where it earns its keep',
      bullets: [
        'AI Critical Concern detection on every response',
        'Open-text theme detection in plain English',
        'Configurable routing for safeguarding alerts',
        'Full audit trail',
        'Hosted in the EU',
      ],
    },
    {
      title: 'Reporting and integration',
      bullets: [
        'Bespoke dashboards with drag-and-drop charts',
        'Word export',
        'Integration with your HR system',
      ],
    },
    {
      title: 'Support and service',
      bullets: [
        'Unlimited phone support, Monday to Friday, 9am to 5pm',
        'A named colleague, not a ticket queue',
        'Bespoke question library set up for you in week one',
        'Sector benchmarks included',
        'Free training for HR and line managers',
      ],
    },
    {
      title: 'Compliance, sorted',
      bullets: [
        'UK GDPR compliant',
        'UK-built, EU-hosted',
      ],
    },
  ];

  return (
    <section className="py-24 lg:py-32 bg-blue-50" aria-labelledby="included-h">
      <div className="max-w-container mx-auto px-5 sm:px-8">
        <div className="max-w-prose-wide reveal">
          <p className="eyebrow mb-4">What every tier includes</p>
          <h2 id="included-h" className="h2">Six lists. Read them. There is no tier above this.</h2>
          <p className="mt-5 body-lg text-slate-600">
            The £5,000 customer and the £18,000 customer get the same product. The price difference reflects the headcount we are supporting, not a feature gate. Enterprise plans, premium tiers and platinum SLAs do not live here.
          </p>
        </div>

        <div className="mt-14 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {groups.map((g, i) => (
            <div
              key={g.title}
              className="reveal rounded-xl bg-white border border-slate-200 p-6 sm:p-7 shadow-card"
              style={{ transitionDelay: `${(i % 3) * 80}ms` }}
            >
              <h3 className="text-[19px] font-semibold text-slate-900 mb-4 leading-snug">{g.title}</h3>
              <ul className="space-y-2.5">
                {g.bullets.map((b) => (
                  <li key={b} className="flex items-start gap-2.5 text-[15px] leading-snug text-slate-700">
                    <span className="mt-1 inline-flex items-center justify-center h-4 w-4 shrink-0 rounded-full bg-blue-600 text-white">
                      <IconCheck size={12} strokeWidth={3} />
                    </span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PricingFAQ() {
  const faqs = [
    {
      q: 'What if our headcount changes mid-year?',
      a: 'Nothing happens until your renewal. We do not bill mid-year top-ups. If you cross a band, the new annual figure applies from your next contract anniversary. Down a band works the same way.',
    },
    {
      q: 'How does the procurement process work?',
      a: 'We have answered the standard housing-sector procurement security questionnaire many times and hold it on file ready to share. UK-built, EU-hosted, UK GDPR compliant: the paperwork starts in your favour.',
    },
    {
      q: 'Can we cancel?',
      a: 'Annual contract. You keep your data exports and we help with handover. No exit fees.',
    },
    {
      q: 'What about 1,000+ employees?',
      a: "We have customers above 1,000. We will price by headcount band on the same logic as the table; have a chat and a colleague will give you a figure on the call.",
    },
  ];

  return (
    <section className="py-24 lg:py-32 bg-white" aria-labelledby="faq-h">
      <div className="max-w-container mx-auto px-5 sm:px-8">
        <div className="max-w-[820px] mx-auto">
          <div className="text-center reveal">
            <p className="eyebrow mb-4">The questions procurement always ask</p>
            <h2 id="faq-h" className="h2">Pricing questions, answered.</h2>
          </div>

          <div className="mt-12 lg:mt-14 rounded-xl border border-slate-200 bg-white overflow-hidden shadow-card reveal">
            {faqs.map((f, i) => (
              <FAQItem key={i} q={f.q} a={f.a} isLast={i === faqs.length - 1} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQItem({ q, a, isLast }) {
  const [open, setOpen] = useState(false);
  return (
    <div className={`${isLast ? '' : 'border-b border-slate-200'}`}>
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        aria-expanded={open}
        className="w-full px-5 sm:px-6 py-4 sm:py-5 flex items-center justify-between gap-4 sm:gap-6 text-left hover:bg-slate-50 transition-colors"
      >
        <span className="text-[16px] sm:text-[18px] font-semibold text-slate-900 leading-snug">{q}</span>
        <span className={`shrink-0 inline-flex items-center justify-center h-8 w-8 rounded-full bg-blue-50 text-blue-600 transition-transform ${open ? 'rotate-180' : ''}`}>
          <IconChevronDown size={18} />
        </span>
      </button>
      {open && (
        <div className="px-5 sm:px-6 pb-6 pt-1 body-md max-w-[68ch]">
          {a}
        </div>
      )}
    </div>
  );
}

const TWEAK_DEFAULTS = window.TWEAK_DEFAULTS;

function App() {
  useReveal();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <>
      <Header />
      <main id="main">
        <PricingHero bg={t.heroBg} accent={t.heroAccent} />
        <PricingTable />
        <WhatsIncluded />
        <PricingFAQ />
        <HomeFinalCTA />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakColor
          label="Hero background"
          value={t.heroBg}
          options={['#FFFFFF', '#F8FAFC', '#EFF6FF', '#F1F5F9']}
          onChange={(v) => setTweak('heroBg', v)}
        />
        <TweakColor
          label="Eyebrow accent"
          value={t.heroAccent}
          options={['#2563EB', '#1D4ED8', '#0B3D91', '#0F172A']}
          onChange={(v) => setTweak('heroAccent', v)}
        />
      </TweaksPanel>
    </>
  );
}

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