const HeroAnimation = () => {
  const heroThumbs = [
    "https://img.youtube.com/vi/9rRvmcDpWwA/maxresdefault.jpg",
    "https://img.youtube.com/vi/TX1Ij51esI0/maxresdefault.jpg",
    "https://img.youtube.com/vi/j0YENi6U0tE/maxresdefault.jpg"
  ];
  return (
    <div className="hero-anim" aria-hidden="true">
      <div className="source-card">
        <div className="source-avatar">
          <FacePlaceholder tone={0} emotion="shock" size={110} />
        </div>
        <div className="label">Seu avatar</div>
      </div>

      <div className="arrow-col">
        <div className="arrow-label">gera</div>
        <svg viewBox="0 0 36 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 7 L30 7 M24 2 L30 7 L24 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <div className="pulse-dot" />
      </div>

      <div className="thumbs-col">
        {heroThumbs.map((url, i) => (
          <div key={i} className={`thumb-slot s${i+1}`}>
            <img src={url} alt="" loading="lazy" style={{width: "100%", height: "100%", objectFit: "cover", display: "block"}} />
          </div>
        ))}
      </div>
    </div>
  );
};

/* ---------- feature animations ---------- */

const FeatureAnimPaste = () => {
  return (
    <div className="feat-anim feat-anim--paste" aria-hidden="true">
      <div className="fa-url-bar">
        <Icon name="youtube" size={14} />
        <span className="fa-url-text">
          <span className="fa-typed">youtube.com/watch?v=</span><span className="fa-cursor" />
        </span>
      </div>
      <div className="fa-arrow-down">
        <svg viewBox="0 0 14 24" fill="none"><path d="M7 0 L7 18 M2 13 L7 18 L12 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </div>
      <div className="fa-thumb-frame">
        <img src="https://img.youtube.com/vi/OHoXAJ0W2aA/mqdefault.jpg" alt="" loading="lazy" style={{width: "100%", height: "100%", objectFit: "cover", display: "block"}} />
      </div>
    </div>
  );
};

const FeatureAnimAvatar = () => {
  const thumbs = [
    "https://img.youtube.com/vi/pNUylgbw7-0/mqdefault.jpg",
    "https://img.youtube.com/vi/s-fY8QvIgNY/mqdefault.jpg"
  ];
  return (
    <div className="feat-anim feat-anim--avatar" aria-hidden="true">
      <div className="fa-avatar-anchor">
        <FacePlaceholder tone={4} emotion="happy" size={64} />
        <div className="fa-anchor-label">mesma pessoa</div>
      </div>
      <div className="fa-mini-grid">
        {thumbs.map((url, i) => (
          <div key={i} className={`fa-mini fa-mini--${i+1}`}>
            <img src={url} alt="" loading="lazy" style={{width: "100%", height: "100%", objectFit: "cover", display: "block"}} />
          </div>
        ))}
      </div>
    </div>
  );
};

const FeatureAnimEmotion = () => {
  const emotions = ["shock", "happy", "focus", "angry"];
  return (
    <div className="feat-anim feat-anim--emotion" aria-hidden="true">
      <div className="fa-face-stage">
        {emotions.map((em, i) => (
          <div key={em} className={`fa-face-layer fa-face-${i}`}>
            <FacePlaceholder tone={6} emotion={em} size={120} />
          </div>
        ))}
      </div>
      <div className="fa-emotion-chips">
        {emotions.map((em, i) => (
          <div key={em} className={`fa-chip fa-chip-${i}`}>{em}</div>
        ))}
      </div>
    </div>
  );
};

const Landing = ({ onStart, onPricing, onPlatform }) => {
  const [url, setUrl] = React.useState("");
  return (
    <div className="landing-shell">
      <nav className="landing-nav">
        <div style={{display: "flex", alignItems: "center", gap: 10, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19, letterSpacing: "-0.02em"}}>
          <span style={{width: 28, height: 28, borderRadius: 8, background: "var(--brand)", display: "grid", placeItems: "center", color: "#fff", fontWeight: 800}}>G</span>
          GenerateThumb
        </div>
        <div className="spacer" />
        <button className="btn btn-primary btn-sm" onClick={onPlatform}>Plataforma</button>
      </nav>

      <section className="landing-hero" style={{padding: "80px 32px 60px"}}>
        <div className="landing-hero-grid" style={{display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "center"}}>
          <div>
            <h1 style={{fontSize: "clamp(40px, 5.5vw, 68px)"}}>
              Crie thumbnails <span style={{color: "var(--brand)"}}>virais</span> e consistentes.
            </h1>
            <p className="lead">
              Cole o link do seu vídeo. A gente cuida do resto.
            </p>
            <form className="url-form" onSubmit={(e) => {e.preventDefault(); onStart(url);}}>
              <div className="input">
                <Icon name="youtube" size={20} />
                <input
                  placeholder="cole aqui um link do YouTube"
                  value={url}
                  onChange={(e) => setUrl(e.target.value)}
                />
              </div>
              <button type="submit" className="btn btn-primary">
                Gerar <Icon name="arrow-right" size={16} />
              </button>
            </form>
          </div>
          <HeroAnimation />
        </div>
      </section>

      <section className="features" id="features" style={{gridTemplateColumns: "repeat(3, 1fr)", margin: "40px auto 80px"}}>
        <div className="feature">
          <FeatureAnimPaste />
          <h3>Cole. Gere.</h3>
          <p>Link do YouTube vira thumbnail. Sem briefing, sem editor.</p>
        </div>
        <div className="feature">
          <FeatureAnimAvatar />
          <h3>Avatar consistente</h3>
          <p>Crie um avatar do seu rosto uma vez — use em todas as capas.</p>
        </div>
        <div className="feature">
          <FeatureAnimEmotion />
          <h3>Edite a emoção</h3>
          <p>Mesmo rosto, novas expressões. Choque, foco, alegria.</p>
        </div>
      </section>

      <section className="pricing-shell" id="pricing">
        <h2 className="display" style={{fontSize: 48, textAlign: "center", margin: 0, letterSpacing: "-0.03em"}}>Preços</h2>
        <p className="muted-2" style={{textAlign: "center", margin: "10px 0 0"}}>Cancele quando quiser.</p>
        <div className="pricing-grid">
          <div className="plan">
            <h3>Pay per use</h3>
            <div className="price">R$15</div>
            <ul>
              <li><span className="check"><Icon name="check" size={14} /></span>5 gerações de thumbnails</li>
              <li><span className="check"><Icon name="check" size={14} /></span>Download liberado</li>
            </ul>
            <button className="btn btn-lg cta" onClick={onPricing}>Comprar</button>
          </div>

          <div className="plan highlight">
            <div className="row-gap"><h3>Creator</h3><span className="chip brand">popular</span></div>
            <div className="price">R$39<small>/ mês</small></div>
            <ul>
              <li><span className="check"><Icon name="check" size={14} /></span>40 gerações por mês</li>
              <li><span className="check"><Icon name="check" size={14} /></span>Geração de avatar</li>
              <li><span className="check"><Icon name="check" size={14} /></span>Templates básicos</li>
              <li><span className="check"><Icon name="check" size={14} /></span>Histórico de thumbnails</li>
            </ul>
            <button className="btn btn-primary btn-lg cta" onClick={onPricing}>Assinar Creator</button>
          </div>

          <div className="plan">
            <h3>Pro</h3>
            <div className="price">R$79<small>/ mês</small></div>
            <ul>
              <li><span className="check"><Icon name="check" size={14} /></span>120 gerações por mês</li>
              <li><span className="check"><Icon name="check" size={14} /></span>Templates premium</li>
              <li><span className="check"><Icon name="check" size={14} /></span>Edição de emoção</li>
              <li><span className="check"><Icon name="check" size={14} /></span>Múltiplas variações (Testes A/B)</li>
            </ul>
            <button className="btn btn-lg cta" onClick={onPricing}>Assinar Pro</button>
          </div>
        </div>
      </section>

      <footer className="footer">
        <div className="row" style={{alignItems: "center", gap: 16}}>
          <span style={{fontFamily: "var(--font-display)", fontWeight: 700, flex: 1}}>GenerateThumb</span>
          <a href="/privacy" style={{color: "inherit", textDecoration: "none", opacity: 0.8}}>Privacidade</a>
          <a href="/terms" style={{color: "inherit", textDecoration: "none", opacity: 0.8}}>Termos</a>
          <a href="mailto:contato@yudiganeko.com" style={{color: "inherit", textDecoration: "none", opacity: 0.8}}>Contato</a>
          <span>© 2026 YUDI GANEKO TECNOLOGIA LTDA</span>
        </div>
      </footer>
    </div>
  );
};

window.Landing = Landing;