/* Loopette — page sections */

const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React;

/* ============== NAV ============== */
function Nav() {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(10,10,11,0.78)',
      backdropFilter: 'blur(14px)',
      WebkitBackdropFilter: 'blur(14px)',
      borderBottom: '1px solid var(--lp-line)',
    }}>
      <div className="lp-container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '1.1rem 4rem',
      }}>
        <a href="#top" style={{
          display: 'flex', alignItems: 'center', gap: '0.6rem',
          color: 'var(--lp-fg)', textDecoration: 'none',
        }}>
          <LogoMark />
          <span style={{
            fontFamily: 'var(--font-sans)', fontWeight: 700,
            letterSpacing: '0.18em', fontSize: '1.05rem',
          }}>LOOPETTE</span>
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: '2rem' }}>
          <a href="#sound" className="lp-mono" style={navLink}>Sound</a>
          <a href="#feel" className="lp-mono" style={navLink}>Feel</a>
          <a href="#flow" className="lp-mono" style={navLink}>Flow</a>
          <a href="#download" className="lp-btn lp-btn--primary" style={{ padding: '0.6rem 1rem' }}>
            Get Loopette
          </a>
        </div>
      </div>
    </nav>
  );
}
const navLink = {
  color: 'var(--lp-fg-2)', textDecoration: 'none',
  fontSize: '0.78rem', letterSpacing: '0.16em', textTransform: 'uppercase',
  transition: 'color 200ms',
};

function LogoMark() {
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
      <circle cx="11" cy="11" r="10" stroke="var(--lp-teal)" strokeWidth="1.5" strokeDasharray="2 2.5" />
      <circle cx="11" cy="11" r="2" fill="var(--lp-teal)" />
    </svg>
  );
}

/* ============== TICKER ============== */
function Ticker() {
  const items = [
    "PRESS PLAY", "•", "THEN PRESS THE TAPE", "•",
    "WOW & FLUTTER", "•", "OVERDUB", "•", "RESAMPLE",
    "•", "VARISPEED", "•", "REVERSE", "•",
    "TAPE, IN YOUR POCKET", "•", "iOS 17+", "•",
  ];
  const seq = [...items, ...items, ...items];
  return (
    <div className="lp-ticker">
      <div className="lp-ticker-track">
        {seq.map((t, i) => (
          <span key={i} className={t === '•' ? 'dot' : ''}>{t}</span>
        ))}
      </div>
    </div>
  );
}

/* ============== HERO ============== */
function Hero() {
  return (
    <section id="top" style={{ position: 'relative', paddingTop: '3rem', paddingBottom: '5rem' }}>
      <div className="lp-guides" />
      <div className="lp-container" style={{ position: 'relative', zIndex: 1 }}>

        {/* meta strip */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          marginBottom: '3rem', flexWrap: 'wrap', gap: '1rem',
        }}>
          <span className="lp-pn">LP—001 / CASSETTE LOOPER / iOS</span>
          <span className="lp-loaded-pill"><span className="lp-led" />LOADED</span>
        </div>

        {/* headline */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.35fr) minmax(0, 0.65fr)',
          columnGap: '3rem',
          rowGap: '3rem',
          alignItems: 'end',
        }} className="lp-hero-grid">
          <div style={{ minWidth: 0 }}>
            <span className="lp-tag" style={{ color: 'var(--lp-teal)' }}>
              ◇ A POCKET CASSETTE LOOPER
            </span>
            <h1 className="lp-mega" style={{ marginTop: '1.2rem', marginBottom: 0 }}>
              Loop&nbsp;it<br/>
              <span style={{ color: 'var(--lp-orange)' }}>like&nbsp;it&apos;s</span><br/>
              <span style={{ fontStyle: 'italic', fontWeight: 600 }}>analog.</span>
            </h1>
          </div>

          <div style={{ minWidth: 0, paddingBottom: '1rem' }}>
            <p className="lp-body-lg" style={{ maxWidth: '38ch', marginBottom: '2.5rem' }}>
              A tactile tape looper that sounds like a memory and plays
              like an instrument. Press, drag, flick. The tape responds.
            </p>
            <div style={{ display: 'flex', gap: '0.8rem', flexWrap: 'wrap' }}>
              <a href="#download" className="lp-btn lp-btn--primary">
                Get Loopette
                <span style={{ fontSize: '1.1em' }}>↗</span>
              </a>
            </div>
            <div style={{
              marginTop: '2.5rem', display: 'flex', gap: '1.5rem',
              fontFamily: 'var(--font-mono)', fontSize: '0.7rem',
              letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--lp-fg-3)',
              flexWrap: 'wrap',
            }}>
              <span>iOS 17+</span>
              <span>·</span>
              <span>Universal · iPhone</span>
              <span>·</span>
              <span>v1.0</span>
            </div>
          </div>
        </div>

        {/* cassette stage */}
        <div style={{ marginTop: '5rem', position: 'relative' }}>
          <CassetteStage />
        </div>
      </div>
    </section>
  );
}

function CassetteStage() {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '1fr minmax(420px, 720px) 1fr',
      gap: '2rem',
      alignItems: 'center',
    }} className="lp-cassette-grid">
      {/* Left annotations */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', alignItems: 'flex-end' }}>
        <Annotation
          color="var(--lp-orange)"
          title="WOW + FLUTTER"
          spec="0–100% / motor drift"
          align="right"
        />
        <Annotation
          color="var(--lp-yellow)"
          title="INERTIA"
          spec="momentum decay curve"
          align="right"
        />
        <Annotation
          color="var(--lp-teal)"
          title="VARISPEED"
          spec="±2.0× pitch follows"
          align="right"
        />
      </div>

      {/* Cassette */}
      <div>
        <Cassette label="MIX TAPE" time="0:10.33" />
        <div style={{
          marginTop: '1rem', display: 'flex', justifyContent: 'space-between',
          fontFamily: 'var(--font-mono)', fontSize: '0.7rem',
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'var(--lp-fg-3)',
        }}>
          <span>↘ DRAG TO SCRUB</span>
          <span>FLICK TO SPIN</span>
        </div>
      </div>

      {/* Right annotations */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
        <Annotation
          color="var(--lp-teal)"
          title="LADDER FILTER"
          spec="resonant LP / 24dB"
          align="left"
        />
        <Annotation
          color="var(--lp-orange)"
          title="SATURATION"
          spec="tape compression"
          align="left"
        />
        <Annotation
          color="var(--lp-yellow)"
          title="HISS"
          spec="age / noise floor"
          align="left"
        />
      </div>
    </div>
  );
}

function Annotation({ color, title, spec, align }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: '0.7rem',
      flexDirection: align === 'right' ? 'row-reverse' : 'row',
      width: '100%',
    }}>
      <span style={{
        width: 8, height: 8, borderRadius: '50%',
        background: color, boxShadow: `0 0 8px ${color}`,
        flexShrink: 0,
      }} />
      <span style={{ flex: 1, height: 1, background: 'var(--lp-line-2)' }} />
      <div style={{ textAlign: align === 'right' ? 'right' : 'left' }}>
        <div style={{
          fontFamily: 'var(--font-sans)', fontWeight: 600,
          fontSize: '0.78rem', letterSpacing: '0.14em',
          textTransform: 'uppercase', color: 'var(--lp-fg)',
        }}>{title}</div>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: '0.68rem',
          color: 'var(--lp-fg-3)', letterSpacing: '0.06em',
          marginTop: 2,
        }}>{spec}</div>
      </div>
    </div>
  );
}

/* ============== SIGNATURE MOVE ============== */
function SignatureMove() {
  const [stage, setStage] = useState2(0); // 0 idle, 1 press, 2 drag, 3 flick

  useEffect2(() => {
    const id = setInterval(() => setStage((s) => (s + 1) % 4), 2400);
    return () => clearInterval(id);
  }, []);

  const stages = [
    { label: 'IDLE', desc: 'The tape spins. The loop plays.', color: 'var(--lp-teal)' },
    { label: 'PRESS', desc: 'Touch and the tape freezes at the spot.', color: 'var(--lp-orange)' },
    { label: 'DRAG', desc: 'Scratch like a turntable. Speed follows your finger.', color: 'var(--lp-yellow)' },
    { label: 'FLICK', desc: 'Throw it. It coasts down with momentum.', color: 'var(--lp-teal)' },
  ];

  return (
    <section id="feel" className="lp-section" style={{
      borderTop: '1px solid var(--lp-line)',
      borderBottom: '1px solid var(--lp-line)',
    }}>
      <div className="lp-container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
          gap: '4rem', alignItems: 'center',
        }} className="lp-feel-grid">

          <div>
            <span className="lp-tag" style={{ color: 'var(--lp-orange)' }}>
              ★ THE SIGNATURE MOVE
            </span>
            <h2 className="lp-h1" style={{ marginTop: '1rem', marginBottom: '1.5rem' }}>
              Touch the<br />
              tape. The tape<br />
              <span style={{ color: 'var(--lp-orange)' }}>touches back.</span>
            </h2>
            <p className="lp-body-lg" style={{ maxWidth: '46ch', marginBottom: '2.5rem' }}>
              Most loopers feel like spreadsheets. Loopette feels like tape.
              The cassette reacts to your finger — press, drag, flick — at
              the speed of your hand.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
              {stages.map((s, i) => (
                <div key={i}
                  onClick={() => setStage(i)}
                  style={{
                    display: 'grid',
                    gridTemplateColumns: '90px 1fr',
                    alignItems: 'center', gap: '1.2rem',
                    padding: '1rem 1.2rem',
                    border: '1px solid ' + (stage === i ? s.color : 'var(--lp-line)'),
                    background: stage === i ? 'rgba(255,255,255,0.02)' : 'transparent',
                    cursor: 'pointer',
                    transition: 'all 280ms cubic-bezier(0.65, 0, 0.35, 1)',
                  }}
                >
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: '0.7rem',
                    letterSpacing: '0.18em',
                    color: stage === i ? s.color : 'var(--lp-fg-3)',
                    fontWeight: 600,
                  }}>0{i+1} / {s.label}</span>
                  <span className="lp-body" style={{
                    color: stage === i ? 'var(--lp-fg)' : 'var(--lp-fg-2)',
                  }}>{s.desc}</span>
                </div>
              ))}
            </div>
          </div>

          {/* visual: oversized finger / cassette interaction */}
          <div style={{ position: 'relative', minHeight: 460 }}>
            <FeelDiagram stage={stage} />
          </div>
        </div>
      </div>
    </section>
  );
}

function FeelDiagram({ stage }) {
  // a more anatomical finger; per-stage motion driven by CSS keyframes via a stage key
  return (
    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
      <svg viewBox="0 0 600 480" style={{ width: '100%', height: 'auto' }}>
        <defs>
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(243,239,228,0.04)" strokeWidth="1" />
          </pattern>
          {/* finger gradient — soft skin-tone-neutral, dark theme */}
          <linearGradient id="finger-grad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#2a2a30" />
            <stop offset="1" stopColor="#16161a" />
          </linearGradient>
        </defs>
        <rect width="600" height="480" fill="url(#grid)" />

        {/* cassette outline */}
        <g transform="translate(80, 140)" stroke="var(--lp-fg)" strokeWidth="1.4" fill="none">
          <rect width="440" height="240" rx="14" fill="#0e0e10" />
          <rect x="34" y="24" width="372" height="56" rx="3" fill="var(--lp-paper)" stroke="none" />
          <text x="220" y="60" textAnchor="middle"
            fill="var(--lp-ink)" fontFamily="var(--font-sans)" fontWeight="700"
            fontSize="20" letterSpacing="6">MIX TAPE</text>
          <rect x="20" y="100" width="400" height="120" rx="6" fill="#050507" />
          {/* spools — wobble during press to suggest freeze */}
          <g style={{
            transformOrigin: '100px 160px',
            animation: stage === 0 ? 'feel-spool-spin 4s linear infinite' :
                       stage === 3 ? 'feel-spool-spindown 1.6s cubic-bezier(0.16,1,0.3,1) infinite' : 'none',
          }}>
            <circle cx="100" cy="160" r="40" stroke="var(--lp-orange)" strokeWidth="1.4" />
            <circle cx="100" cy="160" r="14" />
            <line x1="100" y1="120" x2="100" y2="140" stroke="var(--lp-orange)" strokeWidth="1" />
          </g>
          <g style={{
            transformOrigin: '340px 160px',
            animation: stage === 0 ? 'feel-spool-spin-rev 4s linear infinite' :
                       stage === 3 ? 'feel-spool-spindown-rev 1.6s cubic-bezier(0.16,1,0.3,1) infinite' : 'none',
          }}>
            <circle cx="340" cy="160" r="40" stroke="var(--lp-orange)" strokeWidth="1.4" />
            <circle cx="340" cy="160" r="14" />
            <line x1="340" y1="120" x2="340" y2="140" stroke="var(--lp-orange)" strokeWidth="1" />
          </g>
          {/* infinity */}
          <path
            d="M 180 160 C 180 130, 210 130, 220 160 C 230 190, 260 190, 260 160 C 260 130, 230 130, 220 160 C 210 190, 180 190, 180 160 Z"
            stroke="var(--lp-yellow)" strokeWidth="2"
          />
          <circle cx="220" cy="160" r="3" fill="var(--lp-teal)" stroke="none" />
        </g>

        {/* === Stage trails / accents === */}
        {stage === 2 && (
          <g key="drag-trail" stroke="var(--lp-yellow)" strokeWidth="1.2" fill="none" opacity="0.45">
            <path d="M 240 360 Q 320 350 400 360" strokeDasharray="3 4" />
            <path d="M 232 356 l -8 4 l 8 4" />
            <path d="M 408 356 l 8 4 l -8 4" />
          </g>
        )}
        {stage === 3 && (
          <g key="flick-trail" stroke="var(--lp-teal)" strokeWidth="1.4" fill="none" opacity="0.55">
            <path d="M 280 320 Q 360 250 460 230" strokeDasharray="3 4" />
            <path d="M 452 226 l 10 4 l -6 8" />
          </g>
        )}

        {/* === FINGER === */}
        <g
          key={`finger-${stage}`}
          style={{
            transformOrigin: '320px 60px',
            animation:
              stage === 0 ? 'feel-finger-idle 3.2s ease-in-out infinite' :
              stage === 1 ? 'feel-finger-press 1.6s ease-in-out infinite' :
              stage === 2 ? 'feel-finger-drag 1.8s ease-in-out infinite' :
              stage === 3 ? 'feel-finger-flick 1.8s cubic-bezier(0.16,1,0.3,1) infinite' :
              'none',
          }}
        >
          <g transform="translate(140, -30)">
            {/* hand pointing down — built from separate parts for clarity.
                Forearm at top, three curled fingers as bumps, thumb on right,
                index finger extended well below the curled fingers. */}
            <g transform="rotate(-6, 110, 80)">

              {/* Forearm + wrist + back of hand — single rounded rectangle */}
              <path
                d="M 40 -40
                   L 40 150
                   Q 40 170 60 170
                   L 200 170
                   Q 220 170 220 150
                   L 220 -40 Z"
                fill="url(#finger-grad)"
                stroke="var(--lp-fg)"
                strokeWidth="1.6"
                strokeLinejoin="round"
              />

              {/* Three curled finger bumps along bottom of palm */}
              <path
                d="M 50 168
                   L 50 200
                   Q 50 220 70 220
                   Q 90 220 90 200
                   L 90 168 Z"
                fill="url(#finger-grad)"
                stroke="var(--lp-fg)"
                strokeWidth="1.6"
                strokeLinejoin="round"
              />
              <path
                d="M 96 168
                   L 96 206
                   Q 96 226 116 226
                   Q 136 226 136 206
                   L 136 168 Z"
                fill="url(#finger-grad)"
                stroke="var(--lp-fg)"
                strokeWidth="1.6"
                strokeLinejoin="round"
              />
              <path
                d="M 142 168
                   L 142 200
                   Q 142 220 162 220
                   Q 182 220 182 200
                   L 182 168 Z"
                fill="url(#finger-grad)"
                stroke="var(--lp-fg)"
                strokeWidth="1.6"
                strokeLinejoin="round"
              />

              {/* Thumb — sticks out from right side */}
              <path
                d="M 218 60
                   Q 244 64 254 84
                   Q 262 108 252 130
                   Q 240 148 220 144
                   L 220 60 Z"
                fill="url(#finger-grad)"
                stroke="var(--lp-fg)"
                strokeWidth="1.6"
                strokeLinejoin="round"
              />

              {/* INDEX FINGER — extended down past the curled fingers, the active digit */}
              <path
                d="M 188 168
                   L 188 280
                   Q 188 312 208 312
                   Q 228 312 228 280
                   L 228 168 Z"
                fill="url(#finger-grad)"
                stroke="var(--lp-fg)"
                strokeWidth="1.6"
                strokeLinejoin="round"
              />

              {/* nail on index */}
              <path d="M 196 280 Q 208 274 220 280 L 220 294 Q 208 300 196 294 Z"
                fill="rgba(255,255,255,0.07)" stroke="var(--lp-fg-3)" strokeWidth="0.7" />
              {/* fingertip pad */}
              <ellipse cx="208" cy="306" rx="11" ry="4" fill="var(--lp-paper)" opacity="0.06" />

              {/* knuckle line across base of curled fingers */}
              <path d="M 50 168 L 182 168"
                stroke="var(--lp-fg-3)" strokeWidth="0.7" fill="none" opacity="0.4" />

              {/* press ripple from fingertip */}
              {stage === 1 && (
                <g>
                  <circle cx="208" cy="316" r="14" stroke="var(--lp-orange)" strokeWidth="1.5" fill="none">
                    <animate attributeName="r" from="12" to="40" dur="1.4s" repeatCount="indefinite" />
                    <animate attributeName="opacity" from="0.9" to="0" dur="1.4s" repeatCount="indefinite" />
                  </circle>
                  <circle cx="208" cy="316" r="4" fill="var(--lp-orange)" />
                </g>
              )}
            </g>
          </g>
        </g>

        {/* labels */}
        <g fontFamily="var(--font-mono)" fontSize="9" fill="var(--lp-fg-2)" letterSpacing="2">
          <text x="20" y="120">Ⓐ CASSETTE</text>
          <text x="20" y="400">Ⓑ INFINITY TAPE</text>
          <text x="380" y="50">Ⓒ FINGER · INPUT</text>
          <text x="20" y="40">FIG. 1 — TOUCH-TO-HOLD INTERACTION</text>
          <text x="20" y="460">REV.A · 2026.05</text>
        </g>
      </svg>
    </div>
  );
}

/* ============== SOUND ============== */
function Sound() {
  const cards = [
    {
      pn: 'TX-01',
      color: 'var(--lp-orange)',
      title: 'Digital tape, analog vibe',
      lines: [
        ['WOW & FLUTTER', 'slow drift, fast wobble'],
        ['SATURATION', 'soft tape compression'],
        ['BIAS', 'frequency tilt'],
        ['HISS', 'noise you can taste'],
      ],
    },
    {
      pn: 'FL-02',
      color: 'var(--lp-teal)',
      title: 'Ladder filter',
      lines: [
        ['LP / 24dB', 'four-pole resonant'],
        ['DRIVE', 'pre-filter saturation'],
        ['SWEEP', 'modulate live'],
        ['CHARACTER', 'old synth, new tape'],
      ],
    },
    {
      pn: 'LP-03',
      color: 'var(--lp-yellow)',
      title: 'Loop engine',
      lines: [
        ['OVERDUB', 'layer takes in place'],
        ['RESAMPLE', 'bounce back in'],
        ['VARISPEED', '½× through 2×'],
        ['REVERSE', 'direction as performance'],
      ],
    },
  ];
  return (
    <section id="sound" className="lp-section">
      <div className="lp-container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          marginBottom: '4rem', flexWrap: 'wrap', gap: '2rem' }}>
          <div>
            <span className="lp-tag" style={{ color: 'var(--lp-teal)' }}>◊ THE SOUND</span>
            <h2 className="lp-h1" style={{ marginTop: '1rem', maxWidth: '15ch' }}>
              Sounds like a memory.
            </h2>
          </div>
          <p className="lp-body" style={{ maxWidth: '36ch' }}>
            Wow, flutter, saturation, bias, and a resonant ladder filter
            run on every loop. Old hardware motion. New phone speed.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 0, border: '1px solid var(--lp-line-2)',
        }}>
          {cards.map((c, i) => (
            <SoundCard key={i} {...c} index={i} total={cards.length} />
          ))}
        </div>
      </div>
    </section>
  );
}

function SoundCard({ pn, color, title, lines, index, total }) {
  const [hover, setHover] = useState2(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        padding: '2rem 1.8rem',
        borderRight: index < total - 1 ? '1px solid var(--lp-line-2)' : 'none',
        background: hover ? color : 'transparent',
        color: hover ? 'var(--lp-ink)' : 'var(--lp-fg)',
        transition: 'background 380ms cubic-bezier(0.65, 0, 0.35, 1), color 380ms',
        minHeight: 360,
        display: 'flex', flexDirection: 'column',
        cursor: 'pointer',
      }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '3rem' }}>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: '0.7rem',
          letterSpacing: '0.14em', opacity: hover ? 0.7 : 0.5,
        }}>{pn}</span>
        <span style={{ fontSize: '1.4rem', lineHeight: 1 }}>↗</span>
      </div>

      <h3 className="lp-h3" style={{ marginBottom: '2rem' }}>{title}</h3>

      <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: '0.7rem' }}>
        {lines.map(([k, v], i) => (
          <div key={i} style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            paddingTop: '0.5rem',
            borderTop: '1px solid ' + (hover ? 'rgba(0,0,0,0.18)' : 'var(--lp-line)'),
          }}>
            <span style={{
              fontFamily: 'var(--font-sans)', fontWeight: 600,
              fontSize: '0.78rem', letterSpacing: '0.1em', textTransform: 'uppercase',
            }}>{k}</span>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: '0.7rem',
              opacity: 0.7, textAlign: 'right',
            }}>{v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============== WORKFLOW ============== */
function Workflow() {
  const steps = [
    { num: '01', label: 'RECORD', desc: 'Tap record, capture from mic or import a take.', color: 'var(--lp-orange)' },
    { num: '02', label: 'LOOP',   desc: 'Trim start and end. Touch the tape to hold the spot.', color: 'var(--lp-teal)' },
    { num: '03', label: 'OVERDUB',desc: 'Layer takes without leaving the screen.', color: 'var(--lp-yellow)' },
    { num: '04', label: 'EXPORT', desc: 'Bake the tape character in, or print it dry.', color: 'var(--lp-fg)' },
  ];
  return (
    <section id="flow" className="lp-section" style={{
      background: '#070708',
      borderTop: '1px solid var(--lp-line)',
      borderBottom: '1px solid var(--lp-line)',
    }}>
      <div className="lp-container">
        <div style={{ marginBottom: '4rem', display: 'flex', justifyContent: 'space-between',
          alignItems: 'flex-end', flexWrap: 'wrap', gap: '2rem' }}>
          <div>
            <span className="lp-tag" style={{ color: 'var(--lp-yellow)' }}>◇ THE FLOW</span>
            <h2 className="lp-h1" style={{ marginTop: '1rem', maxWidth: '14ch' }}>
              Record. Loop. Layer. Out.
            </h2>
          </div>
          <p className="lp-body" style={{ maxWidth: '36ch' }}>
            No menus to dig through. No presets to wade past. Just a cassette,
            a few honest knobs, and a transport bar.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 0,
        }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              padding: '2rem 1.8rem 2.5rem',
              borderTop: '2px solid ' + s.color,
              borderRight: i < steps.length - 1 ? '1px solid var(--lp-line)' : 'none',
              minHeight: 240,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            }}>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontSize: '4rem', lineHeight: 1,
                color: s.color,
              }}>{s.num}</div>
              <div>
                <div style={{
                  fontFamily: 'var(--font-sans)', fontWeight: 600,
                  fontSize: '1.1rem', letterSpacing: '0.16em',
                  textTransform: 'uppercase', marginBottom: '0.7rem',
                }}>{s.label}</div>
                <p className="lp-body" style={{ fontSize: '0.95rem' }}>{s.desc}</p>
              </div>
            </div>
          ))}
        </div>

        {/* Phone screenshot strip */}
        <div style={{ marginTop: '5rem' }}>
          <PhoneStrip />
        </div>
      </div>
    </section>
  );
}

function PhoneStrip() {
  const shots = [
    { src: 'uploads/IMG_7215.webp', label: 'TAPE',   color: 'var(--lp-orange)' },
    { src: 'uploads/IMG_7216.webp', label: 'REVERB', color: 'var(--lp-teal)' },
    { src: 'uploads/IMG_7217.webp', label: 'LOOP',   color: 'var(--lp-teal)' },
    { src: 'uploads/IMG_7218.webp', label: 'GRAIN',  color: 'var(--lp-yellow)' },
  ];
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
      gap: '2rem',
    }}>
      {shots.map((s, i) => (
        <div key={i} style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem',
          transform: `translateY(${i % 2 ? 24 : 0}px)`,
        }}>
          <div className="lp-phone">
            <div className="lp-phone-notch" />
            <img src={s.src} alt={s.label} />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%',
              background: s.color, boxShadow: `0 0 6px ${s.color}`,
            }} />
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: '0.7rem',
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: 'var(--lp-fg-2)',
            }}>SCREEN.0{i+1} / {s.label}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ============== FOOTER / CTA ============== */
function FooterCTA() {
  return (
    <section id="download" style={{
      padding: '7rem 0 0',
      background: 'var(--lp-paper)',
      color: 'var(--lp-ink)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* huge background type */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
        pointerEvents: 'none',
      }}>
        <div style={{
          fontFamily: 'var(--font-sans)', fontWeight: 700,
          fontSize: 'clamp(8rem, 28vw, 28rem)',
          letterSpacing: '-0.04em',
          color: 'rgba(13,13,13,0.06)',
          lineHeight: 0.85,
          marginBottom: '-3rem',
        }}>LOOPETTE</div>
      </div>

      <div className="lp-container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{
          maxWidth: 720,
          textAlign: 'center',
          margin: '0 auto',
        }}>
          <span className="lp-tag" style={{ color: 'var(--clay)' }}>◆ YOUR SERVE</span>
          <h2 style={{
            fontFamily: 'var(--font-sans)', fontWeight: 700,
            fontSize: 'clamp(3rem, 8vw, 7rem)',
            lineHeight: 0.92, letterSpacing: '-0.025em',
            textTransform: 'uppercase',
            margin: '1.2rem 0 1.5rem',
            color: 'var(--lp-ink)',
          }}>Make your<br />first loop.</h2>
          <p style={{
            fontFamily: 'var(--font-body)', fontSize: '1.2rem',
            lineHeight: 1.5, color: 'rgba(13,13,13,0.7)',
            maxWidth: '44ch', margin: '0 auto 2.5rem',
          }}>
            A cassette looper for iPhone. Wow, flutter, saturation, and a tape
            you can grab with your finger. Built for iPhone, designed to feel analog.
          </p>

          <a href="#" className="lp-appstore" style={{ marginBottom: '2rem' }}>
            <svg className="apple-mark" viewBox="0 0 24 24" fill="currentColor">
              <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
            </svg>
            <div className="text">
              <small>Download on the</small>
              <strong>App Store</strong>
            </div>
          </a>

          <div style={{
            display: 'flex', gap: '1rem', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--font-mono)', fontSize: '0.7rem',
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'rgba(13,13,13,0.55)',
            flexWrap: 'wrap',
          }}>
            <span>STATUS</span>
            <span style={{
              width: 8, height: 8, borderRadius: '50%',
              background: 'var(--clay)',
            }} />
            <span>PRE-LAUNCH</span>
            <span>·</span>
            <span>EST. MAY 2026</span>
          </div>
        </div>

        {/* footer line */}
        <div style={{
          marginTop: '6rem',
          paddingTop: '2rem', paddingBottom: '2rem',
          borderTop: '1px solid rgba(13,13,13,0.18)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'var(--font-mono)', fontSize: '0.7rem',
          letterSpacing: '0.16em', textTransform: 'uppercase',
          color: 'rgba(13,13,13,0.55)',
          flexWrap: 'wrap', gap: '1rem',
        }}>
          <span>© 2026 LOOPETTE</span>
          <span>BUILT FOR iPHONE · OSLO</span>
          <span>v1.0 · LP—001</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Ticker, SignatureMove, Sound, Workflow, FooterCTA });