/* global React, CTA */

// ====== TextGenerate — fast 300ms ======
function TextGen({ text, delay = 0 }) {
  const words = text.split(" ");
  return (
    <>
      {words.map((w, i) => (
        <span key={i} style={{
          display: "inline-block",
          opacity: 0,
          transform: "translateY(0.3em)",
          filter: "blur(4px)",
          animation: "tg-in .55s cubic-bezier(.2,.7,.2,1) forwards",
          animationDelay: `${delay + i * 0.045}s`,
          marginRight: "0.28em",
        }}>{w}</span>
      ))}
    </>
  );
}

// ====== BLOCO 1 — HERO ======
function Hero() {
  const videoRef = React.useRef(null);
  const [started, setStarted] = React.useState(false);
  return (
    <section id="hero" className="hero grain">
      <style>{`
        @keyframes tg-in { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
        @keyframes pulse-border {
          0%   { box-shadow: 0 0 0 0 rgba(198,156,80,.45), var(--shadow-lg); }
          70%  { box-shadow: 0 0 0 14px rgba(198,156,80,0), var(--shadow-lg); }
          100% { box-shadow: 0 0 0 0 rgba(198,156,80,0), var(--shadow-lg); }
        }
        .hero { padding-top: 84px; padding-bottom: 56px; }
        @media (min-width: 720px) { .hero { padding-top: 120px; padding-bottom: 90px; } }
        .hero-eyebrow { margin-bottom: 18px; }
        .hero-h1 {
          font-family: var(--font-sans);
          font-weight: 700;
          letter-spacing: -0.035em;
          line-height: 1.0;
          font-size: clamp(36px, 9.4vw, 78px);
          color: var(--ipgs-deep);
          margin: 0 0 18px;
          text-wrap: balance;
        }
        .hero-h1 em {
          font-family: var(--font-display);
          font-style: italic;
          font-weight: 400;
          color: var(--ipgs-deep);
          background: linear-gradient(180deg, transparent 62%, rgba(171,249,198,.6) 62%);
          padding: 0 4px;
        }
        .hero-sub {
          font-size: 16px;
          color: var(--deep-800);
          margin: 0 0 28px;
          line-height: 1.55;
          max-width: 52ch;
        }
        @media (min-width: 720px) { .hero-sub { font-size: 18px; margin-bottom: 32px; } }
        .hero-sub strong { color: var(--ipgs-deep); font-weight: 600; }

        .hero-grid { display: grid; gap: 28px; }
        @media (min-width: 900px) {
          .hero-grid {
            grid-template-columns: 1.1fr 1fr;
            gap: 56px;
            align-items: center;
          }
          .hero-copy { order: 1; }
          .hero-video-wrap { order: 2; }
        }
        .hero-video-wrap {
          position: relative;
          border-radius: 20px;
          overflow: hidden;
          background: var(--ipgs-deep);
          aspect-ratio: 9 / 16;
          max-width: 360px;
          width: 100%;
          margin: 0 auto;
          border: 1px solid rgba(198,156,80,.30);
          animation: pulse-border 2.4s infinite;
        }
        @media (min-width: 720px) {
          .hero-video-wrap { aspect-ratio: 9 / 16; max-width: 380px; }
        }
        .hero-video-bg {
          position: absolute; inset: 0;
          background:
            radial-gradient(60% 60% at 30% 25%, rgba(171,249,198,.12), transparent 60%),
            radial-gradient(50% 60% at 75% 80%, rgba(198,156,80,.20), transparent 60%),
            linear-gradient(160deg, #062947, #0b3a63);
        }
        .hero-video-bg::after {
          content: "";
          position: absolute; inset: 0;
          background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
          mix-blend-mode: overlay;
        }
        .play-btn {
          position: absolute; left: 50%; top: 50%;
          transform: translate(-50%, -50%);
          width: 84px; height: 84px;
          border-radius: 50%;
          background: rgba(241,241,241,.96);
          border: none;
          color: var(--ipgs-deep);
          display: grid; place-items: center;
          cursor: pointer;
          z-index: 2;
        }
        .play-btn svg { margin-left: 4px; }
        .unmute-btn {
          position: absolute; right: 14px; bottom: 14px;
          width: 44px; height: 44px;
          border-radius: 50%;
          background: rgba(6,41,71,.7);
          backdrop-filter: blur(8px);
          color: var(--ipgs-paper);
          border: 1px solid rgba(241,241,241,.18);
          z-index: 2;
          cursor: pointer;
          display: grid; place-items: center;
        }
        .video-tag {
          position: absolute; left: 14px; top: 14px;
          font-family: var(--font-mono);
          font-size: 9px; letter-spacing: 0.18em;
          text-transform: uppercase;
          color: rgba(241,241,241,.7);
          z-index: 2;
        }
        .video-placeholder-tag {
          position: absolute; right: 14px; top: 14px;
          font-family: var(--font-mono);
          font-size: 9px; letter-spacing: 0.16em;
          text-transform: uppercase;
          color: rgba(241,241,241,.6);
          z-index: 2;
        }

        .trust-strip {
          margin-top: 22px;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px 18px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.04em;
          color: var(--deep-800);
          text-transform: uppercase;
        }
        @media (min-width: 720px) {
          .trust-strip { grid-template-columns: repeat(4, auto); gap: 8px 28px; }
        }
        .trust-strip .ts { display: inline-flex; align-items: center; gap: 8px; }
        .trust-strip svg { color: var(--gold-700); }
        .stats-bar {
          margin-top: 18px;
          padding-top: 14px;
          border-top: 1px solid rgba(198,156,80,.40);
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.10em;
          color: var(--deep-800);
          text-transform: uppercase;
          line-height: 1.6;
        }
        .stats-bar strong { color: var(--ipgs-deep); }
      `}</style>

      <div className="container-x" style={{ position: "relative", zIndex: 2 }}>
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="eyebrow hero-eyebrow">Mapeamento de Aptidões · Instituto Geny Soares</div>
            <h1 className="hero-h1">
              <TextGen text="E se a indecisão do seu filho acabasse em" />
              <em style={{
                display: "inline-block",
                opacity: 0,
                animation: "tg-in .8s cubic-bezier(.2,.7,.2,1) forwards",
                animationDelay: "0.9s"
              }}>20 minutos?</em>
            </h1>
            <p className="hero-sub">
              Mapeamento científico de aptidões e perfil profissional. <strong>40 perguntas, laudo em até 48h, revisado por psicólogos com CRP ativo.</strong>
            </p>

            <CTA size="lg" full position="hero">Quero mapear meu filho — R$ 300</CTA>

            <div className="trust-strip">
              <div className="ts"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>15–20 min</div>
              <div className="ts"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4"/></svg>laudo PDF</div>
              <div className="ts"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="9" cy="9" r="3"/><circle cx="17" cy="11" r="2.5"/><path d="M3 20a6 6 0 0 1 12 0"/></svg>revisão humana</div>
              <div className="ts"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M9 3h6v4l4 9a4 4 0 0 1-4 5H9a4 4 0 0 1-4-5l4-9V3z"/></svg>RIASEC + DISC</div>
            </div>

            <div className="stats-bar">
              <strong>+8 mapeamentos realizados</strong> · 3 psicólogos CRP · análise em até 48h
            </div>
          </div>

          <div className="hero-video-wrap" aria-label="Vídeo institucional IPGS">
            <video
              ref={videoRef}
              src="https://hwaweyokyclhnqxfehkf.supabase.co/storage/v1/object/public/landing-assets/ipgs/institucional.mp4"
              poster="https://hwaweyokyclhnqxfehkf.supabase.co/storage/v1/object/public/landing-assets/ipgs/institucional-poster.jpg"
              preload="none"
              playsInline
              controls={started}
              onPlay={() => setStarted(true)}
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", zIndex: 1 }}
            />
            <span className="video-tag">vídeo · 05:53</span>
            {!started && (
              <button className="play-btn" aria-label="Assistir vídeo" onClick={() => { const v = videoRef.current; if (v) v.play(); window.track("video_play"); }}>
                <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
              </button>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ====== BLOCO 2 — Pattern interrupt ======
function PatternInterrupt() {
  return (
    <section className="dark grain" id="b2">
      <style>{`
        .pi-wrap { text-align: left; }
        .pi-num {
          font-family: var(--font-display);
          font-style: italic;
          color: var(--ipgs-gold);
          font-size: clamp(96px, 24vw, 220px);
          line-height: 0.85;
          letter-spacing: -0.04em;
          margin: 0;
          font-weight: 400;
        }
        .pi-headline {
          font-family: var(--font-sans);
          font-weight: 600;
          font-size: clamp(28px, 4.6vw, 52px);
          line-height: 1.05;
          letter-spacing: -0.025em;
          color: var(--ipgs-paper);
          margin: 12px 0 24px;
          max-width: 22ch;
          text-wrap: balance;
        }
        .pi-sub {
          font-size: clamp(17px, 2vw, 22px);
          color: rgba(241,241,241,.78);
          line-height: 1.5;
          max-width: 50ch;
          margin: 0;
        }
        .pi-sub em { color: var(--ipgs-mint); font-style: italic; font-family: var(--font-display); font-weight: 400; }
      `}</style>
      <div className="container-x" style={{ position: "relative", zIndex: 2 }}>
        <span className="eyebrow">A estatística</span>
        <div className="pi-wrap reveal" style={{ marginTop: 24 }}>
          <p className="pi-num">60%</p>
          <h2 className="pi-headline">dos universitários desistem<br/>no meio do curso.</h2>
          <p className="pi-sub">Sabe o que os outros 40% fizeram antes de se matricular? <em>Fizeram um mapeamento de aptidões.</em></p>
        </div>
      </div>
    </section>
  );
}

// ====== BLOCO 3 — Identificação da dor ======
function PainID() {
  return (
    <section id="b3" className="grain" style={{ background: "var(--paper-100)" }}>
      <style>{`
        .pain-wrap { max-width: 720px; margin: 0 auto; }
        .pain-sub {
          font-family: var(--font-display);
          font-style: italic;
          font-weight: 400;
          font-size: clamp(28px, 4vw, 42px);
          color: var(--ipgs-deep);
          line-height: 1.1;
          margin: 18px 0 32px;
          letter-spacing: -0.02em;
        }
        .pain-text {
          font-family: var(--font-display);
          font-style: italic;
          font-size: clamp(19px, 2.1vw, 22px);
          line-height: 1.55;
          color: var(--ipgs-deep);
          margin: 0;
        }
        .pain-text .dropcap {
          font-family: var(--font-display);
          font-style: italic;
          font-weight: 400;
          float: left;
          font-size: 4.6em;
          line-height: 0.85;
          padding: 6px 14px 0 0;
          color: var(--gold-700);
        }
        .pain-text strong { color: var(--ipgs-deep); font-style: normal; font-family: var(--font-sans); font-weight: 600; }
        .pull-quote {
          margin: 48px 0 0;
          padding: 28px 0;
          border-top: 1px solid rgba(198,156,80,.4);
          border-bottom: 1px solid rgba(198,156,80,.4);
          font-family: var(--font-display);
          font-style: italic;
          font-size: clamp(20px, 2.4vw, 26px);
          line-height: 1.45;
          color: var(--gold-700);
          text-align: center;
          max-width: 56ch;
          margin-left: auto; margin-right: auto;
        }
        .pull-quote::before {
          content: "“";
          font-size: 60px;
          line-height: 0.5;
          margin-right: 6px;
          vertical-align: -6px;
          color: var(--ipgs-gold);
        }
      `}</style>
      <div className="container-x" style={{ position: "relative", zIndex: 2 }}>
        <div className="pain-wrap">
          <span className="eyebrow">A cena</span>
          <h2 className="pain-sub reveal">Você reconhece essa cena?</h2>
          <p className="pain-text reveal">
            <span className="dropcap">V</span>
            ocê pergunta o que ele vai fazer no ano que vem. A resposta é sempre <em>"eu não sei"</em>. Quando ele finalmente cita uma profissão que parece fazer sentido, você sente alívio. Mas, no fundo, sabe: <strong>aquela escolha foi feita por medo de não escolher nada</strong>. Não por vocação.
          </p>
          <blockquote className="pull-quote reveal">
            O problema não é que ele não sabe o que quer. É que ainda não se conhece bem o suficiente pra confiar no que sente.
          </blockquote>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.PatternInterrupt = PatternInterrupt;
window.PainID = PainID;
