// components.jsx — shared UI for Instituto Jurídico Juiz Odilon

const { useState, useEffect, useRef } = React;

/* ─── Monograma SVG (inspired by IJO mark, original drawing) ──── */
function Monogram({ size = 40, color = "var(--gold)" }) {
  return (
    <svg
      viewBox="0 0 64 64"
      width={size}
      height={size}
      style={{ display: "block" }}
      aria-label="Monograma IJO"
    >
      <defs>
        <linearGradient id="mg-grad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.95" />
          <stop offset="50%" stopColor={color} stopOpacity="1" />
          <stop offset="100%" stopColor={color} stopOpacity="0.78" />
        </linearGradient>
      </defs>
      <g
        fill="none"
        stroke="url(#mg-grad)"
        strokeWidth="1.6"
        strokeLinecap="round"
        fontFamily="Cormorant Garamond, serif"
      >
        {/* IJO letterforms */}
        <text
          x="32"
          y="44"
          textAnchor="middle"
          fontSize="42"
          fontWeight="500"
          fill="url(#mg-grad)"
          stroke="none"
          letterSpacing="-2"
          style={{ fontStyle: "normal", fontFamily: "Cormorant Garamond, Georgia, serif" }}
        >
          IJO
        </text>
        {/* underline flourish */}
        <line x1="14" y1="52" x2="50" y2="52" strokeWidth="0.8" opacity="0.7" />
        <g transform="translate(32 52)">
          <rect x="-1.6" y="-1.6" width="3.2" height="3.2" fill="url(#mg-grad)" stroke="none" transform="rotate(45)" />
        </g>
      </g>
    </svg>
  );
}

/* ─── Star / diamond flourish ─────────────────────────────── */
function Flourish({ width = 80, color = "var(--gold)", className = "" }) {
  return (
    <div className={`gold-flourish ${className}`} style={{ color }}>
      <span className="bar" style={{ width: width / 2 }}></span>
      <span className="star"></span>
      <span className="bar" style={{ width: width / 2 }}></span>
    </div>
  );
}

/* ─── Nav ─────────────────────────────────────────────────── */
function Nav({ current, onNavigate, dark = false }) {
  const links = [
    { id: "home", label: "Instituto" },
    { id: "cursos", label: "Cursos" },
    { id: "publicacoes", label: "Publicações" },
    { id: "sobre", label: "Sobre" },
    { id: "contato", label: "Contato" },
  ];
  return (
    <nav className={`nav ${dark ? "is-dark" : ""}`}>
      <div className="container-wide">
        <div className="nav-inner">
          <a
            href="#home"
            className="nav-brand"
            onClick={(e) => { e.preventDefault(); onNavigate("home"); }}
          >
            <Monogram size={36} color={dark ? "var(--gold)" : "var(--navy-900)"} />
            <span className="brand-text">
              <span className="brand-name">Instituto Jurídico Juiz Odilon</span>
              <span className="brand-sub">Estudos Jurídicos Avançados</span>
            </span>
          </a>
          <div className="nav-links">
            {links.map((l) => (
              <a
                key={l.id}
                href={`#${l.id}`}
                className={`nav-link ${current === l.id ? "active" : ""}`}
                onClick={(e) => { e.preventDefault(); onNavigate(l.id); }}
              >
                {l.label}
              </a>
            ))}
          </div>
          <a
            href="#cursos"
            className="nav-cta"
            onClick={(e) => { e.preventDefault(); onNavigate("cursos"); }}
          >
            Formação
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ─── Footer ─────────────────────────────────────────────── */
function Footer({ onNavigate }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-mono">
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <Monogram size={48} color="var(--gold)" />
              <div>
                <div className="brand-name">Instituto Jurídico<br />Juiz Odilon</div>
                <div className="brand-sub" style={{ marginTop: 6 }}>Estudos Jurídicos Avançados</div>
              </div>
            </div>
            <p>
              Centro de estudos dedicado à formação jurídica avançada em direito penal econômico,
              crime organizado e criminalidade complexa, sob a direção do Juiz Odilon de Oliveira.
            </p>
          </div>
          <div>
            <h4>Navegação</h4>
            <ul>
              <li><a href="#home" onClick={(e) => { e.preventDefault(); onNavigate("home"); }}>Instituto</a></li>
              <li><a href="#cursos" onClick={(e) => { e.preventDefault(); onNavigate("cursos"); }}>Cursos</a></li>
              <li><a href="#publicacoes" onClick={(e) => { e.preventDefault(); onNavigate("publicacoes"); }}>Publicações</a></li>
              <li><a href="#sobre" onClick={(e) => { e.preventDefault(); onNavigate("sobre"); }}>Sobre o Juiz</a></li>
              <li><a href="#contato" onClick={(e) => { e.preventDefault(); onNavigate("contato"); }}>Contato</a></li>
            </ul>
          </div>
          <div>
            <h4>Áreas</h4>
            <ul>
              <li><a href="#cursos" onClick={(e) => { e.preventDefault(); onNavigate("cursos"); }}>Lavagem de Dinheiro</a></li>
              <li><a href="#cursos" onClick={(e) => { e.preventDefault(); onNavigate("cursos"); }}>Contrabando e Descaminho</a></li>
              <li><a href="#cursos" onClick={(e) => { e.preventDefault(); onNavigate("cursos"); }}>Crimes Financeiros</a></li>
              <li><a href="#cursos" onClick={(e) => { e.preventDefault(); onNavigate("cursos"); }}>Crime Organizado</a></li>
              <li><a href="#cursos" onClick={(e) => { e.preventDefault(); onNavigate("cursos"); }}>Casos Complexos</a></li>
            </ul>
          </div>
          <div>
            <h4>Contato</h4>
            <ul>
              <li><a href="#contato" onClick={(e) => { e.preventDefault(); onNavigate("contato"); }}>secretaria@institutojuizodilon.com.br</a></li>
              <li><a href="#contato" onClick={(e) => { e.preventDefault(); onNavigate("contato"); }}>+55 (67) 9647-7545</a></li>
              <li><a href="#">LinkedIn</a></li>
              <li><a href="#">Newsletter Institucional</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© MMXXVI — Instituto Jurídico Juiz Odilon</div>
          <div>Campo Grande · Brasília · São Paulo</div>
        </div>
      </div>
    </footer>
  );
}

/* ─── Placeholder ─────────────────────────────────────────── */
function Placeholder({ label = "imagem", dark = false, style = {} }) {
  return (
    <div className={`placeholder ${dark ? "dark" : ""}`} style={style}>
      <span className="ph-label">{label}</span>
    </div>
  );
}

/* ─── Hero — Solene (centered, monograma grande) ────────── */
function HeroSolene({ density }) {
  return (
    <section className="hero">
      <div className="container hero-inner">
        <div className="hero-meta">
          <span>Estabelecido · MMXXVI</span>
          <span className="gold">Estudos Jurídicos Avançados</span>
          <span>Vol. I · Edição Institucional</span>
        </div>

        <div className="hero-grid-centered">
          <Monogram size={140} color="var(--gold)" />
          <Flourish width={120} color="var(--gold)" className="" />

          <div className="hero-eyebrow" style={{ marginTop: 32 }}>
            Instituto Jurídico
          </div>
          <h1 className="hero-title" style={{ marginTop: 12 }}>
            Juiz <em>Odilon</em>
          </h1>

          <p className="hero-lede" style={{ textAlign: "center", marginTop: 32, maxWidth: "44ch" }}>
            Um centro de estudos dedicado à formação jurídica avançada em direito penal econômico,
            crime organizado e criminalidade complexa — fundado na trajetória e na autoridade
            de quem julgou os grandes casos do país.
          </p>

          <div className="hero-portrait-wrap">
            <div className="hero-portrait">
              <img src="assets/odilon.png" alt="Juiz Odilon de Oliveira" />
              <div className="hero-portrait-caption">
                <span className="name">Juiz Odilon de Oliveira</span>
                <span className="role">Diretor · Magistrado Federal</span>
              </div>
            </div>
          </div>

          <div style={{ display: "flex", gap: 20, marginTop: 56, flexWrap: "wrap", justifyContent: "center" }}>
            <a href="#cursos" className="btn btn-gold">
              Explore a formação avançada
              <span className="arrow">→</span>
            </a>
            <a href="#sobre" className="btn btn-ivory">
              Sobre o instituto
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Hero — Contemporâneo (split, retrato + tipografia) ── */
function HeroContemporaneo({ density, onNavigate }) {
  return (
    <section className="hero">
      <div className="container-wide hero-inner">
        <div className="hero-meta">
          <span>Estabelecido · MMXXVI</span>
          <span className="gold">Estudos Jurídicos Avançados</span>
          <span>Vol. I · Edição Institucional</span>
        </div>

        <div className="hero-grid-split">
          <div>
            <div className="hero-eyebrow">Instituto Jurídico</div>
            <h1 className="hero-title">
              A autoridade<br />
              de uma <em>trajetória</em><br />
              construída no centro<br />
              dos grandes casos.
            </h1>
            <div className="hero-rule"></div>
            <p className="hero-lede">
              Centro de estudos dedicado à formação jurídica avançada em
              <em style={{ color: "var(--gold-soft)", fontStyle: "italic" }}> direito penal</em>, crime organizado,
              lavagem de dinheiro e criminalidade complexa — sob a direção do
              Juiz Odilon de Oliveira.
            </p>
            <div style={{ display: "flex", gap: 20, marginTop: 40, flexWrap: "wrap" }}>
              <a href="#cursos" className="btn btn-gold" onClick={(e) => { e.preventDefault(); onNavigate && onNavigate("cursos"); }}>
                Explore a formação avançada
                <span className="arrow">→</span>
              </a>
              <a href="#sobre" className="btn btn-ivory" onClick={(e) => { e.preventDefault(); onNavigate && onNavigate("sobre"); }}>
                Sobre o Juiz Odilon
              </a>
            </div>

            <div className="hero-stats">
              <div>
                <div className="stat-num">III</div>
                <div className="stat-label">Décadas<br />na magistratura federal</div>
              </div>
              <div>
                <div className="stat-num">IV</div>
                <div className="stat-label">Linhas de pesquisa<br />em direito penal econômico</div>
              </div>
              <div>
                <div className="stat-num">+200</div>
                <div className="stat-label">Sentenças em<br />casos complexos</div>
              </div>
            </div>
          </div>

          <div className="hero-portrait-wrap">
            <div className="hero-portrait">
              <img src="assets/odilon.png" alt="Juiz Odilon de Oliveira" />
              <div className="hero-portrait-caption">
                <span className="name">Juiz Odilon de Oliveira</span>
                <span className="role">Diretor · Magistrado Federal</span>
              </div>
            </div>
            <div style={{
              position: "absolute",
              top: -24,
              right: -24,
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: 8,
            }}>
              <Monogram size={64} color="var(--gold)" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Page head (interior pages) ─────────────────────────── */
function PageHead({ crumbs, title, sub }) {
  return (
    <section className="page-head">
      <div className="container">
        <div className="crumbs">
          {crumbs.map((c, i) => (
            <React.Fragment key={i}>
              {i > 0 && <span className="sep">/</span>}
              <span>{c}</span>
            </React.Fragment>
          ))}
        </div>
        <h1 dangerouslySetInnerHTML={{ __html: title }} />
        {sub && <p className="sub">{sub}</p>}
      </div>
    </section>
  );
}

/* ─── Export to window ───────────────────────────────────── */
Object.assign(window, {
  Monogram, Flourish, Nav, Footer, Placeholder,
  HeroSolene, HeroContemporaneo, PageHead,
});