/* Stack — sticky stacking cards with scroll-linked scale */
const Stack = () => {
  const cards = [
    {
      n: '01', tag: 'AI RECEPTIONIST',
      title: 'A voice that books while you sleep.',
      body: 'Five hand-tuned personas — sharp, empathetic, dispatcher, charmer, coordinator. They triage emergencies, quote at your rates, and drop the appointment straight into your CRM.',
      bg: '#FF5736', fg: '#0a0a0a',
      tag2: 'PERSONA SARAH · LIVE',
    },
    {
      n: '02', tag: 'WEBSITE STUDIO',
      title: 'Sites that actually close.',
      body: 'Hand-built in Next.js. Sub-second loads, conversion-tested layouts, copy that sells the trade — not stock photos and lorem ipsum.',
      bg: '#0F0F0F', fg: '#fff',
      tag2: 'LIGHTHOUSE 100 / 100',
    },
    {
      n: '03', tag: 'BRAND & MOTION',
      title: 'A look people actually remember.',
      body: 'Logo, palette, type system, motion language. Your work truck, your invoices, your billboard — one identity from end to end.',
      bg: '#1a1a1a', fg: '#fff',
      tag2: 'FULL IDENTITY KIT',
    },
    {
      n: '04', tag: 'ONE PLATFORM',
      title: 'Calls, leads, jobs — one screen.',
      body: 'Every call recorded, transcribed, scored. Every booking on a live calendar. Every customer in your CRM. No tools to glue together.',
      bg: '#FF8961', fg: '#0a0a0a',
      tag2: 'crm.grippycode.com',
    },
  ];

  return (
    <section id="receptionist" className="relative">
      <div className="mx-auto max-w-[1400px] px-6 pt-32 pb-8">
        <div className="font-mono text-xs tracking-[0.3em] text-flame mb-5" data-reveal>[ 02 / THE STACK ]</div>
        <h2 className="word-rev text-[clamp(40px,6vw,96px)] leading-[0.95] tracking-[-0.03em] font-bold max-w-[18ch]">
          {splitWords("Four products. One")} <span className="serif text-flame">{splitWords("operating system")}</span> {splitWords("for your business.")}
        </h2>
      </div>

      <div className="relative">
        {cards.map((c, i) => (
          <StackCard key={i} card={c} index={i} total={cards.length} />
        ))}
      </div>
    </section>
  );
};

const StackCard = ({ card, index, total }) => {
  const ref = React.useRef(null);
  const p = useScrollProgress(ref, {});
  // Each card scales down slightly when cards above it are coming in
  const scale = 1 - (1 - p) * 0.04 * (total - 1 - index);
  return (
    <div ref={ref} className="sticky top-0 px-6 py-8" style={{ top: `${60 + index * 24}px` }}>
      <div
        className="mx-auto max-w-[1400px] rounded-[28px] overflow-hidden shadow-[0_30px_80px_rgba(0,0,0,0.6)]"
        style={{ background: card.bg, color: card.fg, transform: `scale(${scale})`, transformOrigin: 'top center' }}
      >
        <div className="p-8 md:p-14 grid md:grid-cols-12 gap-10 items-end min-h-[60vh]">
          <div className="md:col-span-7">
            <div className="flex items-center gap-4 mb-10">
              <div className="font-mono text-sm font-bold opacity-60">{card.n}</div>
              <div className="font-mono text-xs tracking-[0.3em] opacity-70">{card.tag}</div>
            </div>
            <h3 className="text-[clamp(36px,5vw,80px)] leading-[0.98] tracking-[-0.03em] font-bold max-w-[16ch]">
              {card.title}
            </h3>
            <p className="mt-8 text-lg md:text-xl opacity-80 max-w-[50ch] leading-relaxed">{card.body}</p>
          </div>
          <div className="md:col-span-5 self-stretch flex flex-col justify-between gap-10" data-px="22">
            <div className="ml-auto font-mono text-[10px] tracking-[0.3em] opacity-60 flex items-center gap-2">
              <span className="w-1.5 h-1.5 rounded-full bg-current animate-pulse-dot"></span>
              {card.tag2}
            </div>
            <CardVisual idx={index} fg={card.fg}/>
          </div>
        </div>
      </div>
    </div>
  );
};

const CardVisual = ({ idx, fg }) => {
  // Distinct visual per card — pure SVG mood
  if (idx === 0) return (
    <svg viewBox="0 0 400 220" className="w-full">
      <g fill="none" stroke={fg} strokeOpacity="0.85" strokeWidth="1.3">
        {Array.from({length: 28}).map((_, i) => (
          <path key={i} d={`M 0 ${110 + Math.sin(i*0.4) * (40 + (i%4)*8)} Q 200 ${110 - Math.sin(i*0.4) * 80} 400 ${110 + Math.sin(i*0.4) * (40 + (i%4)*8)}`} strokeOpacity={0.4 - i*0.013}/>
        ))}
      </g>
      <text x="0" y="210" fontFamily="Geist Mono" fontSize="10" letterSpacing="2" fill={fg} opacity="0.6">WAVEFORM · 240ms LATENCY</text>
    </svg>
  );
  if (idx === 1) return (
    <div className="border border-current/30 rounded-2xl p-4 backdrop-blur-sm" style={{borderColor: fg + '30'}}>
      <div className="flex gap-1.5 mb-3">
        <div className="w-2.5 h-2.5 rounded-full" style={{background: fg, opacity: 0.3}}></div>
        <div className="w-2.5 h-2.5 rounded-full" style={{background: fg, opacity: 0.3}}></div>
        <div className="w-2.5 h-2.5 rounded-full" style={{background: fg, opacity: 0.3}}></div>
      </div>
      <div className="font-mono text-[10px] tracking-wider opacity-60 mb-3">grippycode.com/atlas-towing</div>
      <div className="space-y-2">
        <div className="h-2 rounded" style={{background: fg, opacity: 0.15, width: '70%'}}></div>
        <div className="h-2 rounded" style={{background: fg, opacity: 0.1, width: '90%'}}></div>
        <div className="h-2 rounded" style={{background: fg, opacity: 0.1, width: '50%'}}></div>
      </div>
      <div className="mt-4 inline-block text-[10px] font-mono tracking-wider px-3 py-1.5 rounded-full" style={{background: fg, color: '#0F0F0F'}}>LCP · 0.8s</div>
    </div>
  );
  if (idx === 2) return (
    <div className="flex gap-3 items-center flex-wrap">
      {['#FF5736','#FFFFFF','#1A1A1A','#FF8961','#9CA3AF'].map((c,i) => (
        <div key={i} className="rounded-2xl border" style={{background:c, width: 64, height: 64, borderColor: fg + '20'}}></div>
      ))}
      <div className="font-mono text-[10px] tracking-[0.2em] opacity-60 w-full mt-2">PALETTE · TYPE · MOTION</div>
    </div>
  );
  return (
    <div className="rounded-2xl border p-4" style={{borderColor: fg + '20'}}>
      <div className="font-mono text-[10px] tracking-wider opacity-60 mb-3">CRM · CALL LOG</div>
      {['Sarah · 2:14pm · BOOKED','Emma · 11:42am · QUOTED','James · 11:08am · DISPATCHED'].map((l,i)=>(
        <div key={i} className="flex items-center justify-between text-sm py-2 border-t" style={{borderColor: fg+'15'}}>
          <span>{l.split(' · ')[0]}</span>
          <span className="font-mono text-[10px] opacity-50">{l.split(' · ')[1]}</span>
          <span className="font-mono text-[10px] tracking-wider">{l.split(' · ')[2]}</span>
        </div>
      ))}
    </div>
  );
};
window.Stack = Stack;