// Nexora Cores — Website UI Kit · Why Nexora (comparison cards)
const { Eyebrow } = window.NexoraCoresDesignSystem_c8b55f;

const WHY_CARDS = [
  {
    vs: 'vs. Building in-house',
    title: ['Production-ready in', '60 days.'],
    desc: 'Building loyalty, telecom, and billing infrastructure from scratch takes 12–18 months and a dedicated engineering team. Nexora deploys a production-ready, white-labeled platform in 60 days — compliance-ready, carrier-integrated, and revenue-generating from launch.',
    proof: [['60', 'days to go live'], ['0', 'carrier contracts needed']],
  },
  {
    vs: 'vs. Salesforce / HubSpot',
    title: ['Purpose-built for', 'community revenue.'],
    desc: 'CRMs manage contacts. Nexora grows communities. Built specifically for organizations monetizing large audiences — with tiered memberships, partner reward ecosystems, and telecom integrations that no CRM or marketing platform offers.',
    proof: [['5', 'revenue streams built-in'], ['3', 'partner APIs ready to connect']],
  },
  {
    vs: 'vs. Twilio / generic APIs',
    title: ['Full stack, not', 'just APIs.'],
    desc: 'Twilio gives you APIs and leaves the rest to you. Nexora delivers the complete engagement layer — membership logic, reward management, partner fee collection, and analytics — built on carrier-grade infrastructure. One vendor. One contract. Revenue in 60 days.',
    proof: [['1', 'vendor instead of 5+'], ['∞', 'white-label clients']],
  },
];

function WhyCard({ c }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: '#fff', border: '1px solid var(--border)', borderRadius: 18, padding: 30,
        display: 'flex', flexDirection: 'column',
        boxShadow: hover ? '0 20px 60px rgba(82,64,228,.12)' : '0 1px 3px rgba(13,13,20,.05)',
        borderColor: hover ? 'var(--border-strong)' : 'var(--border)',
        transform: hover ? 'translateY(-4px)' : 'none',
        transition: 'transform .22s var(--ease-out), box-shadow .22s, border-color .22s',
      }}
    >
      <span style={{ alignSelf: 'flex-start', fontFamily: 'var(--font-body)', fontSize: 12.5, fontWeight: 600, color: 'var(--purple)', background: 'var(--purple-soft)', padding: '5px 11px', borderRadius: 6, letterSpacing: '-0.01em', marginBottom: 18 }}>{c.vs}</span>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 800, color: 'var(--ink)', letterSpacing: '-0.03em', lineHeight: 1.1, margin: '0 0 14px' }}>
        {c.title[0]}<br />{c.title[1]}
      </h3>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.68, letterSpacing: '-0.01em', margin: '0 0 24px', flex: 1 }}>{c.desc}</p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, paddingTop: 20, borderTop: '1px solid var(--surface-3)' }}>
        {c.proof.map(([n, l]) => (
          <div key={l}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 800, color: 'var(--purple)', letterSpacing: '-0.04em', lineHeight: 1 }}>{n}</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--ink-muted)', lineHeight: 1.4, marginTop: 6, letterSpacing: '-0.01em' }}>{l}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function WhyNexora() {
  const { Reveal } = window;
  const W = Reveal || (({ children }) => <div>{children}</div>);
  return (
    <section id="why" style={{ padding: '100px 5%', background: 'var(--surface)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <W>
          <div style={{ maxWidth: 560, marginBottom: 52 }}>
            <Eyebrow>Why Nexora Cores</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 52, fontWeight: 800, letterSpacing: '-0.04em', color: 'var(--ink)', margin: '10px 0 16px', lineHeight: 1.07 }}>Built different.<br />For a reason.</h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 19, color: 'var(--ink-soft)', lineHeight: 1.7, margin: 0, letterSpacing: '-0.01em' }}>Every category has incumbents. Here's why organizations choose Nexora over building their own or using legacy vendors.</p>
          </div>
        </W>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="why-grid">
          {WHY_CARDS.map(c => <WhyCard key={c.vs} c={c} />)}
        </div>
      </div>
    </section>
  );
}
window.WhyNexora = WhyNexora;