/* ============================================================
   TRYONME Landing — Marquee, TripleTap, HowItWorks
   ============================================================ */

function Marquee() {
  const items = [
    "★ TRYONME ★", "SCREENSHOT", "★ TRYONME ★", "TRIPLE-TAP", "★ TRYONME ★",
    "WEAR IT", "★ TRYONME ★", "AI FITTING", "★ TRYONME ★", "OUTFIT-CHECK"
  ];
  return (
    <div className="marquee">
      <div className="marquee__track">
        {[...items, ...items, ...items].map((t, i) => (
          <span key={i} className="marquee__item display">{t}</span>
        ))}
      </div>
    </div>
  );
}

function TripleTap() {
  const [pulse, setPulse] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setPulse(p => p + 1), 1800);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="section section--triple">
      <div className="container triple">
        <div className="triple__art reveal">
          <svg viewBox="0 0 320 360" width="100%" style={{ maxWidth: 360 }}>
            <rect x="60" y="20" width="200" height="320" rx="32" ry="32" fill="none" stroke="var(--pink)" strokeWidth="4"/>
            <rect x="80" y="40" width="70" height="70" rx="14" ry="14" fill="none" stroke="var(--pink)" strokeWidth="3"/>
            <circle cx="100" cy="65" r="8" fill="none" stroke="var(--pink)" strokeWidth="2"/>
            <circle cx="125" cy="85" r="8" fill="none" stroke="var(--pink)" strokeWidth="2"/>
            {[0, 1, 2].map(i => {
              const r = 30 + i * 30 + (pulse % 3 === i ? 6 : 0);
              return (
                <circle
                  key={i}
                  cx="160" cy="220"
                  r={r}
                  fill="none"
                  stroke={i === 1 ? "var(--yellow)" : "var(--pink)"}
                  strokeWidth="3"
                  opacity={1 - i * 0.2}
                  style={{ transition: "all 0.5s" }}
                />
              );
            })}
            <circle cx="160" cy="220" r="10" fill="var(--pink)" />
            <path d="M280 80 C 290 130, 240 180, 220 220" fill="none" stroke="var(--blue)" strokeWidth="3" strokeLinecap="round"/>
            <path d="M220 220 L 230 210 M 220 220 L 232 222" stroke="var(--blue)" strokeWidth="3" fill="none" strokeLinecap="round"/>
            <text x="290" y="70" fontFamily="Caveat, cursive" fontSize="22" fill="var(--blue)">tap here</text>
          </svg>
        </div>
        <div className="triple__copy reveal delay-1">
          <Eyebrow>SHORTCUT</Eyebrow>
          <h2 className="display" style={{ fontSize: "clamp(48px, 7vw, 96px)", marginTop: 12 }}>
            <Misreg text="TRIPLE-TAP." color="pink" />
            <br />
            <Misreg text="DONE." />
          </h2>
          <p style={{ marginTop: 18, fontSize: 18, maxWidth: 460 }}>
            Set up Back Tap once in iOS Accessibility — then tap the back of your phone three times,
            on any screen, in any app, to import the latest screenshot and start trying it on.
          </p>
          <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <span className="chip chip--blue">SETTINGS → ACCESSIBILITY</span>
            <span className="chip">→ TOUCH → BACK TAP</span>
            <span className="chip chip--filled">→ TRIPLE TAP → TRYONME</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    {
      n: "01",
      kicker: "FIND",
      title: "SPOT THE FIT",
      body: "Scrolling Insta, TikTok, ASOS, Depop — anywhere. See an outfit you'd actually wear.",
      art: "screenshot",
    },
    {
      n: "02",
      kicker: "GRAB",
      title: "TRIPLE-TAP",
      body: "Three taps on the back of your phone. We grab the screenshot, lift the garment, no copy-paste.",
      art: "tap",
    },
    {
      n: "03",
      kicker: "WEAR",
      title: "TRY IT ON YOU",
      body: "AI drops the look on your photo in 3 seconds. Save it, share it, decide before you swipe.",
      art: "result",
    },
  ];
  return (
    <section className="section" id="how">
      <div className="container">
        <div className="section__head reveal">
          <span className="num">§</span>
          <Eyebrow>HOW IT WORKS</Eyebrow>
          <hr style={{ flex: 1, border: "none", height: 2, background: "var(--blue)" }}/>
          <Eyebrow color="var(--blue)">3 STEPS</Eyebrow>
        </div>
        <h2 className="display reveal" style={{ fontSize: "clamp(40px, 6vw, 84px)", marginBottom: 50, maxWidth: 900 }}>
          From <span style={{ color: "var(--pink)" }}>screenshot</span> to <em style={{ fontStyle: "normal", textDecoration: "underline wavy var(--yellow)" }}>outfit-on-you</em> in <span className="hand" style={{ fontSize: "0.9em", color: "var(--pink)" }}>three taps.</span>
        </h2>

        <div className="steps">
          {steps.map((s, i) => (
            <div key={i} className="step reveal" style={{ transitionDelay: `${i * 100}ms` }}>
              <div className="step__num display">{s.n}</div>
              <div className="step__art">
                <StepArt kind={s.art} />
              </div>
              <div className="step__kicker eyebrow">{s.kicker}</div>
              <div className="step__title display">{s.title}</div>
              <p className="step__body">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StepArt({ kind }) {
  if (kind === "screenshot") {
    return (
      <svg viewBox="0 0 200 200" width="100%">
        <rect x="60" y="20" width="100" height="160" rx="14" fill="var(--cream)" stroke="var(--blue)" strokeWidth="3"/>
        <rect x="68" y="32" width="84" height="120" fill="var(--yellow)"/>
        <path d="M85 60 L95 50 H115 L125 60 V100 L120 98 V140 H90 V98 L85 100 Z" fill="var(--pink)" stroke="var(--blue)" strokeWidth="2"/>
        <circle cx="180" cy="160" r="22" fill="none" stroke="var(--pink)" strokeWidth="3"/>
        <circle cx="180" cy="160" r="14" fill="var(--pink)"/>
        <line x1="20" y1="50" x2="40" y2="50" stroke="var(--pink)" strokeWidth="3" strokeLinecap="round"/>
        <line x1="22" y1="40" x2="38" y2="62" stroke="var(--pink)" strokeWidth="3" strokeLinecap="round"/>
      </svg>
    );
  }
  if (kind === "tap") {
    return (
      <svg viewBox="0 0 200 200" width="100%">
        <path d="M70 180 L70 110 Q 70 95 85 95 Q 100 95 100 110 L100 80 Q 100 65 115 65 Q 130 65 130 80 L130 105 Q 130 90 145 90 Q 160 90 160 105 L160 130 Q 160 175 130 180 Z" fill="var(--cream)" stroke="var(--blue)" strokeWidth="3" strokeLinejoin="round"/>
        <circle cx="60" cy="60" r="10" fill="var(--pink)"/>
        <circle cx="60" cy="60" r="20" fill="none" stroke="var(--pink)" strokeWidth="3"/>
        <circle cx="60" cy="60" r="32" fill="none" stroke="var(--yellow)" strokeWidth="3"/>
        <text x="20" y="160" fontFamily="Caveat, cursive" fontSize="20" fill="var(--blue)">×3</text>
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 200 200" width="100%">
      <rect x="20" y="30" width="160" height="140" rx="8" fill="var(--cream)" stroke="var(--pink)" strokeWidth="3"/>
      <rect x="20" y="30" width="80" height="140" fill="var(--blue)" opacity="0.1"/>
      {Array.from({ length: 12 }).map((_, i) => (
        <circle key={i} cx={30 + (i % 4) * 18} cy={50 + Math.floor(i / 4) * 35} r={2 + (i % 3)} fill="var(--pink)" />
      ))}
      <line x1="100" y1="30" x2="100" y2="170" stroke="var(--blue)" strokeWidth="2" strokeDasharray="4 4"/>
      <path d="M150 50 L155 60 L165 65 L155 70 L150 80 L145 70 L135 65 L145 60 Z" fill="var(--yellow)" stroke="var(--blue)" strokeWidth="2" strokeLinejoin="round"/>
      <text x="115" y="100" fontFamily="Caveat, cursive" fontSize="18" fill="var(--blue)">3 sec ✦</text>
    </svg>
  );
}

window.Marquee = Marquee;
window.TripleTap = TripleTap;
window.HowItWorks = HowItWorks;
window.StepArt = StepArt;