// Header, Footer, Hero, ArticleCard, ArticlePage components

const Header = ({ onLogo, onArticle }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={"site-header" + (scrolled ? " is-scrolled" : "")}>
      <div className="container header-inner">
        <a href="#" onClick={(e) => { e.preventDefault(); onLogo(); }} className="brand">
          <span className="brand-mark">
            <svg width="38" height="38" viewBox="0 0 36 36" aria-label="Investir dans l'IA">
              {/* Coin — perfect circle background, rounded all-the-way */}
              <circle cx="18" cy="18" r="17" fill="var(--ink)" />
              {/* Soft accent ring inside, low opacity, for depth */}
              <circle cx="18" cy="18" r="14.5" fill="none"
                      stroke="var(--accent-bright)" strokeWidth="0.7" opacity="0.4" />

              {/* € — generous round C, almost closed, opens to the right */}
              <path d="M 24 11 A 8.5 8.5 0 1 0 24 25"
                    stroke="#FFFFFF" strokeWidth="2.8" fill="none" strokeLinecap="round" />

              {/* Two pill crossbars, fully rounded ends, in accent */}
              <line x1="11" y1="15.6" x2="23.5" y2="15.6"
                    stroke="var(--accent-bright)" strokeWidth="2.6" strokeLinecap="round" />
              <line x1="11" y1="20.4" x2="21" y2="20.4"
                    stroke="var(--accent-bright)" strokeWidth="2.6" strokeLinecap="round" />
            </svg>
          </span>
          <span className="brand-name"><span className="brand-strong">Investir</span><span className="brand-thin"> dans l'IA</span></span>
        </a>
        <nav className="header-nav">
          <a href="/blog" className="nav-link">Blog</a>
          <a href="/glossaire-ia" className="nav-link">Glossaire IA</a>
          <a href="/a-propos" className="nav-link">À propos</a>
        </nav>
        <div className="header-cta">
          <button className="btn-search" aria-label="Search">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="currentColor" strokeWidth="1.3"/><line x1="9.5" y1="9.5" x2="13" y2="13" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/></svg>
          </button>
        </div>
      </div>
    </header>
  );
};

const Footer = ({ categories = [], lastPublishedAt = null }) => {
  const cats = (categories || []).filter(c => c && c !== "Tous");
  let lastDate = null;
  if (lastPublishedAt) {
    try {
      lastDate = new Date(lastPublishedAt).toLocaleDateString("fr-FR", {
        day: "2-digit", month: "2-digit", year: "2-digit"
      }).replace(/\//g, ".");
    } catch (_) { /* ignore */ }
  }
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <h2 className="serif footer-title">L'IA, sans bruit. <em>Avec méthode.</em></h2>
            <p className="footer-sub">
              Analyses indépendantes du marché de l'intelligence artificielle.
              Aucun sponsor, aucune crypto, aucun conseil en investissement.
            </p>
          </div>
          <div className="footer-cols">
            <div>
              <div className="footer-col-h">Navigation</div>
              <a href="/blog">Tous les articles</a>
              <a href="/a-propos">À propos</a>
              <a href="/glossaire-ia">Glossaire IA</a>
            </div>
            {cats.length > 0 ? (
              <div>
                <div className="footer-col-h">Catégories</div>
                {cats.map(cat => (
                  <a key={cat} href={"/blog?cat=" + encodeURIComponent(cat)}>{cat}</a>
                ))}
              </div>
            ) : null}
          </div>
        </div>
        <div className="footer-bottom">
          <div className="mono footer-fine">© {new Date().getFullYear()} INVESTIRDANSLIA.FR · CECI N'EST PAS UN CONSEIL EN INVESTISSEMENT</div>
          {lastDate ? (
            <div className="mono footer-fine"><span className="dot-live"></span> EN LIGNE · MIS À JOUR LE {lastDate}</div>
          ) : null}
        </div>
      </div>
    </footer>
  );
};

const Hero = ({ stats }) => {
  const analyses = (stats && stats.analyses) || 0;
  const categories = (stats && stats.categories) || 0;
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div className="hero-left">
          <div className="eyebrow"><span className="dot"></span> Lettre indépendante · Mis à jour chaque mardi</div>
          <h1 className="hero-title serif">
            <span>L'IA décodée</span>
            <span className="hero-soft">pour les</span>
            <span>investisseurs<span className="hero-period">.</span></span>
          </h1>
          <p className="hero-lede">
            Chaque semaine, nous décortiquons les actifs liés à l'intelligence artificielle —
            actions, infrastructures, technologies — pour comprendre <span className="hl">ce qui crée vraiment de la valeur</span>.
          </p>
          <div className="hero-stats">
            <div><div className="hero-stat-n mono">{analyses}</div><div className="hero-stat-l">{analyses === 1 ? 'analyse' : 'analyses'}</div></div>
            <div className="hero-stat-sep" />
            <div><div className="hero-stat-n mono">{categories}</div><div className="hero-stat-l">{categories === 1 ? 'catégorie' : 'catégories'}</div></div>
            <div className="hero-stat-sep" />
            <div><div className="hero-stat-n mono">100%</div><div className="hero-stat-l">indépendant</div></div>
          </div>
        </div>
        <div className="hero-right">
          <Globe />
        </div>
      </div>
    </section>
  );
};

const ArticleCard = ({ a, onOpen, featured = false }) => (
  <article className={"card" + (featured ? " card-featured" : "")} onClick={() => onOpen(a.slug)}>
    <div className="card-cover" style={{ background: a.cover }}>
      <Motif kind={a.motif} />
      <div className="card-cover-overlay" />
      <span className="card-tag">{a.tag}</span>
    </div>
    <div className="card-body">
      <div className="card-meta">
        <span className="card-cat">{a.cat}</span>
        <span className="card-dot">·</span>
        <span>{a.date}</span>
        <span className="card-dot">·</span>
        <span>{a.read} min</span>
      </div>
      <h3 className="card-title serif"><span className="link-underline">{a.title}</span></h3>
      <p className="card-excerpt">{a.excerpt}</p>
      <div className="card-author">
        {a.author === "Vincent Roye" ? (
          <img src="/vincent-avatar.jpg" alt="Vincent Roye" className="card-author-avatar card-author-avatar-img" />
        ) : (
          <span className="card-author-avatar" style={{ background: `oklch(70% 0.04 ${a.slug.length * 23})` }}>
            {a.author.split(' ').map(s => s[0]).join('')}
          </span>
        )}
        <span className="card-author-name">{a.author}</span>
        <span className="card-arrow">→</span>
      </div>
    </div>
  </article>
);

window.Header = Header;
window.Footer = Footer;
window.Hero = Hero;
window.ArticleCard = ArticleCard;