/* global React */
// Support page: FAQ (moved from Home) + Contact form.

const SupportHero = () => (
  <section className="section site-grid-bg" style={{ paddingTop: 72, paddingBottom: 40 }}>
    <div className="container" style={{ maxWidth: 880, textAlign: 'center' }}>
      <span className="t-eyebrow t-eyebrow--accent" style={{ display: 'inline-block' }}>Support</span>
      <h1 className="t-display" style={{ marginTop: 18, marginBottom: 18, fontSize: 'clamp(34px, 4.6vw, 54px)' }}>
        Help and support.
      </h1>
      <p className="t-lead" style={{ maxWidth: 680, margin: '0 auto 28px' }}>
        We are a small team and we answer every email. Here is what you can expect, and how to reach us.
      </p>
      <a className="btn btn--cta btn--lg" href="index.html#book-demo">
        Book a 15-min demo
        <IconArrowRight size={18}/>
      </a>
    </div>
  </section>
);

/* ---------- Response expectations ---------- */

const SupportPromise = () => {
  const items = [
    { label: 'Severity 1 — production down', sla: 'Same business day' },
    { label: 'Severity 2 — feature broken',  sla: '1 business day' },
    { label: 'Cosmetic / configuration',     sla: '2 business days' },
    { label: 'Hours',                        sla: 'Mon–Fri, 08:00–17:00 SAST' },
  ];
  return (
    <section className="section section--grey" style={{ paddingTop: 32, paddingBottom: 32 }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 28 }}>
          <span className="t-eyebrow t-eyebrow--accent">Response times</span>
          <h2 className="t-h1" style={{ marginTop: 14 }}>What you can expect.</h2>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 12,
          background: 'var(--ss-white)',
          border: '1px solid var(--ss-silver)',
          borderRadius: 12,
          padding: 8,
          boxShadow: 'var(--ss-shadow-card)',
        }}>
          {items.map((it, i) => (
            <div key={i} style={{ padding: '16px 18px', borderRight: i < items.length - 1 ? '1px solid var(--ss-grey-light)' : 'none' }}>
              <div style={{
                fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
                color: 'var(--ss-grey-mid)', marginBottom: 6,
              }}>{it.label}</div>
              <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--ss-midnight-blue)' }}>{it.sla}</div>
            </div>
          ))}
        </div>
        <p className="t-meta" style={{ marginTop: 14, fontSize: 12 }}>
          Enterprise tier includes a named support contact and custom SLA.
        </p>
      </div>
    </section>
  );
};

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

const SupportFaq = () => {
  const sections = [
    {
      heading: 'Compliance',
      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: 'Who owns the data?', a: <>You do. SiteSign is a processor under POPIA, not a controller. You can export everything in standard formats at any time. On contract end, we delete your data within 30 days unless you request it back first.</> },
      ],
    },
    {
      heading: 'Hardware & operation',
      items: [
        { q: 'What hardware do I need?', a: <>Any modern tablet — iPad (iOS 15+) or Android (10+). 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 (R3 000–R5 000 retail).</> },
        { q: 'Does SiteSign work offline?', a: <>Yes. The kiosk is a Progressive Web App with full offline support. Workers can clock in and out with no connection; events sync the moment the tablet rejoins Wi-Fi or 4G. Auto-close still runs on the server so forgotten clock-outs are caught regardless of device state.</> },
        { q: 'Which payrolls do you export to?', a: <>Sage 200, Pastel Payroll, PaySpace, SimplePay, Xero, and plain CSV / Excel out of the box. Custom integrations are available on the Enterprise tier. We never lock you in — your data is always exportable.</> },
      ],
    },
    {
      heading: 'Pilot, billing & cancellation',
      items: [
        { q: 'What does the pilot include?', a: <>The pilot is one site, 30 days, full feature access, no charge. We help you set up the geofence, pair the tablet, and import your worker roster. At the end, you keep all data — even if you do not move to the paid plan. The pilot programme is launching soon — book a 15-min demo for early access.</> },
        { q: 'How is billing handled?', a: <>Monthly billing on the Site tier with no setup fee. Annual billing saves 10% — you pay 12 months upfront and lock pricing for that year. Enterprise rollouts may include a one-time onboarding fee depending on integration scope, quoted upfront. All prices ex-VAT.</> },
        { q: 'Can I cancel any time?', a: <>Monthly billing: cancel any time, prorated to month-end. Annual billing: cancel any time, no refund on remaining months. Your data exports cleanly on cancellation.</> },
      ],
    },
    {
      heading: 'Security & support',
      items: [
        { q: 'How is my data secured?', a: <>Encryption at rest (AES-256) and in transit (TLS 1.2 or higher) via the underlying cloud database. Hosted on cloud infrastructure managed by Supabase (database) and Vercel (frontend). Role-based access for site supervisors, organisation administrators, and payroll exporters. Multi-factor authentication required for all paid customer admin accounts. See the <a href="privacy.html#security" style={{ color: 'var(--ss-midnight-blue)', textDecoration: 'underline' }}>full security section</a> in our POPIA notice.</> },
        { q: 'What is included in support?', a: <>Email support during SA business hours (08:00–17:00 SAST), Monday to Friday. Same-day response on Severity 1 issues (production down). Two business days on cosmetic / configuration issues. Enterprise tier includes a named contact and custom SLA.</> },
        { q: 'How do I report a problem?', a: <>Email <a href="mailto:support@sitesign.co.za" style={{ color: 'var(--ss-midnight-blue)', textDecoration: 'underline' }}>support@sitesign.co.za</a> with a description, the affected site, and (if helpful) a screenshot. Severity 1 issues should include "URGENT" in the subject line — we route those off-hours.</> },
      ],
    },
  ];

  return (
    <section className="section">
      <div className="container" style={{ maxWidth: 920 }}>
        <div style={{ marginBottom: 36 }}>
          <span className="t-eyebrow t-eyebrow--accent">Frequently asked questions</span>
          <h2 className="t-h1" style={{ marginTop: 14 }}>Everything we get asked, in one place.</h2>
        </div>
        {sections.map((s, si) => (
          <div key={si} style={{ marginBottom: 28 }}>
            <h3 className="t-h3" style={{
              fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.1em',
              color: 'var(--ss-grey-mid)', borderBottom: '2px solid var(--ss-safety-yellow)',
              paddingBottom: 8, marginBottom: 4,
            }}>{s.heading}</h3>
            {s.items.map((it, i) => <FaqItem key={i} q={it.q} a={it.a} defaultOpen={si === 0 && i === 0}/>)}
          </div>
        ))}
      </div>
    </section>
  );
};

/* ---------- Contact form ---------- */

const SupportContact = () => (
  <section className="section section--grey" id="contact" style={{ scrollMarginTop: 80 }}>
    <div className="container" style={{ maxWidth: 920 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 48, alignItems: 'flex-start' }} className="contact-grid">
        <div>
          <span className="t-eyebrow t-eyebrow--accent">Contact us</span>
          <h2 className="t-h1" style={{ marginTop: 14 }}>Tell us what you need.</h2>
          <p className="t-lead" style={{ marginBottom: 24 }}>
            Sales question, support issue, partnership, or just want to talk attendance? Send us a note. We answer every email during SA business hours.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            <li style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <span style={{ flex: '0 0 auto', marginTop: 2, color: 'var(--ss-safety-yellow)' }}><IconShield size={18}/></span>
              <div>
                <div style={{ fontWeight: 700, color: 'var(--ss-midnight-blue)', fontSize: 15 }}>Support</div>
                <a href="mailto:support@sitesign.co.za" style={{ color: 'var(--ss-dark-text)', textDecoration: 'none', fontSize: 14 }}>support@sitesign.co.za</a>
              </div>
            </li>
            <li style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <span style={{ flex: '0 0 auto', marginTop: 2, color: 'var(--ss-safety-yellow)' }}><IconUsers size={18}/></span>
              <div>
                <div style={{ fontWeight: 700, color: 'var(--ss-midnight-blue)', fontSize: 15 }}>Sales</div>
                <a href="mailto:sales@sitesign.co.za" style={{ color: 'var(--ss-dark-text)', textDecoration: 'none', fontSize: 14 }}>sales@sitesign.co.za</a>
              </div>
            </li>
            <li style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <span style={{ flex: '0 0 auto', marginTop: 2, color: 'var(--ss-safety-yellow)' }}><IconLock size={18}/></span>
              <div>
                <div style={{ fontWeight: 700, color: 'var(--ss-midnight-blue)', fontSize: 15 }}>Privacy</div>
                <a href="mailto:privacy@sitesign.co.za" style={{ color: 'var(--ss-dark-text)', textDecoration: 'none', fontSize: 14 }}>privacy@sitesign.co.za</a>
              </div>
            </li>
            <li style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <span style={{ flex: '0 0 auto', marginTop: 2, color: 'var(--ss-safety-yellow)' }}><IconMapPin size={18}/></span>
              <div>
                <div style={{ fontWeight: 700, color: 'var(--ss-midnight-blue)', fontSize: 15 }}>Office</div>
                <div style={{ color: 'var(--ss-dark-text)', fontSize: 14 }}>Johannesburg, South Africa</div>
              </div>
            </li>
          </ul>
        </div>

        <div className="card" style={{ padding: 28 }}>
          <div className="t-eyebrow" style={{ color: 'var(--ss-grey-mid)', marginBottom: 18 }}>Send us a message</div>
          <form onSubmit={(e) => { e.preventDefault(); alert('Form is illustrative — wire to your backend on launch.'); }} 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"/>
            <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ss-midnight-blue)' }}>Message</span>
              <textarea
                name="message"
                rows={4}
                placeholder="Tell us what you're trying to solve..."
                style={{
                  padding: '10px 12px',
                  border: '1px solid var(--ss-silver)',
                  borderRadius: 8,
                  fontSize: 14,
                  fontFamily: 'inherit',
                  color: 'var(--ss-dark-text)',
                  background: 'var(--ss-white)',
                  resize: 'vertical',
                  minHeight: 96,
                }}
              />
            </label>
            <button type="submit" className="btn btn--cta btn--lg" style={{ marginTop: 8 }}>
              Send message
              <IconArrowRight size={18}/>
            </button>
            <p className="t-meta" style={{ margin: 0, fontSize: 12 }}>
              Your data is processed under our <a href="privacy.html" style={{ color: 'var(--ss-midnight-blue)' }}>POPIA notice</a>. We will never share or sell it.
            </p>
          </form>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr !important; } }`}</style>
    </div>
  </section>
);

Object.assign(window, { SupportHero, SupportPromise, SupportFaq, SupportContact });