// Nexora Cores — Website UI Kit · Industries / Solutions
const { Eyebrow, IconChip } = window.NexoraCoresDesignSystem_c8b55f;
const IND_SP = ''; // sprite is inlined in the page → same-document #ico-* refs

const TONES = {
  purple: { c: 'var(--purple)', tint: 'var(--purple-soft)', glow: 'rgba(82,64,228,.16)', border: '#C4BAFF' },
  teal: { c: 'var(--teal)', tint: 'var(--teal-soft)', glow: 'rgba(14,165,233,.16)', border: '#BAE6FD' },
  green: { c: 'var(--success)', tint: 'var(--success-soft)', glow: 'rgba(11,166,112,.16)', border: '#A7E8CE' },
  amber: { c: 'var(--warning)', tint: 'var(--warning-soft)', glow: 'rgba(217,119,6,.16)', border: '#F3D9A8' },
};

const INDUSTRIES = [
  { icon: 'building', tone: 'purple', name: 'Restaurants & Hospitality', tag: 'Hospitality', outcome: 'An AI employee that answers calls, takes orders, and manages reservations.', href: 'solutions.html#hospitality' },
  { icon: 'telecom', tone: 'teal', name: 'Telecom Operators', tag: 'Carriers / MVNO', outcome: 'White-label loyalty and rewards for branded mobile.', href: 'solutions.html#telecom' },
  { icon: 'bank', tone: 'green', name: 'Fintech & Neobanks', tag: 'Fintech', outcome: 'Reward-linked banking that deepens daily engagement.', href: 'solutions.html#fintech' },
  { icon: 'globe', tone: 'purple', name: 'NGOs & Communities', tag: 'Impact', outcome: 'Verifiable social-impact rewards that sustain communities.', href: 'solutions.html#ngo' },
  { icon: 'retail', tone: 'amber', name: 'Retail & Commerce', tag: 'Retail', outcome: 'Turn shoppers into members with missions and perks.', href: 'solutions.html' },
  { icon: 'creator', tone: 'teal', name: 'Creators', tag: 'Creators', outcome: 'Monetize your audience directly through memberships.', href: 'solutions.html' },
];

function IndustryCard({ d }) {
  const [hover, setHover] = React.useState(false);
  const t = TONES[d.tone];
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative', overflow: 'hidden', background: '#fff', borderRadius: 16,
        border: `1px solid ${hover ? t.border : 'var(--border)'}`, padding: 24,
        boxShadow: hover ? `0 14px 40px ${t.glow}` : 'var(--shadow-sm)',
        transform: hover ? 'translateY(-3px)' : 'none',
        transition: 'transform .25s var(--ease-out), box-shadow .25s, border-color .25s',
        display: 'flex', flexDirection: 'column', gap: 12, minHeight: 188,
      }}
    >
      <div style={{ position: 'absolute', top: -40, right: -40, width: 150, height: 150, borderRadius: '50%', background: `radial-gradient(circle, ${t.glow}, transparent 70%)`, opacity: hover ? 1 : 0.55, transition: 'opacity .3s', pointerEvents: 'none' }} />
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', position: 'relative' }}>
        <span style={{ transform: hover ? 'scale(1.08)' : 'none', transition: 'transform .25s var(--ease-out)' }}>
          <IconChip icon={d.icon} tone={d.tone} spriteHref={IND_SP} size={42} />
        </span>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 600, color: t.c, background: t.tint, padding: '4px 10px', borderRadius: 999, letterSpacing: '-0.01em' }}>{d.tag}</span>
      </div>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 800, color: 'var(--ink)', letterSpacing: '-0.03em', margin: 0, lineHeight: 1.15 }}>{d.name}</h3>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.6, margin: 0, letterSpacing: '-0.01em', flex: 1 }}>{d.outcome}</p>
      <a href={d.href || '#contact'} style={{ display: 'inline-flex', alignItems: 'center', gap: hover ? 9 : 6, fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, color: t.c, textDecoration: 'none', letterSpacing: '-0.01em', transition: 'gap .2s' }}>
        Explore <span aria-hidden="true">→</span>
      </a>
    </div>
  );
}

function Industries() {
  const { Reveal } = window;
  const Wrap = Reveal || (({ children }) => <div>{children}</div>);
  return (
    <section id="industries" style={{ padding: '100px 5%' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <div style={{ maxWidth: 640, marginBottom: 52 }}>
          <Eyebrow>Solutions</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 50, fontWeight: 800, letterSpacing: '-0.04em', color: 'var(--ink)', margin: '10px 0 14px', lineHeight: 1.07 }}>Built for every<br />service-driven business.</h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 21, color: 'var(--ink-soft)', lineHeight: 1.7, margin: 0, letterSpacing: '-0.01em' }}>One infrastructure layer, adapted to how your organization automates and connects with its audience.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18, alignItems: 'stretch' }} className="ind-grid">
          {INDUSTRIES.map((d, i) => <Wrap key={d.name} delay={(i % 3) * 0.07} style={{ display: 'flex' }}><div style={{ width: '100%' }}><IndustryCard d={d} /></div></Wrap>)}
        </div>
      </div>
    </section>
  );
}
window.Industries = Industries;