// "From mess to shipped" — wisprflow-style before/after transformation.
// A casual, messy chat message on the left → a clean shipped deliverable
// on the right. Three examples, switchable via a segmented control.

const { useState: useTxState, useEffect: useTxEffect } = React;

const TRANSFORMS = [
  {
    id: 'deploy',
    tab: 'Ship code',
    tint: 'var(--t-code)',
    sender: 'Dan',
    senderInitial: 'D',
    senderColor: '#2C5A99',
    time: '03:08',
    // Messy input
    input: {
      kind: 'voice',
      voiceLen: '0:31',
      caption: 'prod is down, disk completely full 😩 fix it and redeploy, i’m going to bed. need it working by morning',
    },
    // Clean output
    output: {
      title: 'Disk cleaned · service redeployed',
      meta: 'Done at 03:14 · 6 min',
      steps: [
        'Found runaway log writer — 27 GB of debug logs',
        'Rotated + compressed, freed 26.9 GB (→ 124 MB)',
        'Added logrotate rule so it never recurs',
        'Redeployed api-gateway · health checks green',
      ],
      receipt: 'PR #482 merged · deploy #1190 · uptime restored',
    },
  },
  {
    id: 'design',
    tab: 'Ship design',
    tint: 'var(--t-plan)',
    sender: 'Ana',
    senderInitial: 'A',
    senderColor: '#6B4FA8',
    time: '21:40',
    input: {
      kind: 'photo',
      caption: 'need a banner for the beauty pageant, due tomorrow morning. something bright, with a crown. here’s last year’s for reference 👇',
      photoLabel: 'last-year-banner.jpg',
    },
    output: {
      title: 'Pageant banner · print-ready',
      meta: '16 revisions · approved 23:55',
      steps: [
        'Drafted 4 directions from the reference',
        'Iterated on the crown + palette you liked',
        'Exported A2 @ 300 dpi with 3 mm bleed',
        'Packaged CMYK PDF for the print shop',
      ],
      receipt: 'banner-final-v16.pdf · sent to print · ✓ confirmed',
    },
  },
  {
    id: 'prompts',
    tab: 'Ship a plan',
    tint: 'var(--t-research)',
    sender: 'Max',
    senderInitial: 'M',
    senderColor: '#C9501A',
    time: '14:22',
    input: {
      kind: 'voice',
      voiceLen: '0:47',
      caption: 'want a travel app that builds routes and splits the budget across a group, monetized via affiliate links. draft what the devs need',
    },
    output: {
      title: '112 dev-ready prompts',
      meta: 'Structured in 2 min · grouped',
      steps: [
        '50 feature builds (routing, budget split, affiliate)',
        '18 testing prompts with edge cases',
        '1 master setup prompt for the repo',
        '43 polish + copy prompts, sequenced',
      ],
      receipt: 'octodus-travel-brief.md · 112 prompts · ready to paste',
    },
  },
];

function MessyInput({ t }) {
  return (
    <div className="tx-bubble" style={{ '--sender': t.senderColor }}>
      <div className="tx-bubble-head">
        <span className="tx-avatar" style={{ background: t.senderColor }}>{t.senderInitial}</span>
        <span className="tx-sender">{t.sender}</span>
        <span className="tx-time">{t.time}</span>
      </div>

      {t.input.kind === 'voice' && (
        <div className="tx-voice">
          <span className="tx-voice-play">{Icons.voice({ width: 13, height: 13 })}</span>
          <span className="tx-voice-wave">
            {[7, 12, 5, 14, 9, 16, 6, 13, 8, 15, 5, 11, 9, 14, 6].map((h, i) => (
              <span key={i} style={{ height: h }} />
            ))}
          </span>
          <span className="tx-voice-len">{t.input.voiceLen}</span>
        </div>
      )}

      {t.input.kind === 'photo' && (
        <div className="tx-photo">
          <div className="tx-photo-thumb" aria-hidden="true">
            {Icons.image ? Icons.image({ width: 18, height: 18 }) : null}
          </div>
          <span className="tx-photo-name">{t.input.photoLabel}</span>
        </div>
      )}

      <p className="tx-caption">{t.input.caption}</p>
    </div>
  );
}

function ShippedOutput({ t }) {
  return (
    <div className="tx-out">
      <div className="tx-out-head">
        <span className="tx-out-mark">{Icons.mark({ width: 16, height: 16 })}</span>
        <div className="tx-out-titles">
          <div className="tx-out-title">{t.output.title}</div>
          <div className="tx-out-meta">{t.output.meta}</div>
        </div>
        <span className="tx-out-badge">SHIPPED</span>
      </div>

      <ul className="tx-out-steps">
        {t.output.steps.map((s, i) => (
          <li key={i} style={{ '--i': i }}>
            <span className="tx-out-check">{Icons.check({ width: 10, height: 10 })}</span>
            <span>{s}</span>
          </li>
        ))}
      </ul>

      <div className="tx-out-receipt">
        <span className="tx-out-receipt-dot" />
        {t.output.receipt}
      </div>
    </div>
  );
}

function TransformSection() {
  const [active, setActive] = useTxState(TRANSFORMS[0].id);
  const [animKey, setAnimKey] = useTxState(0);
  const t = TRANSFORMS.find((x) => x.id === active);

  const select = (id) => {
    setActive(id);
    setAnimKey((k) => k + 1);
  };

  return (
    <section className="transform" id="transform">
      <div className="container">
        <header className="transform-head" data-reveal>
          <div className="eyebrow">Chaos in · shipped out</div>
          <h2>
            You send it messy.<br/>
            <em>It comes back done.</em>
          </h2>
          <p>
            No clean briefs. No tickets. Drop in the half-formed thought you&apos;d send a
            real teammate — a voice note at 3 AM, a photo with &ldquo;make it pop&rdquo; —
            and finished work comes back.
          </p>
        </header>

        <div className="transform-tabs" role="tablist" data-reveal>
          {TRANSFORMS.map((x) => (
            <button
              key={x.id}
              role="tab"
              aria-selected={active === x.id}
              className={`transform-tab ${active === x.id ? 'on' : ''}`}
              onClick={() => select(x.id)}
            >
              {x.tab}
            </button>
          ))}
        </div>

        <div className="transform-stage" key={animKey} data-reveal>
          <div className="transform-col transform-col-in">
            <div className="transform-col-label">
              <span className="transform-col-tag">What you send</span>
            </div>
            <MessyInput t={t} />
          </div>

          <div className="transform-arrow" aria-hidden="true">
            <div className="transform-arrow-circle">
              {Icons.mark({ width: 26, height: 26 })}
            </div>
            <div className="transform-arrow-line" />
            <div className="transform-arrow-head">{Icons.arrow({ width: 18, height: 18 })}</div>
          </div>

          <div className="transform-col transform-col-out">
            <div className="transform-col-label">
              <span className="transform-col-tag transform-col-tag-out">What ships</span>
            </div>
            <ShippedOutput t={t} />
          </div>
        </div>
      </div>

      <style>{`
        .transform {
          padding: 120px 0;
          border-top: 1px solid var(--border);
          background:
            radial-gradient(ellipse 50% 40% at 50% 0%, var(--accent-tint-06), transparent 70%);
        }
        .transform-head {
          max-width: 640px;
          margin: 0 auto 44px;
          text-align: center;
        }
        .transform-head h2 {
          font-size: clamp(2.2rem, 4.2vw, 3.4rem);
          line-height: 1.0;
          letter-spacing: -0.04em;
          margin: 14px 0 18px;
        }
        .transform-head h2 em {
          font-style: normal;
          background: linear-gradient(120deg, var(--accent-light), var(--accent));
          -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .transform-head p {
          font-size: 16px;
          line-height: 1.6;
          color: var(--text-secondary);
          max-width: 520px;
          margin: 0 auto;
          text-wrap: pretty;
        }

        .transform-tabs {
          display: inline-flex;
          gap: 4px;
          padding: 5px;
          background: var(--bg-card);
          border: 1px solid var(--border);
          border-radius: 999px;
          margin: 0 auto 36px;
          left: 50%;
          position: relative;
          transform: translateX(-50%);
        }
        .transform-tab {
          background: transparent;
          border: none;
          padding: 9px 20px;
          border-radius: 999px;
          color: var(--text-secondary);
          font-size: 14px;
          font-weight: 500;
          letter-spacing: -0.01em;
          white-space: nowrap;
          transition: color 180ms var(--ease-out), background 180ms var(--ease-out);
        }
        .transform-tab:hover { color: var(--text); }
        .transform-tab.on {
          background: var(--accent);
          color: var(--on-accent);
          font-weight: 600;
          box-shadow: 0 6px 18px -8px var(--accent-tint-50);
        }

        .transform-stage {
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          gap: 0;
          align-items: center;
          max-width: 980px;
          margin: 0 auto;
        }
        @media (max-width: 820px) {
          .transform-stage { grid-template-columns: 1fr; gap: 0; }
        }

        .transform-col {
          min-width: 0;
          animation: txColIn 600ms var(--ease-out) both;
        }
        .transform-col-in  { animation-delay: 0ms; }
        .transform-col-out { animation-delay: 220ms; }
        @keyframes txColIn {
          from { opacity: 0; transform: translateY(16px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .transform-col-label { margin-bottom: 12px; }
        .transform-col-tag {
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--text-muted);
        }
        .transform-col-tag-out { color: var(--accent); }

        /* ── Messy input bubble ── */
        .tx-bubble {
          background: var(--bg-card);
          border: 1px solid var(--border);
          border-radius: 18px 18px 18px 6px;
          padding: 16px 18px;
          box-shadow: 0 10px 28px -20px rgba(58,49,32,0.25);
        }
        .tx-bubble-head {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 12px;
        }
        .tx-avatar {
          width: 24px; height: 24px;
          border-radius: 7px;
          color: #fff;
          font-family: var(--font-mono);
          font-size: 11px;
          font-weight: 700;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
        .tx-sender {
          font-size: 13.5px;
          font-weight: 600;
          color: var(--text);
        }
        .tx-time {
          margin-left: auto;
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--text-muted);
        }
        .tx-voice {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 8px 14px;
          background: var(--accent-soft);
          border: 1px solid var(--accent-tint-25);
          border-radius: 999px;
          margin-bottom: 12px;
        }
        .tx-voice-play { color: var(--accent); display: inline-flex; }
        .tx-voice-wave { display: inline-flex; align-items: center; gap: 2px; }
        .tx-voice-wave span {
          width: 2.5px;
          background: var(--accent);
          border-radius: 2px;
          opacity: 0.7;
        }
        .tx-voice-len {
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--text-secondary);
        }
        .tx-photo {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px 12px;
          background: var(--bg-elev);
          border: 1px solid var(--border);
          border-radius: 12px;
          margin-bottom: 12px;
        }
        .tx-photo-thumb {
          width: 38px; height: 38px;
          border-radius: 8px;
          background: linear-gradient(135deg, #C9A876 0%, #B8956F 60%, #8F6F4E 100%);
          color: rgba(255,255,255,0.85);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }
        .tx-photo-name {
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--text-secondary);
        }
        .tx-caption {
          font-size: 14.5px;
          line-height: 1.55;
          color: var(--text);
        }

        /* ── Arrow / transform ── */
        .transform-arrow {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0 28px;
          position: relative;
        }
        @media (max-width: 820px) {
          .transform-arrow {
            flex-direction: row;
            padding: 22px 0;
            justify-content: center;
            gap: 10px;
          }
        }
        .transform-arrow-circle {
          width: 52px; height: 52px;
          border-radius: 50%;
          background: var(--accent);
          color: var(--on-accent);
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 8px 24px -8px var(--accent-tint-60);
          z-index: 1;
          animation: txPulse 2.6s var(--ease-out) infinite;
        }
        @keyframes txPulse {
          0%, 100% { box-shadow: 0 8px 24px -8px var(--accent-tint-60); }
          50%      { box-shadow: 0 8px 32px -4px var(--accent-tint-70); }
        }
        .transform-arrow-line {
          width: 2px;
          height: 22px;
          background: linear-gradient(180deg, var(--accent), transparent);
        }
        @media (max-width: 820px) {
          .transform-arrow-line { width: 22px; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); }
        }
        .transform-arrow-head {
          color: var(--accent);
          transform: rotate(90deg);
        }
        @media (max-width: 820px) {
          .transform-arrow-head { transform: rotate(0deg); }
        }

        /* ── Shipped output ── */
        .tx-out {
          background: var(--bg-card);
          border: 1px solid var(--accent-tint-25);
          border-radius: 18px;
          padding: 18px 20px 16px;
          box-shadow: 0 16px 40px -24px var(--accent-tint-40);
          position: relative;
          overflow: hidden;
        }
        .tx-out::before {
          content: "";
          position: absolute;
          top: 0; left: 0; right: 0;
          height: 3px;
          background: linear-gradient(90deg, var(--accent), var(--accent-light));
        }
        .tx-out-head {
          display: flex;
          align-items: center;
          gap: 12px;
          padding-bottom: 14px;
          border-bottom: 1px solid var(--border);
          margin-bottom: 14px;
        }
        .tx-out-mark {
          width: 32px; height: 32px;
          border-radius: 9px;
          background: var(--accent-soft);
          color: var(--accent);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: 1px solid var(--accent-tint-25);
          flex-shrink: 0;
        }
        .tx-out-titles { flex: 1; min-width: 0; }
        .tx-out-title {
          font-family: var(--font-heading);
          font-size: 16px;
          font-weight: 700;
          letter-spacing: -0.02em;
          color: var(--text);
        }
        .tx-out-meta {
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--text-muted);
          margin-top: 2px;
        }
        .tx-out-badge {
          font-family: var(--font-mono);
          font-size: 9.5px;
          font-weight: 700;
          letter-spacing: 0.14em;
          padding: 4px 9px;
          background: var(--accent);
          color: var(--on-accent);
          border-radius: 999px;
          flex-shrink: 0;
        }
        .tx-out-steps {
          list-style: none;
          display: flex;
          flex-direction: column;
          gap: 9px;
          margin-bottom: 16px;
        }
        .tx-out-steps li {
          display: flex;
          gap: 10px;
          font-size: 13.5px;
          line-height: 1.45;
          color: var(--text-secondary);
          animation: txStepIn 500ms var(--ease-out) both;
          animation-delay: calc(360ms + var(--i) * 90ms);
        }
        @keyframes txStepIn {
          from { opacity: 0; transform: translateX(-6px); }
          to   { opacity: 1; transform: translateX(0); }
        }
        .tx-out-check {
          width: 16px; height: 16px;
          border-radius: 50%;
          background: var(--accent-soft);
          color: var(--accent);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          margin-top: 1px;
        }
        .tx-out-receipt {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 12px;
          background: var(--bg-elev);
          border: 1px dashed var(--border-light);
          border-radius: 10px;
          font-family: var(--font-mono);
          font-size: 11.5px;
          color: var(--text-secondary);
          letter-spacing: 0.01em;
        }
        .tx-out-receipt-dot {
          width: 6px; height: 6px;
          border-radius: 50%;
          background: var(--accent);
          flex-shrink: 0;
          animation: oct-pulse-dot 2s ease-in-out infinite;
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { TransformSection });