// Product split, Why Us (features), About, Newsletter, Contact

// ---------- PRODUCTS: diptych split by the dot-matrix ----------
const Products = () => (
  <section id="products" style={{ padding: '104px 28px 112px', background: '#fff', position: 'relative' }}>
    <div style={{ maxWidth: 1240, margin: '0 auto' }}>
      <Reveal style={{ maxWidth: 760, marginBottom: 56 }}>
        <Eyebrow>Products</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 500,
          fontSize: 'clamp(36px, 4.4vw, 56px)', letterSpacing: '-0.025em',
          margin: '14px 0 18px', lineHeight: 1.05,
        }}>
          Two ways to put AI to work.
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--fg-2)', margin: 0, maxWidth: 620 }}>
          A targeted AI tool or a turnkey business in a box. Either way, we ship the engineering so you focus on growth.
        </p>
      </Reveal>

      <div className="d2-products-grid" style={{
        display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 0, alignItems: 'stretch',
      }}>
        <ProductCard
          eyebrow="Built to order"
          title="AI Applications"
          body="Purpose-built AI that solves a specific business problem — customer engagement, voice agents, workflow automation, document intelligence."
          bullets={[
            { icon: 'chat', text: 'Custom AI agents & assistants' },
            { icon: 'workflow', text: 'Workflow automation' },
            { icon: 'voice', text: 'Voice & chat integrations' },
          ]}
          cta="Get notified"
          side="left"
        />

        {/* Dot-matrix divider */}
        <div className="d2-products-divider" style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: '0 20px', position: 'relative',
        }}>
          <div style={{
            position: 'absolute', top: 0, bottom: 0, left: '50%', width: 1,
            background: 'linear-gradient(180deg, transparent, var(--border-1) 20%, var(--border-1) 80%, transparent)',
          }} />
          <div style={{ position: 'relative', background: '#fff', padding: '16px 4px' }}>
            <DotGrid w={80} h={80} />
          </div>
        </div>

        <ProductCard
          eyebrow="Ready day one"
          title="White-Label Solutions"
          body="Fully operational, AI-powered business packages. Entrepreneurs buy it, brand it, and run it from day one. No team required."
          bullets={[
            { icon: 'box', text: 'Ready-built and live from day one' },
            { icon: 'palette', text: 'Fully brandable — your name, your business' },
            { icon: 'cpu', text: 'Backed by enterprise-grade AI infrastructure' },
          ]}
          cta="Get early access"
          side="right"
          accent
        />
      </div>
    </div>
  </section>
);

const ProductCard = ({ eyebrow, title, body, bullets, cta, accent, side }) => (
  <Reveal delay={side === 'right' ? 120 : 0}>
    <div className="d2-product-card" style={{
      background: accent ? 'linear-gradient(160deg, #FFF7F3 0%, #FFE4DE 100%)' : 'var(--bg-canvas)',
      border: accent ? '1px solid var(--brand-coral)' : '1px solid var(--border-1)',
      borderRadius: 'var(--radius-2xl)',
      padding: '36px 32px 32px', height: '100%',
      display: 'flex', flexDirection: 'column',
      transition: 'all .24s var(--ease-standard)',
      cursor: 'default',
    }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}
    >
      <Eyebrow>{eyebrow}</Eyebrow>
      <h3 style={{
        fontFamily: 'var(--font-display)', fontWeight: 500,
        fontSize: 34, letterSpacing: '-0.02em', margin: '12px 0 14px',
      }}>{title}</h3>
      <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--fg-2)', margin: 0 }}>{body}</p>

      <ul style={{ listStyle: 'none', padding: 0, margin: '26px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {bullets.map(b => (
          <li key={b.text} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14.5, color: 'var(--fg-1)' }}>
            <span style={{
              width: 32, height: 32, borderRadius: 8,
              background: accent ? '#fff' : 'var(--brand-blush)',
              color: 'var(--brand-ember)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              <Icon name={b.icon} size={16} />
            </span>
            <span>{b.text}</span>
          </li>
        ))}
      </ul>

      <div style={{ marginTop: 'auto' }}>
        <Button variant={accent ? 'primary' : 'secondary'} href="#newsletter">{cta} <Icon name="arrow" size={15} /></Button>
      </div>
    </div>
  </Reveal>
);

// ---------- WHY US: bento grid ----------
const WhyUs = () => {
  const items = [
    { icon: 'zap', title: 'Ready from day one', body: 'Every white-label package ships operational — wired, tested, launchable the moment you take the keys.', featured: true },
    { icon: 'users', title: 'No technical degree required', body: 'You run the business. We handle the AI plumbing, infrastructure, and engineering.' },
    { icon: 'cpu', title: 'Enterprise-grade AI', body: 'The class of AI, automation, and cloud tooling Fortune 500s pay millions for — made accessible.' },
    { icon: 'palette', title: 'Fully brandable', body: 'Your logo, your colors, your domain. We build the engine; the badge out front is yours.' },
    { icon: 'shield', title: 'Built by engineers', body: 'Architected by veterans from AT&T and Lucent Technologies.' },
    { icon: 'flag', title: 'Houston made', body: 'Headquartered in Houston, TX. American built, engineered for entrepreneurs everywhere.' },
  ];
  return (
    <section id="why" style={{ padding: '112px 28px', background: 'var(--bg-canvas)', position: 'relative' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <Reveal style={{ maxWidth: 760, marginBottom: 48 }}>
          <Eyebrow>Why dub2.ai</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 'clamp(36px, 4.4vw, 56px)', letterSpacing: '-0.025em',
            margin: '14px 0 18px', lineHeight: 1.05,
          }}>
            Technology equalizers.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--fg-2)', margin: 0, maxWidth: 640 }}>
            We exist to give small and medium-sized businesses access to the engineers and technologies that were historically locked inside Fortune 500 walls.
          </p>
        </Reveal>

        <div className="d2-bento" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(6, 1fr)',
          gridAutoRows: 'minmax(220px, auto)',
          gap: 16,
        }}>
          {items.map((it, i) => {
            // featured: spans 3x2, others span 2x1 or 3x1
            const span = it.featured ? { gridColumn: 'span 3', gridRow: 'span 2' } :
                         (i < 3 ? { gridColumn: 'span 3' } : { gridColumn: 'span 2' });
            return (
              <Reveal key={it.title} delay={i * 60} style={span} className="d2-bento-cell">
                <FeatureCard {...it} />
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const FeatureCard = ({ icon, title, body, featured }) => (
  <div style={{
    background: featured ? 'var(--brand-gradient)' : '#fff',
    color: featured ? '#fff' : 'var(--fg-1)',
    border: featured ? 'none' : '1px solid var(--border-1)',
    borderRadius: 'var(--radius-xl)',
    padding: featured ? 32 : 24,
    height: '100%',
    display: 'flex', flexDirection: 'column',
    position: 'relative', overflow: 'hidden',
    transition: 'all .2s var(--ease-standard)',
  }}
    onMouseEnter={e => { if (!featured) { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; } }}
    onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}
  >
    {featured && (
      <div style={{ position: 'absolute', right: -40, bottom: -40, opacity: 0.22, pointerEvents: 'none' }}>
        <DotGrid w={260} h={260} />
      </div>
    )}
    <div style={{
      width: 44, height: 44, borderRadius: 10,
      background: featured ? 'rgba(255,255,255,0.18)' : 'var(--brand-blush)',
      color: featured ? '#fff' : 'var(--brand-ember)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      marginBottom: 18,
    }}>
      <Icon name={icon} size={22} />
    </div>
    <h3 style={{
      fontFamily: 'var(--font-display)', fontWeight: 500,
      fontSize: featured ? 30 : 20, letterSpacing: '-0.015em',
      margin: '0 0 10px', lineHeight: 1.15,
    }}>{title}</h3>
    <p style={{
      fontSize: featured ? 16 : 14.5, lineHeight: 1.55,
      color: featured ? 'rgba(255,255,255,0.9)' : 'var(--fg-2)',
      margin: 0,
    }}>{body}</p>
  </div>
);

Object.assign(window, { Products, WhyUs });