/* global React, NAV, AREAS, DIFERENCIAIS, TESTIMONIALS, IG_POSTS, CONTACT, Ico, WA_LINK */
const { useState, useEffect, useRef } = React;

/* ============================ HEADER ============================ */
function Header({ onMenu }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 40);
    f();
    window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  const go = (e, id) => { e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); };
  return (
    <header className={"site-header" + (scrolled ? " scrolled" : "")}>
      <div className="wrap bar">
        <a href="#inicio" className="brand" onClick={(e) => go(e, "inicio")}>
          <img src="assets/logo-mark.png" alt="Cléfia Santos Advocacia" />
          <span className="bn">
            <b className="gold-text">Cléfia Santos</b>
            <span>Advocacia &amp; Consultoria</span>
          </span>
        </a>
        <nav className="nav">
          {NAV.slice(1).map((n) => (
            <a key={n.id} href={"#" + n.id} onClick={(e) => go(e, n.id)}>{n.label}</a>
          ))}
        </nav>
        <div className="header-cta">
          <button className="burger" onClick={onMenu} aria-label="Menu">
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
    </header>
  );
}

function MobileMenu({ open, onClose }) {
  const go = (e, id) => { e.preventDefault(); onClose();
    setTimeout(() => document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }), 280); };
  return (
    <div className={"mobile-menu" + (open ? " open" : "")}>
      <div className="mm-head">
        <span className="eyebrow" style={{ margin: 0 }}>Menu</span>
        <button className="mm-close" onClick={onClose} aria-label="Fechar">×</button>
      </div>
      <nav>
        {NAV.map((n, i) => (
          <a key={n.id} href={"#" + n.id} onClick={(e) => go(e, n.id)}>
            <span className="num">{String(i + 1).padStart(2, "0")}</span>{n.label}
          </a>
        ))}
      </nav>
      <a className="btn btn-gold" href={WA_LINK} target="_blank" rel="noopener"
        style={{ marginTop: "auto", justifyContent: "center" }}>
        Falar no WhatsApp <Ico.arrow className="ar" />
      </a>
    </div>
  );
}

/* ============================ HERO ============================ */
// Fundo de vídeo em loop com playlist + crossfade (técnica do hero NW Advogados,
// estendida para alternar entre vários clipes). Quando você tiver os vídeos,
// solte-os em assets/ e liste os nomes aqui (ex.: "assets/hero-1.mp4"). Enquanto
// a lista estiver vazia, mostra um placeholder elegante — sem requisições/erros.
const HERO_CLIPS = [];

function HeroVideo() {
  const [active, setActive] = useState(0);
  const [errors, setErrors] = useState({});
  const refs = useRef([]);
  const available = HERO_CLIPS.map((_, i) => !errors[i]);
  const anyOk = available.some(Boolean);

  const next = () => {
    for (let k = 1; k <= HERO_CLIPS.length; k++) {
      const c = (active + k) % HERO_CLIPS.length;
      if (available[c]) { setActive(c); return; }
    }
  };
  useEffect(() => {
    const v = refs.current[active];
    if (v) { try { v.currentTime = 0; v.play && v.play().catch(() => {}); } catch (e) {} }
  }, [active]);

  if (!anyOk) {
    return (
      <div className="hero-bg media-ph">
        <div className="play-btn" title="Espaço para vídeo de fundo">
          <span className="play-ring"></span>
        </div>
        <div className="ph-label" style={{ top: "auto", bottom: "8%" }}>
          fundo de vídeo em loop · 16:9<br />
          solte seus arquivos em <b style={{ color: "var(--gold-3)" }}>assets/</b> como<br />
          hero-1.mp4 · hero-2.mp4 · hero-3.mp4
        </div>
      </div>
    );
  }
  return (
    <div className="hero-bg video-bg">
      {HERO_CLIPS.map((src, i) => (
        <video key={src} ref={(el) => (refs.current[i] = el)}
          className={"hero-vid" + (i === active ? " on" : "")}
          src={src} muted playsInline preload="auto"
          autoPlay={i === active}
          onEnded={next}
          onError={() => setErrors((e) => ({ ...e, [i]: true }))} />
      ))}
    </div>
  );
}

function HeroBackdrop({ variant }) {
  if (variant === "video") {
    return <HeroVideo />;
  }
  if (variant === "foto") {
    return (
      <div className="hero-bg media-ph">
        <div className="ph-label">foto de fundo · escritório / cidade<br />Salvador — Bahia</div>
      </div>
    );
  }
  // animação (default)
  return (
    <div className="hero-bg anim">
      <div className="glow g1"></div>
      <div className="glow g2"></div>
      <div className="hero-lines">
        {[12, 26, 41, 58, 72, 87].map((l, i) => (
          <i key={i} style={{ left: l + "%", animationDelay: i * 1.1 + "s" }}></i>
        ))}
      </div>
      <div className="particles">
        {Array.from({ length: 16 }).map((_, i) => (
          <b key={i} style={{
            left: (4 + i * 6) + "%",
            animationDuration: (9 + (i % 5) * 2.5) + "s",
            animationDelay: -(i * 1.3) + "s",
          }}></b>
        ))}
      </div>
    </div>
  );
}

function Hero({ variant }) {
  const go = (id) => document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
  const dark = variant === "video" || variant === "foto";
  return (
    <section className="hero" id="inicio">
      <HeroBackdrop variant={variant} />
      <div className={"hero-veil" + (dark ? " dark" : "")}></div>
      <div className="hero-inner">
        <div className="wrap">
          <p className="eyebrow hero-eyebrow">Advocacia · Salvador — Bahia</p>
          <h1 className="h-display">
            Defesa séria e dedicada dos <em className="gold-text">seus direitos</em>
          </h1>
          <p className="hero-sub">
            Escritório especializado em causas trabalhistas, com atuação também em
            direito do consumidor, previdenciário e de família. Atendimento humano,
            personalizado e focado na solução do seu problema.
          </p>
          <div className="hero-actions">
            <a className="btn btn-gold" href={WA_LINK} target="_blank" rel="noopener">
              Fale com a advogada <Ico.arrow className="ar" />
            </a>
            <button className="btn btn-ghost" onClick={() => go("areas")}>
              Áreas de atuação
            </button>
          </div>
        </div>
      </div>
      <div className="hero-foot">
        <div className="wrap">
          <div className="scroll-hint">
            <span className="ln"></span> Role para conhecer
          </div>
          <div className="credibility">
            <div><b>OAB/BA</b><span>Inscrição regular</span></div>
            <div><b>+7</b><span>Áreas de atuação</span></div>
            <div><b>100%</b><span>Atendimento personalizado</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ QUEM SOMOS ============================ */
function About() {
  return (
    <section className="section" id="quem-somos">
      <div className="wrap about-grid">
        <div className="about-portrait">
          <div className="frame"></div>
          <div className="portrait-ph">
            <img className="portrait-img" src="assets/dra-clefia.jpg" alt="Dra. Cléfia Santos — sócia-fundadora" />
          </div>
          <div className="sig">
            <b className="gold-text">Dra. Cléfia Santos</b>
            <span>Sócia-fundadora</span>
          </div>
        </div>
        <div className="about-body">
          <p className="eyebrow">Quem Somos</p>
          <h2 className="section-title" style={{ marginBottom: 28 }}>
            Um escritório que <span className="gold-text">defende pessoas</span>,
            não apenas processos.
          </h2>
          <p className="first">
            A <strong>CS Advocacia</strong> é um escritório especializado em questões
            trabalhistas, com atuação também nas áreas de direito do consumidor,
            previdenciário e de família.
          </p>
          <p>
            Tem como sócia e fundadora a <strong style={{ color: "var(--cream)" }}>Dra. Cléfia
            Santos</strong>, especialista em Direito do Trabalho e advogada militante das
            causas trabalhistas desde a formação — especialmente na defesa dos direitos
            dos trabalhadores. Hoje é reconhecida por colegas e clientes pela competência
            e dedicação às causas que defende.
          </p>
          <blockquote className="about-quote">
            “Oferecer um atendimento personalizado, humano e focado na resolução do
            problema: esse é o diferencial da CS Advocacia.”
          </blockquote>
        </div>
      </div>
    </section>
  );
}

/* ============================ DIFERENCIAIS ============================ */
function Diferenciais() {
  return (
    <section className="section alt">
      <div className="wrap">
        <p className="eyebrow">Por que nos escolher</p>
        <h2 className="section-title" style={{ maxWidth: "14ch" }}>
          Diferenciais que você <span className="gold-text">sente na prática</span>.
        </h2>
        <div className="dif-grid">
          {DIFERENCIAIS.map((d) => (
            <div className="dif-card" key={d.n}>
              <div className="num">{d.n}</div>
              <h3>{d.t}</h3>
              <p>{d.d}</p>
              <div className="bar"></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================ ÁREAS ============================ */
function Areas() {
  return (
    <section className="section" id="areas">
      <div className="wrap">
        <div className="areas-head">
          <div>
            <p className="eyebrow">Áreas de Atuação</p>
            <h2 className="section-title" style={{ maxWidth: "16ch" }}>
              Soluções jurídicas para <span className="gold-text">cada momento</span> da sua vida.
            </h2>
          </div>
          <a className="btn btn-ghost" href={WA_LINK} target="_blank" rel="noopener">
            Não encontrou? Consulte <Ico.arrow className="ar" />
          </a>
        </div>
        <div className="areas-grid">
          {AREAS.map((a) => (
            <article className={"area" + (a.feat ? " feat" : "")} key={a.n}>
              <div className="idx">{a.n}</div>
              <div>
                {a.feat && <span className="tag">Principal especialidade</span>}
                <h3>{a.t}</h3>
                <p>{a.d}</p>
                <a className="more" href={WA_LINK} target="_blank" rel="noopener">
                  Falar sobre esta área <Ico.arrow className="ar" />
                </a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================ DEPOIMENTOS ============================ */
function Testimonials() {
  const [i, setI] = useState(0);
  const n = TESTIMONIALS.length;
  useEffect(() => {
    const t = setInterval(() => setI((p) => (p + 1) % n), 6500);
    return () => clearInterval(t);
  }, [n]);
  return (
    <section className="section alt testi" id="depoimentos">
      <div className="wrap">
        <p className="eyebrow center" style={{ display: "flex", justifyContent: "center" }}>
          Depoimentos
        </p>
        <div className="quote-mark" style={{ textAlign: "center" }}>”</div>
        <div className="testi-stage">
          {TESTIMONIALS.map((t, idx) => (
            <div className={"testi-card" + (idx === i ? " active" : "")} key={idx}>
              <div className="stars">★★★★★</div>
              <blockquote>{t.q}</blockquote>
              <div className="who"><b>{t.name}</b><span>{t.role}</span></div>
            </div>
          ))}
        </div>
        <div className="testi-dots">
          {TESTIMONIALS.map((_, idx) => (
            <button key={idx} className={idx === i ? "on" : ""}
              onClick={() => setI(idx)} aria-label={"Depoimento " + (idx + 1)} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.Sections1 = { Header, MobileMenu, Hero, About, Diferenciais, Areas, Testimonials };
