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

const BOOKING_URL = 'https://outlook.office.com/bookwithme/user/5cdce2f4685a45d6803127347e95e21a@dub2.ai/meetingtype/FMPn1PUvX0OHhbRtr2KpJw2?anonymous&ismsaljsauthenabled&ep=mcard';

// ---------- PRODUCTS: triptych split by the dot-matrix ----------
const ProductsDivider = () => (
  <div className="d2-products-divider" style={{
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    padding: '0 12px', 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={64} h={64} />
    </div>
  </div>
);

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,
        }}>
          Three 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, a turnkey business in a box, or the founder in your corner. 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 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 */}
        <ProductsDivider />

        <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
        />

        {/* Dot-matrix divider */}
        <ProductsDivider />

        <ProductCard
          eyebrow="Work with the founder"
          title="Advisory & Consulting"
          body="Direct access to Wilton White for vendor-neutral AI strategy. Before you buy a tool, sign a vendor, or build a team — get a straight answer from an engineer who has shipped these systems for 25+ years."
          bullets={[
            { icon: 'map', text: 'AI opportunity assessments & roadmaps' },
            { icon: 'trending', text: 'Build-vs-buy and vendor evaluations' },
            { icon: 'clock', text: 'Fractional AI advisor retainers' },
          ]}
          cta="Book a free 15-minute intro"
          ctaHref={BOOKING_URL}
          ctaExternal
          learnMoreHref="ceo.html#advisory"
          monogram
          delay={240}
        />
      </div>
    </div>
  </section>
);

const ProductCard = ({ eyebrow, title, body, bullets, cta, ctaHref = '#newsletter', ctaExternal = false, learnMoreHref, monogram = false, accent, side, delay }) => (
  <Reveal delay={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',
      ...(monogram ? { position: 'relative' } : {}),
    }}
      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'; }}
    >
      {monogram && (
        <div style={{
          position: 'absolute', top: 28, right: 28,
          width: 52, height: 52, borderRadius: 999,
          background: 'var(--brand-gradient)', color: '#fff',
          fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>WW</div>
      )}
      <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={ctaHref} {...(ctaExternal ? { target: '_blank', rel: 'noopener' } : {})}>{cta} <Icon name="arrow" size={15} /></Button>
        {learnMoreHref && (
          <div style={{ marginTop: 12 }}>
            <a href={learnMoreHref} style={{ fontSize: 14, fontWeight: 600, color: 'var(--brand-ember)', textDecoration: 'none' }}>
              Learn more <Icon name="arrowUpRight" size={13} />
            </a>
          </div>
        )}
      </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 });