/* global React */
// Home page bottom sections + pricing/FAQ shared bits.

const PricingTeaser = () => {
  const tiers = [
    { name: 'Pilot',  price: 'R0',     unit: '/ site / 30 days', body: 'Test SiteSign on one site for 30 days. Full feature access. We help you set it up.', cta: 'Talk to us about a pilot', muted: true },
    { name: 'Site',   price: 'R1,000', unit: '/ month',          body: '2 sites included, 50 workers per site. Auto-close. BCEA-safe corrections. Payroll export. Email support.', cta: 'Book a 15-min demo', featured: true },
    { name: 'Site+',  price: 'R500',   unit: '/ extra site / month', body: 'R500 per extra site / month. R20 per extra worker / month. Same features as Site.', cta: 'See full pricing' },
  ];

  return (
    <section className="section" style={{ background: 'var(--ss-bg-grey)' }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <span className="t-eyebrow t-eyebrow--accent">Pricing</span>
          <h2 className="t-h1" style={{ marginTop: 14 }}>One site or fifty. Site-first pricing.</h2>
          <p className="t-lead">No per-user surprise bill. R1,000 / month for 2 sites and 50 workers per site, then R500 per extra site and R20 per extra worker.</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 20, marginBottom: 28 }}>
          {tiers.map((t, i) => (
            <div key={i} className={`card ${t.featured ? 'card--accent-top' : ''}`} style={{
              padding: 28,
              position: 'relative',
              border: t.featured ? '1px solid var(--ss-midnight-blue)' : undefined,
            }}>
              {t.featured && (
                <span className="badge badge--review" style={{ position: 'absolute', top: -12, right: 24 }}>
                  Most chosen
                </span>
              )}
              <div className="t-eyebrow" style={{ color: 'var(--ss-grey-mid)', marginBottom: 14 }}>{t.name}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
                <span style={{ fontSize: 36, fontWeight: 900, color: 'var(--ss-midnight-blue)', lineHeight: 1 }}>{t.price}</span>
                <span className="t-meta" style={{ fontSize: 13 }}>{t.unit}</span>
              </div>
              <p className="t-small" style={{ margin: '14px 0 22px', minHeight: 60 }}>{t.body}</p>
              <a className={`btn ${t.featured ? 'btn--cta' : 'btn--secondary'} btn--sm`} href="pricing.html" style={{ width: '100%' }}>{t.cta}</a>
            </div>
          ))}
        </div>

        <div style={{ textAlign: 'center' }}>
          <a href="pricing.html" style={{ color: 'var(--ss-midnight-blue)', fontWeight: 600, fontSize: 14, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            See full pricing, comparison, and FAQ
            <IconArrowRight size={16}/>
          </a>
        </div>
      </div>
    </section>
  );
};

/* ---------- PWA install block ---------- */

const InstallBlock = () => (
  <section className="section" id="install">
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.05fr)', gap: 56, alignItems: 'center' }} className="install-grid">
        <div>
          <span className="t-eyebrow t-eyebrow--accent">Install</span>
          <h2 className="t-h1" style={{ marginTop: 14 }}>Install SiteSign on any tablet.</h2>
          <hr className="rule-safety"/>
          <ol style={{ listStyle: 'none', padding: 0, margin: 0, counterReset: 'install', display: 'flex', flexDirection: 'column', gap: 18 }}>
            {[
              { title: "Open sitesign.co.za on your tablet's browser.", body: "Chrome, Edge, Safari, or Samsung Internet — all supported." },
              { title: "Tap 'Install' or 'Add to home screen' when prompted.", body: "SiteSign installs as a Progressive Web App. No app store required." },
              { title: "Pair with the 6-digit code from your dashboard.", body: "30-second setup. Tablet is now a kiosk for that gate." },
            ].map((s, i) => (
              <li key={i} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                <span style={{
                  flex: '0 0 auto',
                  width: 36, height: 36, borderRadius: 99,
                  background: 'var(--ss-safety-yellow)', color: 'var(--ss-midnight-blue)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 800, fontSize: 14,
                }}>{i+1}</span>
                <div>
                  <div style={{ fontWeight: 700, color: 'var(--ss-midnight-blue)', fontSize: 16, marginBottom: 4 }}>{s.title}</div>
                  <p className="t-small" style={{ margin: 0 }}>{s.body}</p>
                </div>
              </li>
            ))}
          </ol>
          <p className="t-meta" style={{ marginTop: 24, paddingTop: 18, borderTop: '1px dashed var(--ss-grey-light)' }}>
            Updates roll out automatically. No supervisor has to re-install anything.
          </p>
        </div>

        <div className="placeholder" style={{ aspectRatio: '4 / 3', minHeight: 320 }}>
          <div style={{ width: '85%', background: 'var(--ss-white)', borderRadius: 14, border: '1px solid var(--ss-silver)', padding: 20, boxShadow: 'var(--ss-shadow-card)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <img src="assets/brand/sitesign-icon.png" alt="" style={{ width: 36, height: 36 }}/>
              <div>
                <div style={{ fontWeight: 700, color: 'var(--ss-midnight-blue)', fontSize: 14 }}>Add SiteSign to home screen?</div>
                <div className="t-meta" style={{ fontSize: 12 }}>sitesign.co.za</div>
              </div>
            </div>
            <p className="t-small" style={{ margin: '0 0 16px', fontSize: 13 }}>
              Get the full kiosk experience. Works offline. Updates automatically.
            </p>
            <div style={{ display: 'flex', gap: 8 }}>
              <button className="btn btn--secondary btn--sm" style={{ flex: 1, height: 40 }}>Not now</button>
              <button className="btn btn--cta btn--sm" style={{ flex: 1, height: 40 }}>Install</button>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .install-grid { grid-template-columns: 1fr !important; } }`}</style>
    </div>
  </section>
);

/* ---------- FAQ ---------- */

const FaqItem = ({ q, a, defaultOpen }) => {
  const [open, setOpen] = React.useState(!!defaultOpen);
  return (
    <div style={{ borderBottom: '1px solid var(--ss-grey-light)' }}>
      <button
        onClick={() => setOpen(o => !o)}
        aria-expanded={open}
        style={{
          width: '100%',
          background: 'transparent',
          border: 'none',
          padding: '20px 0',
          textAlign: 'left',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          gap: 16,
          cursor: 'pointer',
          color: 'var(--ss-midnight-blue)',
          fontWeight: 700,
          fontSize: 16,
        }}>
        <span>{q}</span>
        <span style={{ flex: '0 0 auto', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }}>
          <IconChevron size={18}/>
        </span>
      </button>
      {open && (
        <div style={{ paddingBottom: 22, fontSize: 15, lineHeight: 1.6, color: 'var(--ss-dark-text)', maxWidth: 760 }}>
          {a}
        </div>
      )}
    </div>
  );
};

const HomeFaq = () => {
  const items = [
    { q: 'Is SiteSign BCEA-compliant?', a: <>SiteSign is designed against the Basic Conditions of Employment Act, 1997 — specifically Section 31 (record-keeping). Original timestamps are immutable; every correction captures supervisor name, time, and reason. We are not a legal-compliance certification, but the audit trail is structured to be defensible in any labour-court dispute.</> },
    { q: 'How does SiteSign handle POPIA and biometric data?', a: <>We never store raw face images. Only mathematical face descriptors used for matching. Biometric data is auto-purged when an employee is terminated, and is never used for marketing or shared with third parties. Our architecture was reviewed against POPIA Article 19 (security safeguards). See the <a href="privacy.html" style={{ color: 'var(--ss-midnight-blue)', textDecoration: 'underline' }}>privacy notice</a> for the full retention policy.</> },
    { q: 'What hardware do I need?', a: <>Any modern tablet — iPad, Samsung, Lenovo, Huawei. No fingerprint scanner. No proprietary device. The tablet's front camera handles face matching and the GPS handles geofence verification. We recommend a wall mount and a tablet from the last three years.</> },
  ];

  return (
    <section className="section" id="faq" style={{ background: 'var(--ss-bg-grey)' }}>
      <div className="container" style={{ maxWidth: 920 }}>
        <div style={{ marginBottom: 36 }}>
          <span className="t-eyebrow t-eyebrow--accent">Questions</span>
          <h2 className="t-h1" style={{ marginTop: 14 }}>Frequently asked.</h2>
        </div>
        <div>
          {items.map((it, i) => <FaqItem key={i} q={it.q} a={it.a} defaultOpen={i === 0}/>)}
        </div>
        <div style={{ marginTop: 28, textAlign: 'center' }}>
          <a href="support.html#faq" style={{
            color: 'var(--ss-midnight-blue)', fontWeight: 600, fontSize: 14,
            textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>
            See all FAQs on the Support page
            <IconArrowRight size={16}/>
          </a>
        </div>
      </div>
    </section>
  );
};

/* ---------- Book demo CTA ---------- */

const BookDemo = () => (
  <section className="section section--midnight" id="book-demo">
    <div className="container" style={{ maxWidth: 920 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 48, alignItems: 'center' }} className="demo-grid">
        <div>
          <span className="t-eyebrow t-eyebrow--accent" style={{ color: 'rgba(255,255,255,0.7)' }}>Book a demo</span>
          <h2 className="t-h1" style={{ color: '#fff', marginTop: 14 }}>15 minutes. Your sites. Your payroll.</h2>
          <p className="t-lead" style={{ color: 'rgba(255,255,255,0.85)', marginBottom: 24 }}>
            We will show you SiteSign running on a tablet, walk through a real shift, and answer every question about BCEA, POPIA, and your payroll integration.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            {['BCEA-safe', 'POPIA-aware', 'Payroll-ready'].map(t => (
              <span key={t} style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '8px 14px',
                background: 'rgba(255,255,255,0.08)',
                border: '1px solid rgba(255,255,255,0.18)',
                borderRadius: 99,
                fontSize: 13, color: '#fff', fontWeight: 600,
              }}>
                <IconCheck size={14} stroke="var(--ss-safety-yellow)"/>{t}
              </span>
            ))}
          </div>
        </div>

        <div className="card" style={{ padding: 28, color: 'var(--ss-dark-text)' }}>
          <div className="t-eyebrow" style={{ color: 'var(--ss-grey-mid)', marginBottom: 18 }}>Tell us about your sites</div>
          <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {/* Honeypot */}
            <input type="text" name="company_website" tabIndex="-1" autoComplete="off" style={{ position: 'absolute', left: '-9999px', height: 0, width: 0 }} aria-hidden="true"/>
            <Field label="Name" type="text" name="name" placeholder="Themba Mokoena"/>
            <Field label="Work email" type="email" name="email" placeholder="themba@yoursite.co.za"/>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <Field label="Company" type="text" name="company" placeholder="Acme Mining"/>
              <Field label="Role" type="text" name="role" placeholder="Operations Director"/>
            </div>
            <Field label="Workers across all sites" type="text" name="team_size" placeholder="e.g. 240"/>
            <button type="submit" className="btn btn--cta btn--lg" style={{ marginTop: 8 }}>
              Book a 15-min demo
              <IconArrowRight size={18}/>
            </button>
            <p className="t-meta" style={{ margin: 0, fontSize: 12 }}>
              Calendly embed will replace this form on launch. Your data is processed under our <a href="privacy.html" style={{ color: 'var(--ss-midnight-blue)' }}>POPIA notice</a>.
            </p>
          </form>
        </div>
      </div>
      <style>{`@media (max-width: 720px) { .demo-grid { grid-template-columns: 1fr !important; } }`}</style>
    </div>
  </section>
);

const Field = ({ label, type, name, placeholder }) => (
  <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
    <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ss-midnight-blue)' }}>{label}</span>
    <input
      type={type}
      name={name}
      placeholder={placeholder}
      style={{
        height: 44,
        padding: '0 12px',
        border: '1px solid var(--ss-silver)',
        borderRadius: 8,
        fontSize: 14,
        fontFamily: 'inherit',
        color: 'var(--ss-dark-text)',
        background: 'var(--ss-white)',
      }}
    />
  </label>
);

/* ---------- Cookie banner ---------- */

const CookieBanner = () => {
  const [dismissed, setDismissed] = React.useState(false);
  if (dismissed) return null;
  return (
    <div style={{
      position: 'fixed', bottom: 16, left: 16, right: 16,
      maxWidth: 720, margin: '0 auto',
      background: 'var(--ss-midnight-blue)', color: '#fff',
      borderRadius: 12, padding: '16px 20px',
      borderTop: '4px solid var(--ss-safety-yellow)',
      boxShadow: '0 12px 32px rgba(0,0,0,0.25)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 16, flexWrap: 'wrap',
      zIndex: 100, fontSize: 13,
    }}>
      <span style={{ flex: '1 1 280px' }}>
        SiteSign uses essential cookies only. Non-essential cookies are off by default.{' '}
        <a href="privacy.html" style={{ color: 'var(--ss-safety-yellow)', textDecoration: 'underline' }}>Read our POPIA notice</a>.
      </span>
      <div style={{ display: 'flex', gap: 8 }}>
        <button className="btn btn--ghost btn--sm" onClick={() => setDismissed(true)}>Manage</button>
        <button className="btn btn--cta btn--sm" onClick={() => setDismissed(true)}>Got it</button>
      </div>
    </div>
  );
};

Object.assign(window, { PricingTeaser, InstallBlock, HomeFaq, BookDemo, CookieBanner, FaqItem, Field });