// hf-enhance.jsx — "first in class" layer. Loads LAST, so its KyndridHomepage
// overrides earlier ones. Adds: animated proof stats, an enterprise security &
// trust band, a featured case study, an FAQ accordion — and recomposes the
// homepage WITHOUT pricing, with tasteful scroll-reveal throughout.
//
// Reuses: HeroSection, IntelligenceWorld, ControlWorld, BackboneBand,
//         CTASection, HNav, HFooter.

// ── ANIMATED PROOF STATS ──────────────────────────────────────────────────────
function StatsBandPro() {
  const stats = [
    { fig: '18%', lab: 'lower food & labour cost', sub: 'for operators acting on Kyndrid recommendations' },
    { fig: '6 hrs', lab: 'saved on admin each week', sub: 'one source of truth, not scattered spreadsheets' },
    { fig: '95%', lab: 'demand forecast accuracy', sub: 'sales predicted by site, day and hour' },
    { fig: '100%', lab: 'audit-ready records', sub: 'every asset, check and change logged' },
  ];
  return (
    <section style={{ padding: '64px 72px', background: HF.surface, borderBottom: `1px solid ${HF.border}` }}>
      <div style={{ maxWidth: HF.W, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 0 }}>
        {stats.map((s, i) => (
          <Reveal key={s.lab} delay={i * 90} style={{ padding: '4px 38px', borderLeft: i ? `1px solid ${HF.border}` : 'none' }}>
            <div style={{ fontSize: 52, fontWeight: 800, color: HF.blue, letterSpacing: '-2.2px', lineHeight: 1, fontFamily: HF.font }}>{s.fig}</div>
            <div style={{ fontSize: 15, fontWeight: 700, color: HF.ink, marginTop: 14, fontFamily: HF.font }}>{s.lab}</div>
            <div style={{ fontSize: 13, color: HF.muted, marginTop: 7, lineHeight: 1.5, fontFamily: HF.font }}>{s.sub}</div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ── FEATURED CASE STUDY ───────────────────────────────────────────────────────
function CaseStudySection() {
  const metrics = [
    { fig: '−18%', lab: 'labour & food cost' },
    { fig: '6 hrs', lab: 'saved every week' },
    { fig: '14', lab: 'sites, one dashboard' },
  ];
  return (
    <section style={{ padding: '0 72px 104px' }}>
      <div style={{ maxWidth: HF.W, margin: '0 auto' }}>
        <Reveal>
          <div style={{
            display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 0,
            border: `1px solid ${HF.border}`, borderRadius: 24, overflow: 'hidden',
            background: HF.surface, boxShadow: '0 1px 3px rgba(7,16,31,.05), 0 30px 70px -44px rgba(7,16,31,.26)',
          }}>
            {/* quote side */}
            <div style={{ padding: '56px 56px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 26 }}>
                <span style={{ fontSize: 16, fontWeight: 800, color: HF.ink, letterSpacing: '-0.3px', opacity: 0.85 }}>Harbour &amp; Co</span>
                <span style={{ width: 1, height: 16, background: HF.borderMid }} />
                <span style={{ fontSize: 12.5, fontWeight: 600, color: HF.muted }}>Hospitality group · 14 sites</span>
              </div>
              <p style={{ fontSize: 25, lineHeight: 1.5, fontWeight: 700, color: HF.ink, letterSpacing: '-0.5px', margin: 0, textWrap: 'balance', fontFamily: HF.font }}>
                "Before Kyndrid we ran the business off six spreadsheets and a gut feeling. Now every site manager opens one dashboard and knows exactly what to fix that morning."
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 34 }}>
                <span style={{ width: 46, height: 46, borderRadius: 99, background: `linear-gradient(135deg, ${HF.intel.bg}, ${HF.asset.bg})`, border: `1px solid ${HF.border}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, fontWeight: 800, color: HF.body }}>SW</span>
                <div>
                  <div style={{ fontSize: 14.5, fontWeight: 700, color: HF.ink, fontFamily: HF.font }}>Sarah Whitfield</div>
                  <div style={{ fontSize: 13, color: HF.muted, fontFamily: HF.font }}>Operations Director</div>
                </div>
              </div>
            </div>
            {/* metric side */}
            <div style={{ padding: '52px 48px', background: HF.navy, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 4, position: 'relative', backgroundImage: `radial-gradient(ellipse 420px 320px at 80% 30%, rgba(13,173,159,.18) 0%, transparent 60%)` }}>
              {metrics.map((m, i) => (
                <div key={m.lab} style={{ padding: '18px 0', borderTop: i ? '1px solid rgba(255,255,255,.1)' : 'none' }}>
                  <div style={{ fontSize: 40, fontWeight: 800, color: '#fff', letterSpacing: '-1.4px', lineHeight: 1, fontFamily: HF.font }}>{m.fig}</div>
                  <div style={{ fontSize: 14, color: '#94a3b8', marginTop: 8, fontWeight: 600, fontFamily: HF.font }}>{m.lab}</div>
                </div>
              ))}
              <div style={{ marginTop: 18 }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13.5, fontWeight: 700, color: '#5FE3D4', cursor: 'pointer', fontFamily: HF.font }}>
                  Read the full story <HArrow color="#5FE3D4" />
                </span>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── ENTERPRISE SECURITY & TRUST ───────────────────────────────────────────────
function SecuritySection() {
  const items = [
    { t: 'Encrypted end to end', c: 'Data encrypted in transit (TLS 1.2+) and at rest (AES-256) on every product.', ic: HIC.shield },
    { t: 'Role-based access', c: 'Granular permissions decide exactly what each person sees, by site, team and product.', ic: HIC.eye },
    { t: 'Full audit trail', c: 'Every change is logged and exportable — who did what, when, across the Kyndrid products.', ic: HIC.doc },
    { t: 'UK & EU data residency', c: 'Built to GDPR standards, with your data hosted in-region — never sold or shared.', ic: HIC.pin },
    { t: '99.9% uptime', c: 'Monitored around the clock, with automated, regularly tested backups.', ic: HIC.check },
    { t: 'SSO & provisioning', c: 'Single sign-on and directory provisioning for larger, multi-site organisations.', ic: HIC.users },
  ];
  const badges = ['GDPR-ready', 'Cyber Essentials aligned', 'UK & EU hosting', 'SSO / SAML'];
  return (
    <section style={{ padding: '104px 72px', background: HF.fill, borderTop: `1px solid ${HF.border}`, borderBottom: `1px solid ${HF.border}` }}>
      <div style={{ maxWidth: HF.W, margin: '0 auto' }}>
        <Reveal>
          <HSectionHead
            eyebrow="Security &amp; trust"
            title="Enterprise-grade by default."
            sub="Operations data is sensitive. Kyndrid protects it with the controls a serious organisation expects across both platforms." />
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }}>
          {items.map((it, i) => (
            <Reveal key={it.t} delay={(i % 3) * 80}>
              <div className="k-card" style={{ background: HF.surface, border: `1px solid ${HF.border}`, borderRadius: 16, padding: '26px 26px', height: '100%', boxShadow: '0 1px 3px rgba(7,16,31,.04)' }}>
                <span style={{ width: 44, height: 44, borderRadius: 12, background: HF.blueSoft, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: HF.blue }}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">{it.ic}</svg>
                </span>
                <HH3 style={{ fontSize: 17, marginTop: 16 }}>{it.t}</HH3>
                <HBody style={{ fontSize: 13.5, marginTop: 8, lineHeight: 1.6 }}>{it.c}</HBody>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={120}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, flexWrap: 'wrap', marginTop: 36 }}>
            {badges.map((b) => (
              <span key={b} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontSize: 13, fontWeight: 700, color: HF.body, background: HF.surface, border: `1px solid ${HF.border}`, borderRadius: 99, padding: '9px 16px', fontFamily: HF.font }}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={HF.green} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12l5 5L20 6" /></svg>
                {b}
              </span>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── FAQ ACCORDION ─────────────────────────────────────────────────────────────
function FAQItem({ q, a, open, onClick }) {
  return (
    <div className="k-card" style={{ border: `1px solid ${HF.border}`, borderRadius: 14, background: HF.surface, overflow: 'hidden' }}>
      <button onClick={onClick} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '20px 24px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: HF.font }}>
        <span style={{ fontSize: 16, fontWeight: 700, color: HF.ink, letterSpacing: '-0.2px' }}>{q}</span>
        <span style={{ flex: '0 0 auto', width: 28, height: 28, borderRadius: 8, background: open ? HF.blue : HF.fill, border: `1px solid ${open ? HF.blue : HF.border}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: open ? '#fff' : HF.body }}>
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
            {open ? <path d="M4 8h8" /> : <><path d="M8 4v8" /><path d="M4 8h8" /></>}
          </svg>
        </span>
      </button>
      {open && (
        <div style={{ padding: '0 24px 22px', marginTop: -2 }}>
          <p style={{ fontSize: 14.5, lineHeight: 1.65, color: HF.body, margin: 0, maxWidth: 620, textWrap: 'pretty', fontFamily: HF.font }}>{a}</p>
        </div>
      )}
    </div>
  );
}

function FAQSection() {
  const faqs = [
    ['How quickly can we get started?', 'Most teams are live within days, not months. We help import your existing data and connect your systems, so you see value almost immediately.'],
    ['Do we have to buy both platforms?', 'No. Start with the platform you need most. Asset Ops and Kyndrid Intelligence are separate products, so you can adopt one first and add the other later.'],
    ['Will it work with the systems we already use?', 'Yes. Kyndrid connects to common POS, inventory, rota, accounting and delivery platforms, plus a full REST API and CSV import — so your data flows in automatically.'],
    ['How is our data kept secure?', 'Data is encrypted in transit and at rest, hosted in the UK and EU, with role-based access and a complete audit trail. We build to GDPR standards and never sell your data.'],
    ['Can different sites and teams see different things?', 'Role-based access controls exactly what each person sees — by site, team and product — so head office gets the full picture while local teams see only what they need.'],
    ['Do you support multi-site organisations?', 'Kyndrid is built for it. Get consolidated dashboards across every location, with drill-down into any single site, team or record.'],
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: '104px 72px' }}>
      <div style={{ maxWidth: 1000, margin: '0 auto' }}>
        <Reveal>
          <HSectionHead eyebrow="FAQ" title="Questions, answered." sub="Everything you need to know before you book a demo." />
        </Reveal>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {faqs.map(([q, a], i) => (
            <Reveal key={q} delay={i * 60}>
              <FAQItem q={q} a={a} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
            </Reveal>
          ))}
        </div>
        <Reveal delay={100}>
          <div style={{ textAlign: 'center', marginTop: 40, fontSize: 15, color: HF.muted, fontFamily: HF.font }}>
            Still have a question?{' '}
            <span onClick={() => window.__nav && window.__nav('contact')} style={{ color: HF.blue, fontWeight: 700, cursor: 'pointer' }}>Talk to our team →</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── Reveal-wrapped passthroughs for the reused sections ───────────────────────
function R(Comp) { return <Reveal>{Comp}</Reveal>; }

// ── FINAL HOMEPAGE (overrides all earlier KyndridHomepage definitions) ────────
function KyndridHomepage() {
  return (
    <div style={{ fontFamily: HF.font, background: HF.surface, minWidth: 1140 }}>
      <HNav active="home" />
      <HeroSection />
      <StatsBandPro />
      {R(<IntelligenceWorld />)}
      {R(<ControlWorld />)}
      {R(<BackboneBand />)}
      <SecuritySection />
      <FAQSection />
      {R(<CTASection />)}
      <HFooter />
    </div>
  );
}

Object.assign(window, {
  StatsBandPro, CaseStudySection, SecuritySection, FAQSection, FAQItem,
  KyndridHomepage,
});