/* burp.agency homepage — Three practices (Section 04)
   Big editorial rows. Subtle in-view stagger. Hover tints. */

const PRACTICES = [
  {
    id: 'words',
    name: 'WORDS',
    line: 'The king hasn’t changed. Just the competition for the throne.',
    services: 'SEO blogs that push through the noise · Landing pages that show the problem before they sell the solution · Thought leadership, email, whitepapers, sales enablement',
    href: 'offerings/content-marketing.html',
    cta: 'Explore Words',
    mascot: { shape: 'circle', bg: 'orange',     color: 'ink',   size: 96, rotate: -4 },
  },
  {
    id: 'shape',
    name: 'SHAPE',
    line: 'Most B2B SaaS looks like it was built by the engineers who built it.',
    services: 'Brand identity, website design, creative ads · Product videos, pitch decks, social templates',
    href: 'offerings/design.html',
    cta: 'Explore Shape',
    mascot: { shape: 'rect',   bg: 'paleOrange', color: 'ink',   size: 96, aspect: '3/2', rotate: 0 },
  },
  {
    id: 'motion',
    name: 'MOTION',
    line: 'Add some poetry to your B2B boring SaaS messaging. Then point it at a pipeline.',
    services: 'GTM strategy, paid ads, performance · SEO analysis, marketing automation, AI enablement',
    href: 'offerings/growth-marketing.html',
    cta: 'Explore Motion',
    mascot: { shape: 'star',   bg: 'ink',        color: 'cream', size: 112, rotate:  2, scale: 0.42 },
  },
];

const PracticeRow = ({ p, i }) => {
  const [ref, style] = useReveal({ delay: i * 120 });
  const [hover, setHover] = React.useState(false);
  return (
    <a ref={ref}
       href={p.href}
       id={p.id}
       data-screen-label={`04 ${p.name}`}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       style={{
         ...style,
         display: 'block',
         padding: '56px 0',
         borderBottom: '1px solid var(--color-warm-gray)',
         color: 'inherit',
         textDecoration: 'none',
         transition: `${style.transition}, background .2s ease`,
         background: hover ? 'var(--color-pale-orange)' : 'transparent',
       }}>
      <div className="practice-grid" style={{
        display: 'grid',
        gridTemplateColumns: '160px 1fr auto',
        gap: 40, alignItems: 'center',
        padding: '0 32px',
      }}>
        {/* Mascot — fixed 132×132 cell so all three rows line up perfectly,
            despite shape/size variation inside. */}
        <div style={{
          width: 132, height: 132,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transform: hover ? 'translateY(-4px)' : 'translateY(0)',
          transition: 'transform .25s cubic-bezier(.22,1,.36,1)',
        }}>
          <Mascot {...p.mascot} />
        </div>

        <h3 style={{
          fontFamily: 'Georgia, serif', fontWeight: 400,
          fontSize: 'clamp(40px, 4.6vw, 56px)',
          letterSpacing: '-0.018em', lineHeight: 1,
          color: 'var(--color-ink)', margin: 0,
        }}>
          {p.name.charAt(0) + p.name.slice(1).toLowerCase()}.
        </h3>

        <div>
          <p style={{
            fontFamily: 'Georgia, serif', fontStyle: 'italic',
            fontSize: 'clamp(20px, 1.9vw, 24px)', lineHeight: 1.35,
            color: 'var(--color-ink)', margin: '0 0 12px',
            maxWidth: '46ch',
          }}>{p.line}</p>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 14,
            lineHeight: 1.7, color: 'var(--color-mid-gray)',
            margin: 0, maxWidth: '64ch',
          }}>{p.services}</p>
        </div>

        <div style={{
          fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 600,
          color: 'var(--color-ink)', whiteSpace: 'nowrap',
          borderBottom: `1px solid ${hover ? 'var(--color-ink)' : 'transparent'}`,
          paddingBottom: 2,
          transition: 'border-color .12s ease',
        }}>{p.cta}  →</div>
      </div>
    </a>
  );
};

const Practices = () => {
  return (
    <section data-screen-label="04 Practices"
             style={{
               background: '#ffffff',
               paddingTop: 96, paddingBottom: 0,
               borderTop: '1px solid var(--color-warm-gray)',
             }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
        <Reveal><Label>WHAT WE DO</Label></Reveal>
      </div>

      <div style={{ marginTop: 40, borderTop: '1px solid var(--color-warm-gray)' }}>
        {PRACTICES.map((p, i) => <PracticeRow key={p.id} p={p} i={i} />)}
      </div>
    </section>
  );
};

Object.assign(window, { Practices });