// hf-pages.jsx — Hi-fi supporting pages: Sectors, Pricing, Contact

// ── SECTORS FIT MATRIX ────────────────────────────────────────────────────────
function HFitMatrix() {
  const colW = ['1.1fr', '1.6fr', '1fr', '1.4fr'];
  return (
    <div style={{ border: `1px solid ${HF.border}`, borderRadius: 18, overflow: 'hidden', background: HF.surface, boxShadow: '0 1px 4px rgba(7,16,31,.05)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: colW.join(' '), background: HF.navy, padding: '14px 24px' }}>
        {['Sector', 'Recommended', 'Optional', 'Primary use case'].map(h => (
          <span key={h} style={{ fontSize: 11.5, fontWeight: 700, color: '#fff', letterSpacing: '0.04em' }}>{h}</span>
        ))}
      </div>
      {HSTACKS.map((s, i) => (
        <div key={s.n} style={{
          display: 'grid', gridTemplateColumns: colW.join(' '),
          padding: '18px 24px', borderTop: `1px solid ${HF.border}`,
          alignItems: 'center', background: i % 2 ? HF.fill : HF.surface,
        }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14.5, fontWeight: 700, color: HF.ink }}>
            <HGlyph d={s.ic} box={32} size={16} />
            {s.n}
          </span>
          <span style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {s.rec.map(p => {
              const t = p === 'Kyndrid Intelligence' ? HF.intel : p === 'Asset Ops' ? HF.asset : HF.staff;
              return <span key={p} style={{ fontSize: 11.5, fontWeight: 700, color: t.fg, background: t.bg, border: `1px solid ${t.bd}`, borderRadius: 7, padding: '3px 9px' }}>{p}</span>;
            })}
          </span>
          <span style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {s.opt ? s.opt.map(p => (
              <span key={p} style={{ fontSize: 11.5, fontWeight: 600, color: HF.muted, border: `1px dashed ${HF.borderMid}`, borderRadius: 7, padding: '3px 9px' }}>{p}</span>
            )) : <span style={{ color: HF.muted, fontSize: 13 }}>—</span>}
          </span>
          <span style={{ fontSize: 13.5, color: HF.body, lineHeight: 1.5 }}>{s.use}</span>
        </div>
      ))}
    </div>
  );
}

// ── SECTORS PAGE ──────────────────────────────────────────────────────────────
function HSectorsPage() {
  return (
    <div style={{ fontFamily: HF.font, background: HF.surface }}>
      <HNav active="sectors" />
      {/* hero */}
      <section style={{ padding: '72px 72px 64px', background: HF.fill, borderBottom: `1px solid ${HF.border}` }}>
        <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
          <HEyebrow>Sectors</HEyebrow>
          <HH1 style={{ fontSize: 52 }}>Built for real-world operators.</HH1>
          <HLead style={{ margin: '20px auto 0', maxWidth: 600 }}>
            Kyndrid is modular — every sector leads with a different stack. Choose yours to see what we recommend and where the other products fit.
          </HLead>
        </div>
      </section>
      {/* interactive selector */}
      <section style={{ padding: '80px 72px' }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto' }}>
          <HSectionHead eyebrow="Choose your sector" title="Find the right stack for your organisation." sub="Select a sector to see the recommended products and why they fit." />
          <HSectorSelector />
        </div>
      </section>
      {/* at-a-glance matrix */}
      <section style={{ padding: '0 72px 96px' }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto' }}>
          <HSectionHead eyebrow="At a glance" title="Every sector, every product." sub="Recommended and optional products by sector, with the primary use case for each." />
          <HFitMatrix />
        </div>
      </section>
      <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 }}>Not sure where to start?</HH2>
            <HLead style={{ color: '#94a3b8', margin: '20px auto 0', maxWidth: 480 }}>Tell us how you operate and we'll recommend the right Kyndrid products for 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 />
    </div>
  );
}

// ── PRICING PAGE ──────────────────────────────────────────────────────────────
function HPricingPage() {
  const [annual, setAnnual] = React.useState(false);
  const plans = [
    {
      name: 'Single product', tag: 'Start here', kind: 'outline',
      price: annual ? '£71' : '£89', unit: '/site / mo',
      desc: 'Pick one product and get started quickly.',
      feats: ['One product (Intelligence or Asset Ops)', 'Core dashboards & reports', 'Up to 5 users', 'Email support', 'Standard integrations'],
    },
    {
      name: 'Multi-product', tag: 'Most popular', kind: 'primary', featured: true,
      price: annual ? '£183' : '£229', unit: '/site / mo',
      desc: 'Use both Kyndrid platforms together where your operation needs both.',
      feats: ['Any two or more products', 'Shared audit trail & access', 'Unlimited dashboards', 'Up to 25 users', 'Priority support', 'Advanced integrations'],
    },
    {
      name: 'Enterprise', tag: 'Custom', kind: 'dark',
      price: 'Custom', unit: '',
      desc: 'For multi-site groups with bespoke needs.',
      feats: ['All products, unlimited sites', 'SSO & advanced permissions', 'Custom integrations & API', 'Dedicated success manager', 'SLA & onboarding support'],
    },
  ];
  const faqs = [
    ['How is pricing calculated?', 'By product and number of sites. Combine products for bundle pricing.'],
    ['Can we start with one product?', 'Yes. Begin with Asset Ops or Kyndrid Intelligence, then add the other platform later if it fits.'],
    ['Is there a setup fee?', 'Standard onboarding is included. Enterprise onboarding is scoped per organisation.'],
    ['Do charities get special pricing?', 'Yes — discounted plans are available for registered charities and NGOs.'],
  ];
  return (
    <div style={{ fontFamily: HF.font, background: HF.surface }}>
      <HNav active="pricing" />
      {/* 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>Pricing</HEyebrow>
          <HH1 style={{ fontSize: 52 }}>Start with what you need. Add more as you grow.</HH1>
          <HLead style={{ margin: '20px auto 0', maxWidth: 580 }}>Modular pricing by product and site. Begin with a single product and add others whenever you're ready.</HLead>
          {/* billing toggle */}
          <div style={{ display: 'inline-flex', gap: 4, marginTop: 28, background: HF.fillMid, borderRadius: 12, padding: 4, border: `1px solid ${HF.border}` }}>
            {[['Monthly', false], ['Annual · save 20%', true]].map(([label, val]) => (
              <span key={label} onClick={() => setAnnual(val)} style={{
                fontSize: 13.5, fontWeight: 700, padding: '9px 18px', borderRadius: 9,
                background: annual === val ? HF.surface : 'transparent',
                color: annual === val ? HF.ink : HF.muted,
                boxShadow: annual === val ? '0 1px 3px rgba(7,16,31,.08)' : 'none',
                cursor: 'pointer', transition: 'all .15s',
              }}>{label}</span>
            ))}
          </div>
        </div>
      </section>
      {/* plan cards */}
      <section style={{ padding: '64px 72px 56px' }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, alignItems: 'start' }}>
          {plans.map(p => (
            <div key={p.name} style={{
              border: `${p.featured ? 2 : 1}px solid ${p.featured ? HF.blue : HF.border}`,
              borderRadius: 20, padding: 32, background: HF.surface, position: 'relative',
              boxShadow: p.featured ? '0 8px 32px rgba(35,81,212,.14)' : '0 1px 4px rgba(7,16,31,.05)',
            }}>
              {p.featured && (
                <span style={{
                  position: 'absolute', top: -1, right: 22, fontSize: 10.5, fontWeight: 700,
                  color: '#fff', background: HF.blue, padding: '4px 12px',
                  borderRadius: '0 0 8px 8px', letterSpacing: '0.05em', textTransform: 'uppercase',
                }}>Popular</span>
              )}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <HH3 style={{ fontSize: 19 }}>{p.name}</HH3>
                <span style={{
                  fontSize: 10.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em',
                  color: p.featured ? '#fff' : HF.muted,
                  background: p.featured ? HF.blue : HF.fill,
                  padding: '4px 9px', borderRadius: 6,
                }}>{p.tag}</span>
              </div>
              <div style={{ marginTop: 20, display: 'flex', alignItems: 'baseline', gap: 4 }}>
                <span style={{ fontSize: 38, fontWeight: 800, color: HF.ink, letterSpacing: '-1.4px' }}>{p.price}</span>
                <span style={{ fontSize: 13.5, color: HF.muted }}>{p.unit}</span>
              </div>
              <HBody style={{ marginTop: 10, fontSize: 14 }}>{p.desc}</HBody>
              <div style={{ margin: '20px 0', height: 1, background: HF.border }} />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {p.feats.map(f => (
                  <div key={f} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke={HF.green} strokeWidth="2.2" strokeLinecap="round" style={{ marginTop: 1, flex: '0 0 auto' }}><path d="M4 12l5 5L20 6"/></svg>
                    <span style={{ fontSize: 13.5, color: HF.body, lineHeight: 1.45 }}>{f}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 28 }}>
                <HBtn kind={p.kind} size="lg" style={{ width: '100%', justifyContent: 'center' }}>
                  {p.name === 'Enterprise' ? 'Talk to sales' : 'Get started'}
                </HBtn>
              </div>
            </div>
          ))}
        </div>
      </section>
      {/* modular add-ons */}
      <section style={{ padding: '0 72px 56px' }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto', background: HF.fill, border: `1px solid ${HF.border}`, borderRadius: 20, padding: '48px 56px' }}>
          <HSectionHead eyebrow="Modular by design" title="Mix the products you need." sub="Pricing scales by product and site. Add or remove at any time — your data, access and audit trail stay connected." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }}>
            {HSUITE.map((p, i) => {
              const t = p.tone;
              return (
                <div key={p.name} style={{ border: `1px solid ${HF.border}`, borderRadius: 14, padding: 24, background: HF.surface }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <HGlyph d={p.ic} box={38} size={19} color={t.fg} bg={t.bg} />
                    <HH3 style={{ fontSize: 15.5 }}>{p.name}</HH3>
                  </div>
                  <div style={{ marginTop: 16, display: 'flex', alignItems: 'baseline', gap: 4 }}>
                    <span style={{ fontSize: 13, color: HF.muted }}>from</span>
                    <span style={{ fontSize: 28, fontWeight: 800, color: HF.ink, letterSpacing: '-0.8px' }}>£{[149, 99, 89][i]}</span>
                    <span style={{ fontSize: 13, color: HF.muted }}>/mo</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
      {/* FAQ */}
      <section style={{ padding: '0 72px 96px' }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto' }}>
          <HSectionHead eyebrow="FAQ" title="Common pricing questions." />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, maxWidth: 1000, margin: '0 auto' }}>
            {faqs.map(([q, a]) => (
              <div key={q} style={{ border: `1px solid ${HF.border}`, borderRadius: 14, padding: 24, background: HF.surface }}>
                <HH3 style={{ fontSize: 16 }}>{q}</HH3>
                <HBody style={{ marginTop: 10, fontSize: 14 }}>{a}</HBody>
              </div>
            ))}
          </div>
        </div>
      </section>
      <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: 42 }}>Ready to see your operations clearly?</HH2>
            <HLead style={{ color: '#94a3b8', margin: '20px auto 0', maxWidth: 480 }}>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">Talk to sales</HBtn>
            </div>
          </div>
        </div>
      </section>
      <HFooter />
    </div>
  );
}

// ── CONTACT PAGE ──────────────────────────────────────────────────────────────
function HContactPage() {
  const Field = ({ label, placeholder, span = 1, textarea = false, select = false }) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 7, gridColumn: `span ${span}` }}>
      <label style={{ fontSize: 13, fontWeight: 700, color: HF.ink }}>{label}</label>
      {textarea ? (
        <div style={{ height: 108, border: `1px solid ${HF.borderMid}`, borderRadius: 10, background: HF.surface, padding: '12px 14px', fontSize: 14, color: HF.muted }}>What would you like to see?</div>
      ) : select ? (
        <div style={{ height: 46, border: `1px solid ${HF.borderMid}`, borderRadius: 10, background: HF.surface, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 14px', fontSize: 14, color: HF.muted }}>
          <span>{placeholder}</span>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke={HF.muted} strokeWidth="1.8"><path d="M2 4l4 4 4-4"/></svg>
        </div>
      ) : (
        <div style={{ height: 46, border: `1px solid ${HF.borderMid}`, borderRadius: 10, background: HF.surface, display: 'flex', alignItems: 'center', padding: '0 14px', fontSize: 14, color: HF.muted }}>{placeholder}</div>
      )}
    </div>
  );

  const highlights = [
    ['A walkthrough tailored to your sector', HIC.eye],
    ['See the products relevant to you',      HIC.grid],
    ['Get a clear view of setup &amp; onboarding',   HIC.coins],
  ];

  return (
    <div style={{ fontFamily: HF.font, background: HF.surface }}>
      <HNav active="contact" />
      <section style={{ padding: '64px 72px 80px', background: HF.fill, borderBottom: `1px solid ${HF.border}` }}>
        <div style={{ maxWidth: HF.W, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 64, alignItems: 'start' }}>
          {/* left */}
          <div style={{ paddingTop: 8 }}>
            <HEyebrow>Book a demo</HEyebrow>
            <HH1 style={{ fontSize: 46 }}>See your operations clearly.</HH1>
            <HLead style={{ marginTop: 20 }}>Tell us a little about your organisation and we'll tailor a walkthrough of Kyndrid around how you actually operate.</HLead>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 36 }}>
              {highlights.map(([t, ic]) => (
                <div key={t} style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
                  <HGlyph d={ic} box={44} size={22} />
                  <span style={{ fontSize: 15.5, fontWeight: 600, color: HF.body }}>{t}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 40, paddingTop: 28, borderTop: `1px solid ${HF.border}` }}>
              <HLogoStrip />
            </div>
          </div>
          {/* form card */}
          <div style={{ background: HF.surface, border: `1px solid ${HF.border}`, borderRadius: 20, padding: 36, boxShadow: '0 24px 64px -28px rgba(7,16,31,.24)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
              <Field label="Name" placeholder="Your full name" />
              <Field label="Organisation" placeholder="Organisation name" />
              <Field label="Email" placeholder="you@organisation.co.uk" />
              <Field label="Phone" placeholder="+44 …" />
              <Field label="Sector" placeholder="Select a sector" select />
              <Field label="Number of sites" placeholder="Select range" select />
            </div>
            {/* product checkboxes */}
            <div style={{ marginTop: 18 }}>
              <label style={{ fontSize: 13, fontWeight: 700, color: HF.ink }}>Products interested in</label>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 10 }}>
                {HSUITE.map((p, i) => {
                  const t = p.tone;
                  const checked = i === 0;
                  return (
                    <span key={p.name} style={{
                      display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13.5,
                      fontWeight: 600, color: checked ? t.fg : HF.body,
                      border: `1px solid ${checked ? t.bd : HF.border}`,
                      background: checked ? t.bg : HF.surface,
                      borderRadius: 99, padding: '8px 14px',
                    }}>
                      <span style={{
                        width: 15, height: 15, borderRadius: 4,
                        border: `1.5px solid ${checked ? t.fg : HF.borderMid}`,
                        background: checked ? t.fg : HF.surface,
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        flex: '0 0 auto',
                      }}>
                        {checked && <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="#fff" strokeWidth="2.4"><path d="M2 6l3 3 5-6"/></svg>}
                      </span>
                      {p.name}
                    </span>
                  );
                })}
              </div>
            </div>
            <div style={{ marginTop: 18 }}>
              <Field label="Message" placeholder="" textarea span={2} />
            </div>
            <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontSize: 12, color: HF.muted, maxWidth: 240, lineHeight: 1.5 }}>By submitting, you agree to our privacy policy. We'll never share your details.</span>
              <HBtn kind="primary" size="lg">Book a demo</HBtn>
            </div>
          </div>
        </div>
      </section>
      <HFooter />
    </div>
  );
}

Object.assign(window, { HFitMatrix, HSectorsPage, HPricingPage, HContactPage });