// hf-home2.jsx — Kyndrid homepage, restructured around how category leaders present.
//   Intelligence world  → Nory / Tenzo / Restaurant365 / All-Gravy (hospitality ops)
//   Control world       → Asset Ops (asset, site, maintenance and audit)
// Outcome-led, product-in-action, proof stats, integrations, testimonial.
// Loads LAST → its KyndridHomepage overrides the one in hf-home.jsx.

const t2 = (name) => name === 'Kyndrid Intelligence' ? HF.intel : HF.asset;
const routeOf2 = { 'Kyndrid Intelligence': 'intelligence', 'Asset Ops': 'asset-ops' };
const goNav2 = (r) => { if (window.__nav) window.__nav(r); };

// ── PROOF / ROI STATS BAND ────────────────────────────────────────────────────
function StatsBand() {
  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: '60px 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) =>
        <div key={s.lab} style={{ padding: '2px 36px', borderLeft: i ? `1px solid ${HF.border}` : 'none' }}>
          <div style={{ fontSize: 48, fontWeight: 800, color: HF.blue, letterSpacing: '-2px', lineHeight: 1 }}>{s.fig}</div>
          <div style={{ fontSize: 15, fontWeight: 700, color: HF.ink, marginTop: 12 }}>{s.lab}</div>
          <div style={{ fontSize: 13, color: HF.muted, marginTop: 7, lineHeight: 1.5 }}>{s.sub}</div>
        </div>
        )}
      </div>
    </section>);
}

// ── INTELLIGENCE WORLD (hospitality ops — Nory/Tenzo/R365 style) ───────────────
function IntelligenceWorld() {
  const points = [
    { t: 'Forecast demand', c: 'Predict sales by site, day and hour — and build the staffing plan to match.', ic: HIC.chart },
    { t: 'Protect margin', c: 'Track stock, wastage and menu margin down to the line item.', ic: HIC.box },
    { t: 'Control labour', c: 'Keep labour cost in line with sales, shift by shift, before it slips.', ic: HIC.users },
    { t: 'Know what to do next', c: 'A daily list of what to order, cut or fix — ranked by impact.', ic: HIC.bulb },
  ];
  return (
    <section style={{ padding: '104px 72px' }}>
      <div style={{ maxWidth: HF.W, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 76, alignItems: 'center' }}>
        <div>
          <HEyebrow color={HF.intel.fg}>Kyndrid Intelligence · Hospitality, retail &amp; convenience</HEyebrow>
          <HH2>Run a tighter operation, every single day.</HH2>
          <HLead style={{ marginTop: 18 }}>
            The operating layer for commercial teams. Kyndrid Intelligence turns your POS, stock and rota data into a clear picture of what's working, what's slipping, and what to do about it.
          </HLead>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22, marginTop: 34 }}>
            {points.map((p) =>
            <div key={p.t} style={{ display: 'flex', gap: 13 }}>
              <span style={{ flex: '0 0 auto', width: 40, height: 40, borderRadius: 11, background: HF.intel.bg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: HF.intel.fg }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">{p.ic}</svg>
              </span>
              <div>
                <div style={{ fontSize: 15, fontWeight: 700, color: HF.ink }}>{p.t}</div>
                <div style={{ fontSize: 13, color: HF.muted, lineHeight: 1.5, marginTop: 3 }}>{p.c}</div>
              </div>
            </div>
            )}
          </div>
          <div style={{ marginTop: 36 }}>
            <span onClick={() => goNav2('intelligence')} style={{ cursor: 'pointer' }}>
              <HBtn kind="dark" size="lg">Explore Kyndrid Intelligence <HArrow color="#fff" /></HBtn>
            </span>
          </div>
        </div>
        <div style={{ borderRadius: 18, overflow: 'hidden', boxShadow: '0 36px 88px -24px rgba(7,16,31,.30), 0 8px 28px -12px rgba(7,16,31,.12)' }}>
          <Dashboard w={620} />
        </div>
      </div>
    </section>);
}

// ── Lightweight inline table (for Control world cards) ─────────────────────────
function MiniTable({ title, cols, rows }) {
  const badge = { g: [HF.green, HF.greenSoft], a: [HF.amber, '#fff7ed'], r: [HF.red, '#fef2f2'], b: [HF.blue, HF.blueSoft] };
  return (
    <div style={{ background: HF.surface, borderRadius: 14, border: `1px solid ${HF.border}`, overflow: 'hidden', boxShadow: '0 1px 3px rgba(7,16,31,.05)' }}>
      <div style={{ padding: '11px 16px', borderBottom: `1px solid ${HF.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontSize: 12.5, fontWeight: 700, color: HF.ink }}>{title}</span>
        <span style={{ fontSize: 10.5, fontWeight: 600, color: HF.muted, border: `1px solid ${HF.border}`, borderRadius: 6, padding: '3px 8px' }}>Filter ▾</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: cols.map(() => '1fr').join(' '), padding: '8px 16px', background: HF.fill, borderBottom: `1px solid ${HF.border}` }}>
        {cols.map((c) => <span key={c} style={{ fontSize: 9.5, fontWeight: 700, color: HF.muted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{c}</span>)}
      </div>
      {rows.map((row, i) =>
      <div key={i} style={{ display: 'grid', gridTemplateColumns: cols.map(() => '1fr').join(' '), padding: '10px 16px', alignItems: 'center', borderTop: i ? `1px solid ${HF.fill}` : 'none' }}>
        {row.map((cell, j) => {
          if (cell && typeof cell === 'object' && cell.k) {
            const [fg, bg] = badge[cell.k] || badge.b;
            return <span key={j}><span style={{ fontSize: 10.5, fontWeight: 700, color: fg, background: bg, padding: '2px 8px', borderRadius: 5 }}>{cell.t}</span></span>;
          }
          return <span key={j} style={{ fontSize: 12.5, color: j === 0 ? HF.ink : HF.muted, fontWeight: j === 0 ? 600 : 400 }}>{cell}</span>;
        })}
      </div>
      )}
    </div>);
}

// ── ASSET OPS WORLD (Asset Panda style) ────────────────────────────────────────
function ControlWorld() {
  const cards = [
    {
      name: 'Asset Ops', tone: HF.asset, ic: HIC.box, route: 'asset-ops',
      copy: 'Track every asset, site and contractor in one place — from purchase to retirement.',
      points: ['Audit-ready activity trail on every record', 'Maintenance, inspections & work orders', 'Mobile updates and barcode scanning', 'Role-based access by site and team'],
      table: { title: 'Asset register', cols: ['Asset', 'Site', 'Status'], rows: [['Walk-in fridge', 'Riverside', { t: 'In service', k: 'g' }], ['Delivery van TL21', 'Central', { t: 'Maintenance', k: 'a' }], ['Generator', 'Vale', { t: 'Inspection due', k: 'a' }]] },
    },
  ];
  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' }}>
        <HSectionHead align="left" maxW={720}
          eyebrow="Asset Ops · Complex, multi-site operations"
          title="Replace the spreadsheets. Track every asset, cover every audit."
          sub="For organisations that need control — charities, schools, facilities teams, care providers and multi-site groups. One trusted record, one audit trail, one set of permissions." />
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', gap: 24, maxWidth: 880 }}>
          {cards.map((c) =>
          <div key={c.name} style={{ background: HF.surface, border: `1px solid ${HF.border}`, borderRadius: 20, padding: '32px 32px', boxShadow: '0 1px 3px rgba(7,16,31,.05), 0 20px 48px -28px rgba(7,16,31,.18)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <span style={{ width: 50, height: 50, borderRadius: 13, background: c.tone.fg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
                <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">{c.ic}</svg>
              </span>
              <HH3 style={{ fontSize: 22 }}>{c.name}</HH3>
            </div>
            <HBody style={{ fontSize: 15, marginTop: 16, lineHeight: 1.6, color: HF.body }}>{c.copy}</HBody>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 18px', marginTop: 22 }}>
              {c.points.map((p) =>
              <div key={p} style={{ display: 'flex', gap: 9, alignItems: 'flex-start' }}>
                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke={c.tone.fg} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: '0 0 auto', marginTop: 1 }}><path d="M4 12l5 5L20 6" /></svg>
                <span style={{ fontSize: 13, color: HF.body, fontWeight: 600, lineHeight: 1.4 }}>{p}</span>
              </div>
              )}
            </div>
            <div style={{ marginTop: 26 }}><MiniTable {...c.table} /></div>
            <div style={{ marginTop: 24 }} onClick={() => goNav2(c.route)}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 14.5, fontWeight: 700, color: c.tone.fg, cursor: 'pointer' }}>
                Explore {c.name} <HArrow color={c.tone.fg} />
              </span>
            </div>
          </div>
          )}
        </div>
      </div>
    </section>);
}

// ── TWO PLATFORM POSITIONING BAND ─────────────────────────────────────────────
function BackboneBand() {
  const items = [
    { t: 'Asset Ops', c: 'Assets, sites, maintenance, contractors, documents and audits.', ic: HIC.box },
    { t: 'Kyndrid Intelligence', c: 'Sales, stock, labour, staff compliance, dashboards and recommendations.', ic: HIC.chart },
    { t: 'Shared standards', c: 'Consistent permissions, audit discipline and implementation support.', ic: HIC.shield },
    { t: 'Adopt separately', c: 'Start with the platform that solves today’s problem and add the other when useful.', ic: HIC.coins },
  ];
  return (
    <section style={{ padding: '104px 72px 0' }}>
      <div style={{ maxWidth: HF.W, margin: '0 auto' }}>
        <div style={{ background: HF.navy, borderRadius: 24, padding: '60px 56px', backgroundImage: `radial-gradient(ellipse 620px 460px at 82% 50%, rgba(13,173,159,.18) 0%, transparent 55%)` }}>
          <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <HEyebrow color="#3FD6C6">Two platforms</HEyebrow>
              <HH2 style={{ color: '#fff' }}>Asset management and business intelligence, clearly separated.</HH2>
              <HLead style={{ color: '#94a3b8', marginTop: 16, fontSize: 16.5 }}>
                Asset Ops manages the physical and operational estate. Kyndrid Intelligence gives leaders the business view across trading, labour, stock and compliance. They are separate platforms under one Kyndrid brand.
              </HLead>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              {items.map((c) =>
              <div key={c.t} style={{ background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.09)', borderRadius: 14, padding: '18px 18px' }}>
                <span style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(63,214,198,.14)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#5FE3D4' }}>
                  <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">{c.ic}</svg>
                </span>
                <div style={{ fontSize: 14.5, fontWeight: 700, color: '#fff', marginTop: 13 }}>{c.t}</div>
                <div style={{ fontSize: 12.5, color: '#94a3b8', lineHeight: 1.5, marginTop: 5 }}>{c.c}</div>
              </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);
}

// ── INTEGRATIONS ──────────────────────────────────────────────────────────────
function IntegrationsSection() {
  const groups = [
    { h: 'Point of sale', items: ['Square', 'Lightspeed', 'Epos Now', 'Zonal'] },
    { h: 'Accounting', items: ['Xero', 'QuickBooks', 'Sage'] },
    { h: 'Rota & payroll', items: ['Deputy', 'Planday'] },
    { h: 'Delivery', items: ['Deliveroo', 'Uber Eats', 'Just Eat'] },
  ];
  return (
    <section style={{ padding: '104px 72px' }}>
      <div style={{ maxWidth: HF.W, margin: '0 auto' }}>
        <HSectionHead
          eyebrow="Integrations"
          title="Connects with the systems you already use."
          sub="Kyndrid plugs into your POS, inventory, rota, accounting and delivery platforms — so your data flows in automatically, with nothing to re-key." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }}>
          {groups.map((g) =>
          <div key={g.h} style={{ border: `1px solid ${HF.border}`, borderRadius: 16, padding: '22px 22px', background: HF.surface }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: HF.muted, textTransform: 'uppercase', letterSpacing: '0.07em', marginBottom: 14 }}>{g.h}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {g.items.map((it) =>
              <span key={it} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13, fontWeight: 600, color: HF.ink, background: HF.fill, border: `1px solid ${HF.border}`, borderRadius: 9, padding: '7px 12px' }}>
                <span style={{ width: 16, height: 16, borderRadius: 4, background: HF.borderMid }} />{it}
              </span>
              )}
            </div>
          </div>
          )}
        </div>
        <div style={{ textAlign: 'center', marginTop: 32, fontSize: 14, color: HF.muted }}>
          Plus a full REST API and CSV import — <span style={{ color: HF.blue, fontWeight: 700, cursor: 'pointer' }}>see all integrations →</span>
        </div>
      </div>
    </section>);
}

// ── TESTIMONIAL ───────────────────────────────────────────────────────────────
function TestimonialSection() {
  return (
    <section style={{ padding: '0 72px 104px' }}>
      <div style={{ maxWidth: 980, margin: '0 auto', background: HF.fill, border: `1px solid ${HF.border}`, borderRadius: 24, padding: '64px 64px', textAlign: 'center' }}>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 3, marginBottom: 24 }}>
          {[0, 1, 2, 3, 4].map((i) =>
          <svg key={i} width="20" height="20" viewBox="0 0 24 24" fill={HF.blue} stroke="none"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.8 5.9 21.4l1.4-6.8L2.2 9.1l6.9-.8z" /></svg>
          )}
        </div>
        <p style={{ fontSize: 27, lineHeight: 1.45, fontWeight: 700, color: HF.ink, letterSpacing: '-0.5px', margin: 0, textWrap: 'balance' }}>
          "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', justifyContent: 'center', gap: 14, marginTop: 32 }}>
          <span style={{ width: 48, height: 48, borderRadius: 99, background: HF.borderMid }} />
          <div style={{ textAlign: 'left' }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: HF.ink }}>Sarah Whitfield</div>
            <div style={{ fontSize: 13.5, color: HF.muted }}>Operations Director · Harbour &amp; Co (14 sites)</div>
          </div>
        </div>
      </div>
    </section>);
}

// ── FULL PAGE (overrides hf-home.jsx KyndridHomepage) ──────────────────────────
function KyndridHomepage() {
  return (
    <div style={{ fontFamily: HF.font, background: HF.surface, minWidth: 1140 }}>
      <HNav active="home" />
      <HeroSection />
      <HLogoStrip />
      <StatsBand />
      <ProductExplorerSection />
      <BackboneBand />
      <IntegrationsSection />
      <TestimonialSection />
      <PricingSection />
      <CTASection />
      <HFooter />
    </div>);
}

Object.assign(window, {
  StatsBand, IntelligenceWorld, ControlWorld, BackboneBand,
  IntegrationsSection, TestimonialSection, MiniTable,
  KyndridHomepage,
});
