// hf-products.jsx — Hi-fi product pages: Overview, Intelligence, Asset Ops

// ── Extra icon paths needed for product pages ──────────────────────────────────
const HPIC = {
  rota:   <><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M3 9h18M8 2v4M16 2v4M8 14h2M14 14h2M8 18h2"/></>,
  award:  <><circle cx="12" cy="9" r="5"/><path d="M9 13l-2 8 5-3 5 3-2-8"/></>,
  swap:   <><path d="M4 8h13l-3-3M20 16H7l3 3"/></>,
  search: <><circle cx="11" cy="11" r="6"/><path d="M16 16l5 5"/></>,
  pin:    HIC.pin,
};

// ── Asset + people/compliance feature data ─────────────────────────────────────
const HASSET_FEATURES = [
  { n: 'Asset Register',  ic: HIC.box,      c: 'A single record of every asset, its value, location and lifecycle.' },
  { n: 'Sites',           ic: HIC.pin,      c: 'Organise assets, people and activity by site and location.' },
  { n: 'Contractors',     ic: HIC.users,    c: 'Approved contractors, scopes, documents and performance records.' },
  { n: 'Expenses',        ic: HIC.coins,    c: 'Capture and approve spend against assets and sites.' },
  { n: 'Maintenance',     ic: HIC.wrench,   c: 'Planned and reactive maintenance schedules and history.' },
  { n: 'Inspections',     ic: HIC.eye,      c: 'Recurring inspections, checklists and pass/fail outcomes.' },
  { n: 'Documents',       ic: HIC.doc,      c: 'Warranties, certificates and manuals attached to each asset.' },
  { n: 'Transfers',       ic: HPIC.swap,    c: 'Move assets between sites with a full chain of custody.' },
  { n: 'Audit Trail',     ic: HIC.shield,   c: 'Every change recorded — who, what and when.' },
];

// ── Hi-fi table preview (used on product heroes) ───────────────────────────────
function HTablePreview({ title, cols, rows }) {
  const badge = { g: [HF.green, HF.greenSoft], a: [HF.amber, HF.amberSoft], b: [HF.blue, HF.blueSoft], r: [HF.red, '#fef2f2'] };
  return (
    <div style={{
      background: HF.surface, borderRadius: 18, border: `1px solid ${HF.border}`,
      boxShadow: '0 28px 70px -20px rgba(7,16,31,.22), 0 6px 20px -10px rgba(7,16,31,.10)',
      overflow: 'hidden', fontFamily: HF.font,
    }}>
      <div style={{ padding: '14px 20px', borderBottom: `1px solid ${HF.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: HF.fill }}>
        <span style={{ fontSize: 14, fontWeight: 700, color: HF.ink }}>{title}</span>
        <span style={{ fontSize: 11.5, fontWeight: 600, color: HF.muted, border: `1px solid ${HF.border}`, borderRadius: 7, padding: '4px 10px' }}>Filter ▾</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: cols.map(() => '1fr').join(' '), padding: '9px 20px', background: HF.fill, borderBottom: `1px solid ${HF.border}` }}>
        {cols.map(c => <span key={c} style={{ fontSize: 10.5, fontWeight: 700, color: HF.muted, textTransform: 'uppercase', letterSpacing: '0.07em' }}>{c}</span>)}
      </div>
      {rows.map((row, i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: cols.map(() => '1fr').join(' '), padding: '13px 20px', 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: 11.5, fontWeight: 700, color: fg, background: bg, padding: '3px 10px', borderRadius: 6 }}>{cell.t}</span></span>;
            }
            return <span key={j} style={{ fontSize: 13.5, color: j === 0 ? HF.ink : HF.muted, fontWeight: j === 0 ? 600 : 400 }}>{cell}</span>;
          })}
        </div>
      ))}
    </div>
  );
}

// ── Product tab switcher ───────────────────────────────────────────────────────
function HProductTabs({ active }) {
  const go = (r) => { if (window.__nav) window.__nav(r); };
  const tabs = [
    { label: 'Kyndrid Intelligence', route: 'intelligence', tone: HF.intel },
    { label: 'Asset Ops',            route: 'asset-ops',    tone: HF.asset },
  ];
  return (
    <div style={{ display: 'flex', gap: 8, padding: '14px 48px', borderBottom: `1px solid ${HF.border}`, background: HF.surface }}>
      {tabs.map(t => {
        const isActive = t.route === active;
        return (
          <span key={t.label} onClick={() => go(t.route)} style={{
            fontSize: 13.5, fontWeight: 700, padding: '8px 16px', borderRadius: 9,
            color: isActive ? t.tone.fg : HF.muted,
            background: isActive ? t.tone.bg : 'transparent',
            border: `1px solid ${isActive ? t.tone.bd : 'transparent'}`,
            cursor: 'pointer',
          }}>{t.label}</span>
        );
      })}
    </div>
  );
}

// ── Shared: feature grid ───────────────────────────────────────────────────────
function HFeatureGrid({ items, cols = 3 }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols},1fr)`, gap: 16 }}>
      {items.map(f => (
        <div key={f.n} style={{ background: HF.surface, border: `1px solid ${HF.border}`, borderRadius: 14, padding: 22 }}>
          <HGlyph d={f.ic} box={42} size={21} />
          <HH3 style={{ fontSize: 16.5, marginTop: 14 }}>{f.n}</HH3>
          <HBody style={{ marginTop: 7, fontSize: 13.5 }}>{f.c}</HBody>
        </div>
      ))}
    </div>
  );
}

// ── Shared: product page tail ──────────────────────────────────────────────────
function HProductTail() {
  return (
    <>
      <section style={{ padding: '0 72px 96px' }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto' }}>
          <div style={{
            background: HF.navy, borderRadius: 24, padding: '72px 72px', textAlign: 'center',
            backgroundImage: `radial-gradient(ellipse 700px 500px at 50% -10%, rgba(35,81,212,.2) 0%, transparent 58%)`,
          }}>
            <HH2 style={{ color: '#fff', fontSize: 44 }}>Ready to see your operations clearly?</HH2>
            <HLead style={{ color: '#94a3b8', margin: '20px auto 0', maxWidth: 500 }}>Book a demo and explore how Kyndrid can support your organisation.</HLead>
            <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 36 }}>
              <HBtn kind="primary" size="lg">Book a demo</HBtn>
              <HBtn kind="outlineLight" size="lg">Explore products</HBtn>
            </div>
          </div>
        </div>
      </section>
      <HFooter />
    </>
  );
}

// ── PRODUCTS OVERVIEW ──────────────────────────────────────────────────────────
function ProductsOverviewPage() {
  const go = (r) => { if (window.__nav) window.__nav(r); };
  const coreItems = [
    ['Single sign-on', HIC.shield], ['Unified audit trail', HIC.doc],
    ['Role-based access', HIC.users], ['One dashboard layer', HIC.grid],
  ];
  return (
    <div style={{ fontFamily: HF.font, background: HF.surface }}>
      <HNav active="products" />
      {/* hero */}
      <section style={{ padding: '72px 72px 56px', background: HF.fill, borderBottom: `1px solid ${HF.border}` }}>
        <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
          <HEyebrow>Products</HEyebrow>
          <HH1 style={{ fontSize: 52 }}>Two focused platforms for operational control.</HH1>
          <HLead style={{ margin: '20px auto 0', maxWidth: 600 }}>
            Asset Ops manages assets, sites, maintenance and audits. Kyndrid Intelligence brings business intelligence across trading, labour, stock, staff compliance and recommendations.
          </HLead>
        </div>
      </section>
      {/* suite cards */}
      <section style={{ padding: '64px 72px 56px' }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 20 }}>
          {HSUITE.map(p => {
            const t = p.tone;
            const route = p.name === 'Kyndrid Intelligence' ? 'intelligence' : 'asset-ops';
            return (
              <div key={p.name} onClick={() => go(route)} style={{
                background: HF.surface, border: `1px solid ${HF.border}`, borderRadius: 18,
                padding: '28px 28px 24px', boxShadow: '0 1px 4px rgba(7,16,31,.05)',
                display: 'flex', flexDirection: 'column', cursor: 'pointer',
                borderTop: `4px solid ${t.fg}`,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <HGlyph d={p.ic} box={46} size={23} color={t.fg} bg={t.bg} />
                  {p.tag && <span style={{ fontSize: 10.5, fontWeight: 700, color: HF.blue, background: HF.blueSoft, padding: '4px 10px', borderRadius: 6, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{p.tag}</span>}
                </div>
                <HH3 style={{ marginTop: 18 }}>{p.name}</HH3>
                <HBody style={{ marginTop: 10, fontSize: 14, flex: 1 }}>{p.copy}</HBody>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 16 }}>
                  <span style={{ fontSize: 10.5, fontWeight: 700, color: HF.muted, textTransform: 'uppercase', letterSpacing: '0.06em', alignSelf: 'center' }}>Best for</span>
                  {p.best.slice(0,3).map(b => <span key={b} style={{ fontSize: 11.5, fontWeight: 600, color: t.fg, background: t.bg, border: `1px solid ${t.bd}`, borderRadius: 99, padding: '3px 10px' }}>{b}</span>)}
                </div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 20, fontSize: 14, fontWeight: 700, color: t.fg }}>
                  Learn more <HArrow />
                </div>
              </div>
            );
          })}
        </div>
      </section>
      {/* shared core band */}
      <section style={{ padding: '0 72px 64px' }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto', background: HF.fill, border: `1px solid ${HF.border}`, borderRadius: 20, padding: '48px 56px' }}>
          <HSectionHead eyebrow="Kyndrid system" title="Distinct platforms. Consistent standards." sub="Each platform has its own job, while Kyndrid keeps the experience, permissions, audit discipline and implementation approach consistent." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }}>
            {coreItems.map(([t, ic]) => (
              <div key={t} style={{ background: HF.surface, border: `1px solid ${HF.border}`, borderRadius: 12, padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 14 }}>
                <HGlyph d={ic} box={40} size={20} />
                <span style={{ fontSize: 14.5, fontWeight: 700, color: HF.ink }}>{t}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
      {/* sectors */}
      <section style={{ padding: '0 72px 96px' }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto' }}>
          <HSectionHead eyebrow="Sectors" title="Used across hospitality, retail, charities and more." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 16 }}>
            {HSECTORS.map(s => (
              <div key={s.n} style={{ border: `1px solid ${HF.border}`, borderRadius: 16, padding: '24px 22px', background: HF.surface }}>
                <HGlyph d={s.ic} box={42} size={21} />
                <HH3 style={{ fontSize: 15.5, marginTop: 14 }}>{s.n}</HH3>
                <HBody style={{ marginTop: 7, fontSize: 13.5 }}>{s.c}</HBody>
              </div>
            ))}
          </div>
        </div>
      </section>
      <HProductTail />
    </div>
  );
}

// ── KYNDRID INTELLIGENCE ───────────────────────────────────────────────────────
function IntelligencePage() {
  const sectorUse = [
    { t: 'Hospitality', c: 'Balance labour against covers, cut wastage and protect margin across every service.', ic: HIC.store, tone: HF.intel },
    { t: 'Retail', c: 'Track sales, stock and supplier spend across shops and specialist lines.', ic: HIC.building, tone: HF.asset },
    { t: 'Convenience', c: 'Keep shelves stocked, compliance current and margins healthy across busy sites.', ic: HIC.box, tone: HF.intel },
  ];
  return (
    <div style={{ fontFamily: HF.font, background: HF.surface }}>
      <HNav active="intelligence" />
      <HProductTabs active="intelligence" />
      {/* hero */}
      <section style={{ padding: '72px 72px 80px', background: HF.fill, borderBottom: `1px solid ${HF.border}` }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 72, alignItems: 'center' }}>
          <div>
            <HEyebrow>Kyndrid Intelligence · Lead product</HEyebrow>
            <HH1 style={{ fontSize: 50 }}>Turn daily operations into decisions.</HH1>
            <HLead style={{ marginTop: 22 }}>Understand sales, stock, labour, staff compliance and performance in one business intelligence platform — with recommendations that tell you what to do next.</HLead>
            <div style={{ display: 'flex', gap: 14, marginTop: 30 }}>
              <HBtn kind="primary" size="lg">Book a demo</HBtn>
              <HBtn kind="outline" size="lg">Talk to sales</HBtn>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <div style={{ borderRadius: 18, overflow: 'hidden', boxShadow: '0 32px 80px -20px rgba(7,16,31,.28), 0 8px 28px -12px rgba(7,16,31,.12)' }}>
              <Dashboard w={580} compact />
            </div>
          </div>
        </div>
      </section>
      {/* capabilities */}
      <section style={{ padding: '88px 72px', background: HF.surface }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto' }}>
          <HSectionHead eyebrow="Capabilities" title="Everything operators need to see, understand and act." sub="Trading, labour, people compliance and recommendations in one operational picture." />
          <HFeatureGrid items={HFEATURES} cols={3} />
        </div>
      </section>
      {/* wide dashboard */}
      <section style={{ padding: '0 72px 88px', background: HF.fill, borderTop: `1px solid ${HF.border}`, borderBottom: `1px solid ${HF.border}`, paddingTop: 88 }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto' }}>
          <HSectionHead eyebrow="Example dashboard" title="A clear, credible operating picture." sub="Live metrics, demand forecasts, alerts and recommendations — without the clutter." />
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div style={{ borderRadius: 18, overflow: 'hidden', boxShadow: '0 24px 64px -16px rgba(7,16,31,.2)' }}>
              <Dashboard w={1050} />
            </div>
          </div>
        </div>
      </section>
      {/* who it's for */}
      <section style={{ padding: '88px 72px' }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto' }}>
          <HSectionHead eyebrow="Who it's for" title="Built for hospitality, retail and convenience." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
            {sectorUse.map(s => (
              <div key={s.t} style={{ border: `1px solid ${HF.border}`, borderRadius: 18, padding: 28, borderTop: `4px solid ${s.tone.fg}` }}>
                <HGlyph d={s.ic} box={48} size={24} color={s.tone.fg} bg={s.tone.bg} />
                <HH3 style={{ marginTop: 16 }}>{s.t}</HH3>
                <HBody style={{ marginTop: 8, fontSize: 14.5 }}>{s.c}</HBody>
              </div>
            ))}
          </div>
        </div>
      </section>
      <HProductTail />
    </div>
  );
}

// ── GENERIC OPS PRODUCT PAGE ───────────────────────────────────────────────────
function HOpsProductPage({ route, name, headline, sub, features, heroVisual, benefit }) {
  const tone = HF.asset;
  return (
    <div style={{ fontFamily: HF.font, background: HF.surface }}>
      <HNav active={route} />
      <HProductTabs active={route} />
      {/* hero */}
      <section style={{ padding: '72px 72px 80px', background: HF.fill, borderBottom: `1px solid ${HF.border}` }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 72, alignItems: 'center' }}>
          <div>
            <HEyebrow color={tone.fg}>{name}</HEyebrow>
            <HH1 style={{ fontSize: 48 }}>{headline}</HH1>
            <HLead style={{ marginTop: 22 }}>{sub}</HLead>
            <div style={{ display: 'flex', gap: 14, marginTop: 30 }}>
              <HBtn kind="primary" size="lg">Book a demo</HBtn>
              <HBtn kind="outline" size="lg">Talk to sales</HBtn>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>{heroVisual}</div>
        </div>
      </section>
      {/* capabilities */}
      <section style={{ padding: '88px 72px' }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto' }}>
          <HSectionHead eyebrow="Capabilities" title={`Everything ${name} brings together.`} sub="A connected toolset with a shared audit trail and role-based access." />
          <HFeatureGrid items={features} cols={3} />
        </div>
      </section>
      {/* benefit split */}
      <section style={{ padding: '0 72px 96px' }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto', background: HF.fill, border: `1px solid ${HF.border}`, borderRadius: 20 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, padding: '64px 64px', alignItems: 'center' }}>
            <div>
              <HEyebrow color={tone.fg}>Why teams choose it</HEyebrow>
              <HH2>{benefit.t}</HH2>
              <HLead style={{ marginTop: 16 }}>{benefit.c}</HLead>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 28 }}>
                {benefit.points.map(p => (
                  <div key={p} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={HF.green} strokeWidth="2.2" strokeLinecap="round"><path d="M4 12l5 5L20 6"/></svg>
                    <span style={{ fontSize: 15, fontWeight: 600, color: HF.body }}>{p}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>{heroVisual}</div>
          </div>
        </div>
      </section>
      <HProductTail />
    </div>
  );
}

function AssetOpsPage() {
  return (
    <HOpsProductPage
      route="asset-ops"
      name="Asset Ops"
      headline="Better control over every asset and site."
      sub="Asset, site, contractor, expense, maintenance and audit management for organisations that need better control — charities, schools, facilities teams and multi-site SMEs."
      features={HASSET_FEATURES}
      heroVisual={
        <HTablePreview
          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' }],
            ['POS terminal #4', 'Harbour', { t: 'In service', k: 'g' }],
            ['Generator', 'Vale', { t: 'Inspection due', k: 'a' }],
          ]}
        />
      }
      benefit={{
        t: 'One trusted record for every asset.',
        c: 'Replace spreadsheets and disconnected logs with a single register, audit trail and maintenance history.',
        points: ['Full chain of custody on transfers', 'Documents attached to every asset', 'Inspection and maintenance scheduling', 'Spend tracked against each site'],
      }}
    />
  );
}

Object.assign(window, {
  HTablePreview, HProductTabs, HFeatureGrid, HProductTail,
  ProductsOverviewPage, IntelligencePage, AssetOpsPage,
});