// Slide 6 — Custom end-to-end workflow.
// Three clean columns: Data → Domain → Trusted Output.
// Light theme, brand-gradient accent on the center "hard part" column.
// Hover any column to emphasize; an animated dot travels the flow.

const { useState: s6use, useEffect: s6eff } = React;
const { pitchC, pitchMono } = window;

// ──── Icons ─────────────────────────────────────────────────────────────

function Glyph({ kind, size = 20, color = 'currentColor' }) {
  const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'warehouse':   return <svg {...common}><ellipse cx="12" cy="5" rx="8" ry="2.5"/><path d="M4 5v14c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5V5"/><path d="M4 11c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5"/><path d="M4 16c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5"/></svg>;
    case 'docs':        return <svg {...common}><path d="M7 3h8l4 4v14H7z"/><path d="M14 3v5h5"/><path d="M10 13h6M10 17h6"/></svg>;
    case 'crm':         return <svg {...common}><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2"/><path d="M3 13h18"/></svg>;
    case 'transcripts': return <svg {...common}><path d="M4 4h16v11h-7l-4 4v-4H4z"/><path d="M8 9h8M8 12h5"/></svg>;
    case 'api':         return <svg {...common}><path d="M8 6l-5 6 5 6M16 6l5 6-5 6"/><path d="M14 4l-4 16"/></svg>;
    case 'streams':     return <svg {...common}><path d="M3 8c4 0 4-4 8-4s4 4 8 4M3 14c4 0 4-4 8-4s4 4 8 4M3 20c4 0 4-4 8-4s4 4 8 4"/></svg>;
    case 'methodology': return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg>;
    case 'kpi':         return <svg {...common}><path d="M3 20l5-7 4 4 9-11"/><path d="M16 6h5v5"/></svg>;
    case 'sig':         return <svg {...common}><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6z"/><path d="M9 12l2 2 4-4"/></svg>;
    case 'decision':    return <svg {...common}><path d="M12 3l9 9-9 9-9-9z"/><path d="M9 12l2 2 4-4"/></svg>;
    case 'lexicon':     return <svg {...common}><path d="M5 4h11a3 3 0 013 3v13H8a3 3 0 01-3-3z"/><path d="M5 17a3 3 0 013-3h11"/><path d="M9 8h6M9 11h4"/></svg>;
    case 'deck':        return <svg {...common}><rect x="3" y="5" width="18" height="12" rx="1.5"/><path d="M8 21h8M12 17v4"/><path d="M7 9h6M7 12h4"/></svg>;
    case 'email':       return <svg {...common}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></svg>;
    case 'slack':       return <svg {...common}><rect x="6" y="3" width="4" height="11" rx="2"/><rect x="14" y="10" width="4" height="11" rx="2"/><rect x="10" y="6" width="11" height="4" rx="2"/><rect x="3" y="14" width="11" height="4" rx="2"/></svg>;
    case 'alert':       return <svg {...common}><path d="M6 10a6 6 0 0112 0v5l2 3H4l2-3z"/><path d="M10 21a2 2 0 004 0"/></svg>;
    case 'apiPush':     return <svg {...common}><path d="M12 4v12"/><path d="M7 9l5-5 5 5"/><path d="M4 20h16"/></svg>;
    case 'board':       return <svg {...common}><rect x="3" y="4" width="18" height="13" rx="1.5"/><path d="M3 13l5-3 4 2 5-4 4 2"/><path d="M8 21h8"/></svg>;
    case 'lineage':     return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'agentic':     return <svg {...common}><path d="M12 3l9 5v8l-9 5-9-5V8z"/><circle cx="12" cy="12" r="3"/></svg>;
    default: return null;
  }
}

// ──── Connector arrow with traveling dot ───────────────────────────────

function FlowArrow({ visible, color, delay = 0 }) {
  return (
    <div style={{
      position: 'relative',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      opacity: visible ? 1 : 0,
      transition: `opacity 400ms ease ${delay}ms`,
    }}>
      <svg viewBox="0 0 60 60" width="60" height="60" style={{ display: 'block' }}>
        <defs>
          <linearGradient id="arrowGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%"   stopColor={pitchC.hair2} />
            <stop offset="100%" stopColor={pitchC.hair2} />
          </linearGradient>
        </defs>
        {/* Static arrow */}
        <path d="M6 30 H50 M42 22 L52 30 L42 38"
          fill="none" stroke={pitchC.hair2} strokeWidth="1.8"
          strokeLinecap="round" strokeLinejoin="round"/>
        {/* Traveling dot */}
        <circle r="3.5" fill={color || pitchC.orange} opacity="0.85">
          <animate
            attributeName="cx"
            values="8;52"
            dur="1.6s"
            begin={`${delay / 1000}s`}
            repeatCount="indefinite"
          />
          <animate
            attributeName="opacity"
            values="0;0.9;0.9;0"
            keyTimes="0;0.15;0.85;1"
            dur="1.6s"
            begin={`${delay / 1000}s`}
            repeatCount="indefinite"
          />
          <set attributeName="cy" to="30" />
        </circle>
      </svg>
    </div>
  );
}

// ──── Layer column ─────────────────────────────────────────────────────

const COLORS = {
  data:   { accent: pitchC.sea,   tint: pitchC.seaBg,   strip: pitchC.sea },
  domain: { accent: pitchC.orange, tint: '#fff1ec',     strip: 'linear-gradient(90deg, #ff663a 0%, #7f3399 50%, #000099 100%)' },
  output: { accent: pitchC.moss,  tint: pitchC.mossBg,  strip: pitchC.moss },
};

function Column({ tier, label, title, blurb, items, theme, visible, hero, dimmed, emphasized, onEnter, onLeave, delay = 0 }) {
  const c = COLORS[theme];
  return (
    <div
      onMouseEnter={onEnter}
      onMouseLeave={onLeave}
      style={{
        background: '#fff',
        border: `1px solid ${emphasized ? c.accent : pitchC.hair}`,
        borderRadius: 18,
        padding: '24px 26px',
        display: 'flex', flexDirection: 'column',
        gap: 14,
        position: 'relative',
        overflow: 'hidden',
        minHeight: 0,
        cursor: 'default',
        opacity: visible ? (dimmed ? 0.42 : 1) : 0,
        transform: visible ? (emphasized ? 'translateY(-3px)' : 'translateY(0)') : 'translateY(12px)',
        transition: `opacity 400ms cubic-bezier(.2,.7,.2,1) ${delay}ms, transform 400ms cubic-bezier(.2,.7,.2,1) ${delay}ms, border-color 220ms ease, box-shadow 220ms ease`,
        boxShadow: emphasized
          ? `0 16px 32px ${c.accent}22, 0 0 0 2px ${c.accent}33`
          : hero
            ? '0 4px 20px rgba(127,51,153,0.08), 0 1px 0 rgba(0,0,153,0.04)'
            : '0 1px 0 rgba(0,0,0,0.02)',
      }}
    >
      {/* Top color strip */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 0,
        height: hero ? 5 : 4,
        background: c.strip,
      }} />

      {/* Eyebrow */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        fontFamily: pitchMono,
        fontSize: 13, fontWeight: 700, letterSpacing: 1.8, textTransform: 'uppercase',
        color: c.accent,
      }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          width: 28, height: 28, borderRadius: 8,
          background: c.tint,
          color: c.accent,
          fontSize: 13, fontWeight: 700,
          letterSpacing: 0,
        }}>{tier}</span>
        <span>{label}</span>
      </div>

      {/* Title */}
      <div style={{
        fontSize: hero ? 30 : 26, lineHeight: 1.1,
        fontWeight: 500,
        letterSpacing: -0.012,
        color: pitchC.ink,
      }}>{title}</div>

      {/* Blurb */}
      <div style={{
        fontSize: 16, lineHeight: 1.35,
        color: pitchC.muted,
      }}>{blurb}</div>

      {/* Items */}
      <div style={{
        display: 'flex', flexDirection: 'column',
        gap: 8,
        marginTop: 4,
      }}>
        {items.map((it, i) => (
          <div key={it.label} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '8px 12px',
            background: pitchC.bgSoft,
            border: `1px solid ${pitchC.hair}`,
            borderRadius: 9,
            fontSize: 15,
            color: pitchC.ink,
            fontWeight: 500,
            letterSpacing: -0.005,
            opacity: visible ? 1 : 0,
            transform: visible ? 'translateY(0)' : 'translateY(6px)',
            transition: `opacity 360ms ease ${delay + 150 + i * 50}ms, transform 360ms ease ${delay + 150 + i * 50}ms`,
          }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              color: c.accent,
              flexShrink: 0,
            }}>
              <Glyph kind={it.icon} size={18} color={c.accent} />
            </span>
            <span>{it.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ──── Main slide ───────────────────────────────────────────────────────

function Slide6Layers() {
  const [stage, setStage] = s6use(0);
  const [hovered, setHovered] = s6use(null);

  s6eff(() => {
    const ts = [
      setTimeout(() => setStage(1), 150),  // workflow arrow
      setTimeout(() => setStage(2), 400),  // col 1
      setTimeout(() => setStage(3), 650),  // col 2
      setTimeout(() => setStage(4), 900),  // col 3
      setTimeout(() => setStage(5), 1400), // column arrows + trust line
    ];
    return () => ts.forEach(clearTimeout);
  }, []);

  const dim = (key) => hovered !== null && hovered !== key;
  const emp = (key) => hovered === key;

  return (
    <div style={{
      flex: 1, minHeight: 0,
      display: 'flex', flexDirection: 'column',
      gap: 22,
      marginTop: 12,
    }}>

      {/* Workflow arrow band — now at TOP */}
      <div style={{
        flexShrink: 0,
        position: 'relative',
        display: 'flex', alignItems: 'center',
        gap: 14,
        opacity: stage >= 1 ? 1 : 0,
        transform: stage >= 1 ? 'translateY(0)' : 'translateY(-8px)',
        transition: 'opacity 420ms ease, transform 420ms ease',
      }}>
        <div style={{
          padding: '8px 16px',
          background: '#fff',
          border: `1.5px solid ${pitchC.sea}`,
          borderRadius: 999,
          fontFamily: pitchMono,
          fontSize: 13, fontWeight: 700,
          letterSpacing: 1.4, textTransform: 'uppercase',
          color: pitchC.sea,
          whiteSpace: 'nowrap',
          flexShrink: 0,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: pitchC.sea }} />
          Flexible inputs
        </div>

        <div style={{
          flex: 1, position: 'relative',
          height: 52, overflow: 'hidden',
        }}>
          <svg viewBox="0 0 1000 52" preserveAspectRatio="none"
               width="100%" height="52" style={{ display: 'block' }}>
            <defs>
              <linearGradient id="wfFill" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%"   stopColor="#1e6dff" stopOpacity="0.10" />
                <stop offset="50%"  stopColor="#ff663a" stopOpacity="0.16" />
                <stop offset="100%" stopColor="#1e7a52" stopOpacity="0.12" />
              </linearGradient>
              <linearGradient id="wfStroke" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%"   stopColor="#1e6dff" />
                <stop offset="50%"  stopColor="#ff663a" />
                <stop offset="100%" stopColor="#1e7a52" />
              </linearGradient>
              <linearGradient id="wfSheen" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%"   stopColor="#fff" stopOpacity="0" />
                <stop offset="50%"  stopColor="#fff" stopOpacity="0.55" />
                <stop offset="100%" stopColor="#fff" stopOpacity="0" />
              </linearGradient>
            </defs>
            <path d="M2 10 L940 10 L988 26 L940 42 L2 42 Z"
                  fill="url(#wfFill)" stroke="url(#wfStroke)" strokeWidth="1.5"/>
            <rect x="-200" y="10" width="200" height="32" fill="url(#wfSheen)">
              <animate attributeName="x" from="-200" to="1000" dur="3.2s" begin="0s" repeatCount="indefinite"/>
            </rect>
          </svg>
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: pitchMono,
            fontSize: 16, fontWeight: 700,
            letterSpacing: 3.8, textTransform: 'uppercase',
            color: pitchC.ink,
            pointerEvents: 'none',
          }}>
            Your business's workflow
          </div>
        </div>

        <div style={{
          padding: '8px 16px',
          background: '#fff',
          border: `1.5px solid ${pitchC.moss}`,
          borderRadius: 999,
          fontFamily: pitchMono,
          fontSize: 13, fontWeight: 700,
          letterSpacing: 1.4, textTransform: 'uppercase',
          color: pitchC.moss,
          whiteSpace: 'nowrap',
          flexShrink: 0,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: pitchC.moss }} />
          Flexible outputs
        </div>
      </div>

      {/* Three columns + connector arrows */}
      <div style={{
        flex: 1,
        display: 'grid',
        gridTemplateColumns: '1fr 60px 1.1fr 60px 1fr',
        alignItems: 'stretch',
        minHeight: 0,
      }}>
        <Column
          tier="01" label="Data"
          title="Whatever you already have."
          blurb="Connects to your existing data estate — warehouse, CRM, docs, transcripts, streams. No re-platforming."
          theme="data"
          visible={stage >= 2}
          dimmed={dim('data')} emphasized={emp('data')}
          onEnter={() => setHovered('data')}
          onLeave={() => setHovered(null)}
          delay={0}
          items={[
            { icon: 'warehouse',   label: 'Data warehouse' },
            { icon: 'crm',         label: 'CRM / ERP' },
            { icon: 'docs',        label: 'Documents' },
            { icon: 'transcripts', label: 'Transcripts' },
            { icon: 'api',         label: 'APIs' },
            { icon: 'streams',     label: 'Live streams' },
          ]}
        />
        <FlowArrow visible={stage >= 5} color={pitchC.orange} delay={0} />
        <Column
          tier="02" label="Domain"
          title="Your team's judgement, encoded."
          blurb="Methodology, KPI definitions, significance bars, decision criteria, vocabulary — learned by embedding with your experts, then encoded so every finding meets their bar."
          theme="domain"
          hero
          visible={stage >= 3}
          dimmed={dim('domain')} emphasized={emp('domain')}
          onEnter={() => setHovered('domain')}
          onLeave={() => setHovered(null)}
          delay={0}
          items={[
            { icon: 'methodology', label: 'Methodology' },
            { icon: 'kpi',         label: 'KPI definitions' },
            { icon: 'sig',         label: 'Significance bars' },
            { icon: 'decision',    label: 'Decision criteria' },
            { icon: 'lexicon',     label: 'Vocabulary & tone' },
          ]}
        />
        <FlowArrow visible={stage >= 5} color={pitchC.moss} delay={400} />
        <Column
          tier="03" label="Trusted output"
          title="Findings, proved and cited."
          blurb="Every number traces back to source. The same evidence travels everywhere — deck, email, Slack, system of record."
          theme="output"
          visible={stage >= 4}
          dimmed={dim('output')} emphasized={emp('output')}
          onEnter={() => setHovered('output')}
          onLeave={() => setHovered(null)}
          delay={0}
          items={[
            { icon: 'deck',    label: 'Branded deck' },
            { icon: 'email',   label: 'Email digest' },
            { icon: 'slack',   label: 'Slack' },
            { icon: 'alert',   label: 'Alerts' },
            { icon: 'apiPush', label: 'API push' },
            { icon: 'board',   label: 'Board report' },
          ]}
        />
      </div>

      {/* Credibility lockup — your expertise, on cutting-edge agent tooling */}
      <div style={{
        flexShrink: 0,
        display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 22,
        fontFamily: pitchMono,
        fontSize: 14, color: pitchC.muted,
        opacity: stage >= 5 ? 1 : 0,
        transition: 'opacity 420ms ease 300ms',
      }}>
        <span><span style={{ color: pitchC.navy, fontWeight: 700 }}>Your expertise</span>, encoded</span>
        <span style={{ width: 5, height: 5, borderRadius: '50%', background: pitchC.hair2 }} />
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
          Built on
          <img src="assets/anthropic-wordmark.svg" alt="Anthropic"
               style={{ height: 15, opacity: 0.82, transform: 'translateY(1px)' }} />
          agent design standards
        </span>
        <span style={{ width: 5, height: 5, borderRadius: '50%', background: pitchC.hair2 }} />
        <span>Powered by <span style={{ color: pitchC.orange, fontWeight: 700 }}>Claude</span></span>
      </div>
    </div>
  );
}

function TrustChip({ kind, label, color }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      padding: '8px 14px',
      background: '#fff',
      border: `1px solid ${pitchC.hair}`,
      borderRadius: 10,
      fontFamily: pitchMono,
      fontSize: 13, fontWeight: 600,
      letterSpacing: 0.4,
      color: pitchC.ink,
    }}>
      <span style={{ color, display: 'inline-flex' }}>
        <Glyph kind={kind} size={18} color={color} />
      </span>
      {label}
    </div>
  );
}

window.Slide6Layers = Slide6Layers;