// hf-explorer.jsx — Interactive 2-way product explorer for the homepage.
// Two-way split selector (Intelligence / Asset Ops). Selecting one
// re-themes and re-populates the panel below: value prop, capabilities, live
// dashboard snapshot, best-for sectors and CTA.
// Loads AFTER hf.jsx, hf-data.jsx, hero-carousel.jsx.

const EXPLORER = [
  {
    key: 'intelligence',
    name: 'Kyndrid Intelligence',
    short: 'Intelligence',
    role: 'Trading, labour, staff & compliance intelligence',
    tone: HF.intel,
    headline: 'Turn daily trading into decisions.',
    desc: 'An operational intelligence layer for hospitality, retail and convenience — sales, stock, labour, staff compliance and recommendations in one live view that shows what needs attention, and what to do next.',
    caps: [
      { n: 'Sales & Demand', ic: HIC.chart, c: 'Sales by site, hour and channel against live demand forecasts.' },
      { n: 'Inventory', ic: HIC.box, c: 'Stock levels, wastage and reorder points across locations.' },
      { n: 'Labour', ic: HIC.users, c: 'Labour cost as a share of sales, with overspend alerts.' },
      { n: 'Staff Records', ic: HIC.users, c: 'People records, roles and site access in the same operating layer.' },
      { n: 'Training & Compliance', ic: HIC.shield, c: 'Certification, training and recurring checks with evidence and alerts.' },
      { n: 'Menu Intelligence', ic: HIC.menu, c: 'See which items drive margin and which lose money.' },
      { n: 'Recommendations', ic: HIC.bulb, c: 'Clear next best actions on stock, labour and pricing.' },
    ],
    best: ['Hospitality', 'Retail', 'Convenience Stores'],
    render: (w) => <DashIntelligence w={w} />,
  },
  {
    key: 'asset',
    name: 'Kyndrid Asset Ops',
    short: 'Asset Ops',
    role: 'Assets, sites, maintenance & audit control',
    tone: HF.asset,
    headline: 'Take control of every asset and site.',
    desc: 'Asset, site, contractor, expense, maintenance and audit management for organisations that need better control — with a single register and a defensible audit trail across every location.',
    caps: [
      { n: 'Asset Register', ic: HIC.box, c: 'One 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: 'Maintenance', ic: HIC.wrench, c: 'Planned and reactive maintenance schedules and history.' },
      { n: 'Inspections', ic: HIC.search, c: 'Recurring inspections, checklists and pass/fail outcomes.' },
      { n: 'Transfers', ic: HIC.swap, c: 'Move assets between sites with a full chain of custody.' },
      { n: 'Audit Trail', ic: HIC.doc, c: 'Every change recorded — who, what and when.' },
    ],
    best: ['Charities', 'Multi-site', 'Facilities', 'Schools'],
    render: (w) => <DashAssetOps w={w} />,
  },
];

function ProductIdentityLockup({ prod }) {
  const identity = HPRODUCT_IDENTITY && HPRODUCT_IDENTITY[prod.key];
  const icon = identity ? identity.icon : prod.key === 'asset' ? HIC.box : HIC.chart;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <span style={{
        width: 36, height: 36, borderRadius: 10, background: prod.tone.bg,
        border: `1px solid ${prod.tone.bd}`, color: prod.tone.fg,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{icon}</svg>
      </span>
      <span style={{ fontSize: 16, fontWeight: 800, color: HF.ink, letterSpacing: '-0.2px' }}>{prod.name}</span>
    </span>
  );
}

function ProductExplorer() {
  const [active, setActive] = React.useState(0);
  const p = EXPLORER[active];
  const t = p.tone;

  return (
    <div>
      {/* ── two-way split selector ─────────────────────────────────── */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 16 }}>
        {EXPLORER.map((prod, i) => {
          const on = i === active;
          const pt = prod.tone;
          return (
            <button
              key={prod.key}
              onClick={() => setActive(i)}
              style={{
                position: 'relative', textAlign: 'left', cursor: 'pointer',
                fontFamily: HF.font, padding: '22px 24px',
                borderRadius: 16, overflow: 'hidden',
                background: on ? pt.bg : HF.surface,
                border: `1.5px solid ${on ? pt.fg : HF.border}`,
                boxShadow: on
                  ? '0 18px 40px -24px rgba(7,16,31,.28), 0 2px 8px rgba(7,16,31,.05)'
                  : '0 1px 3px rgba(7,16,31,.04)',
                transform: on ? 'translateY(-2px)' : 'none',
              }}
            >
              <span style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 4, background: on ? pt.fg : 'transparent' }} />
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <ProductIdentityLockup prod={prod} />
                <span style={{
                  width: 22, height: 22, borderRadius: 11, flex: '0 0 auto',
                  border: `2px solid ${on ? pt.fg : HF.borderMid}`,
                  background: on ? pt.fg : 'transparent',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {on && <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M2.5 6.2l2.3 2.3 4.7-5" /></svg>}
                </span>
              </div>
              <div style={{ fontSize: 13.5, color: HF.body, marginTop: 14, lineHeight: 1.45, fontWeight: 500 }}>{prod.role}</div>
            </button>
          );
        })}
      </div>

      {/* ── re-theming detail panel ──────────────────────────────────── */}
      <div key={p.key} style={{
        marginTop: 20,
        border: `1px solid ${HF.border}`, borderRadius: 22, overflow: 'hidden',
        background: HF.surface, boxShadow: '0 1px 3px rgba(7,16,31,.05), 0 30px 60px -40px rgba(7,16,31,.22)',
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '0.92fr 1.08fr' }}>
          {/* left: value prop + caps */}
          <div style={{ padding: '44px 44px 40px', borderRight: `1px solid ${HF.border}` }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 11.5, fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase', color: t.fg, background: t.bg, border: `1px solid ${t.bd}`, borderRadius: 99, padding: '5px 12px' }}>
              <span style={{ width: 7, height: 7, borderRadius: 4, background: t.fg }} />
              {p.short}
            </div>
            <HH2 style={{ fontSize: 32, marginTop: 18, letterSpacing: '-0.9px' }}>{p.headline}</HH2>
            <HLead style={{ marginTop: 14, fontSize: 16 }}>{p.desc}</HLead>

            {/* capability grid */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px 22px', marginTop: 30 }}>
              {p.caps.map((c) => (
                <div key={c.n} style={{ display: 'flex', gap: 12 }}>
                  <span style={{ flex: '0 0 auto', width: 38, height: 38, borderRadius: 10, background: t.bg, border: `1px solid ${t.bd}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: t.fg }}>
                    <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>
                    <div style={{ fontSize: 14.5, fontWeight: 700, color: HF.ink }}>{c.n}</div>
                    <div style={{ fontSize: 12.5, color: HF.muted, lineHeight: 1.45, marginTop: 3 }}>{c.c}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* best-for + CTA */}
            <div style={{ marginTop: 34, paddingTop: 26, borderTop: `1px solid ${HF.border}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
              <div>
                <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase', color: HF.muted, marginBottom: 9 }}>Best for</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
                  {p.best.map((b) => (
                    <span key={b} style={{ fontSize: 12, fontWeight: 600, color: t.fg, background: t.bg, border: `1px solid ${t.bd}`, borderRadius: 99, padding: '5px 12px' }}>{b}</span>
                  ))}
                </div>
              </div>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer',
                fontSize: 14.5, fontWeight: 700, color: '#fff', background: t.fg,
                borderRadius: 11, padding: '13px 22px', whiteSpace: 'nowrap',
              }}>
                Explore {p.short} <HArrow color="#fff" />
              </span>
            </div>
          </div>

          {/* right: live dashboard snapshot */}
          <div style={{
            padding: '44px 44px', display: 'flex', flexDirection: 'column',
            background: `linear-gradient(160deg, ${t.bg} 0%, ${HF.fill} 70%)`,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20, position: 'relative', zIndex: 1 }}>
              <span style={{ fontSize: 12, fontWeight: 700, color: HF.body, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 7, height: 7, borderRadius: 4, background: HF.green }} />
                Live snapshot
              </span>
              <span style={{ fontSize: 11.5, fontWeight: 600, color: HF.muted }}>{p.short} dashboard</span>
            </div>
            <div style={{ position: 'relative', zIndex: 1, transform: 'scale(0.96)', transformOrigin: 'top center' }}>
              {p.render(540)}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ProductExplorerSection() {
  return (
    <section style={{ padding: '100px 72px', borderTop: `1px solid ${HF.border}` }}>
      <div style={{ maxWidth: HF.W, margin: '0 auto' }}>
        <HSectionHead
          eyebrow="Two product tracks"
          title="Two clear platforms for two different jobs."
          sub="Choose Kyndrid Intelligence for business intelligence across trading, labour and compliance, or Asset Ops for assets, sites, maintenance and audit control."
        />
        <ProductExplorer />
      </div>
    </section>
  );
}

Object.assign(window, { ProductExplorer, ProductExplorerSection, EXPLORER, ProductIdentityLockup });