// JOURNAL (index) + ARTICLE DETAIL
const { useState, useEffect } = React;
const { Link, MediaPh, ARTICLES } = window;

function Journal() {
  return (
    <main className="page-enter">
      <JournalHero />
      <JournalFeatured />
      <JournalGrid />
      <Playbooks />
    </main>
  );
}

function JournalHero() {
  return (
    <section style={{ paddingTop: 180, paddingBottom: 60 }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end" }}>
        <div>
          <div className="eyebrow">↳ Le Journal · depuis 2020</div>
          <h1 className="serif" style={{ fontSize: "clamp(64px, 9.4vw, 200px)", lineHeight: 0.9, letterSpacing: "-0.025em", marginTop: 28 }}>
            Ce que nous<br/>avons couché<br/>sur le papier.
          </h1>
        </div>
        <div>
          <p className="body-lg" style={{ maxWidth: 480 }}>
            Essais de fond, notes de travail, post-mortems et quelques coups de gueule occasionnels. Rédigés par celles et ceux qui font le travail. Ni usine à contenu SEO, ni newsletter. La cadence : « quand nous avons quelque chose à dire ».
          </p>
        </div>
      </div>
    </section>
  );
}

function JournalFeatured() {
  const a = ARTICLES[0];
  return (
    <section style={{ paddingTop: 40, paddingBottom: 80, borderTop: "1px solid var(--rule)" }}>
      <Link to={`/journal/${a.slug}`} style={{ display: "block", paddingTop: 60 }}>
        <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center" }}>
          <div>
            <div className="mono" style={{ color: "var(--muted)", marginBottom: 18 }}>
              ↳ À la une · {a.category} · lecture de {a.read} min · {a.date}
            </div>
            <h2 className="serif" style={{ fontSize: "clamp(48px, 6vw, 112px)", lineHeight: 0.96, letterSpacing: "-0.02em" }}>
              {a.title}
            </h2>
            <p className="body-lg" style={{ marginTop: 24, maxWidth: 540 }}>
              Le conseil standard — « corrigez d'abord le bas de l'entonnoir » — est en grande partie erroné pour toute entreprise qui n'a pas encore atteint son échelle. Six années de données et un mauvais réflexe initial.
            </p>
            <div className="mono" style={{ marginTop: 24, color: "var(--muted)" }}>PAR {a.author.toUpperCase()}</div>
          </div>
          <div>
            <MediaPh ratio="4/5" accent="acid" label={`Numéro 18 · ${a.category}`} tr={a.date}>
              <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", padding: 48 }}>
                <span className="serif italic" style={{ fontSize: 160, lineHeight: 1, color: "var(--ink)", letterSpacing: "-0.04em" }}>18.</span>
              </div>
            </MediaPh>
          </div>
        </div>
      </Link>
    </section>
  );
}

function JournalGrid() {
  const articles = ARTICLES.slice(1);
  const [cat, setCat] = useState("Tous");
  const cats = ["Tous", ...new Set(ARTICLES.map(a => a.category))];
  const filtered = cat === "Tous" ? articles : articles.filter(a => a.category === cat);
  return (
    <section style={{ padding: "60px 0 120px", background: "var(--cream-2)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="page" style={{ marginBottom: 32, display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24 }}>
        <h2 className="serif" style={{ fontSize: "clamp(36px, 4.4vw, 72px)", lineHeight: 0.96, letterSpacing: "-0.02em" }}>L'archive</h2>
        <div className="flex gap-2" style={{ flexWrap: "wrap" }}>
          {cats.map(c => (
            <button key={c} onClick={() => setCat(c)} className="pill" style={{ background: cat === c ? "var(--ink)" : "transparent", color: cat === c ? "var(--cream)" : "var(--ink-2)", borderColor: cat === c ? "var(--ink)" : "var(--rule)" }}>{c}</button>
          ))}
        </div>
      </div>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        {filtered.map(a => <ArticleCard key={a.slug} a={a} />)}
      </div>
    </section>
  );
}

function ArticleCard({ a }) {
  const [hover, setHover] = useState(false);
  return (
    <Link to={`/journal/${a.slug}`} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "block", background: "var(--cream)", padding: 28, border: "1px solid var(--rule)", borderRadius: 4, position: "relative", transition: "background .25s var(--ease), color .25s var(--ease)",
        ...(hover ? { background: "var(--ink)", color: "var(--cream)" } : {}) }}>
      <div className="flex justify-between" style={{ marginBottom: 16 }}>
        <span className="mono" style={{ color: hover ? "var(--acid)" : "var(--ox)" }}>{a.category}</span>
        <span className="mono" style={{ color: hover ? "rgba(242,237,228,0.6)" : "var(--muted)" }}>{a.read} min</span>
      </div>
      <h3 className="serif" style={{ fontSize: 30, lineHeight: 1.1, letterSpacing: "-0.01em", minHeight: 120 }}>
        {a.title}
      </h3>
      <div className="hairline" style={{ background: hover ? "rgba(242,237,228,0.2)" : "var(--rule)", margin: "24px 0 16px" }} />
      <div className="flex justify-between">
        <span className="body-sm" style={{ color: hover ? "rgba(242,237,228,0.7)" : "var(--muted)" }}>Par {a.author}</span>
        <span className="body-sm" style={{ color: hover ? "rgba(242,237,228,0.7)" : "var(--muted)" }}>{a.date}</span>
      </div>
      {hover && (
        <div style={{ marginTop: 18, padding: 16, background: "rgba(255,255,255,0.04)", borderLeft: "2px solid var(--acid)" }}>
          <p className="body-sm" style={{ color: "rgba(242,237,228,0.85)" }}>↳ Aperçu : {a.category === "Performance" ? "Ce que nous avons changé dans notre reporting de média payant après la fin du cookie, et ce que nous avons conservé." : a.category === "Stratégie" ? "Pourquoi un brief d'une page bat systématiquement une présentation de 40 pages, sans exception." : a.category === "Cycle de vie" ? "Pourquoi nous avons suspendu notre propre newsletter pendant six mois en 2024 et ce que nous avons gardé à son retour." : a.category === "Création" ? "Dans le rythme de production d'une marque que vous devrez deviner." : "Pourquoi notre couche de reporting est gérée comme un produit, pas comme une corvée."}</p>
        </div>
      )}
    </Link>
  );
}

function Playbooks() {
  const books = [
    { n: "PB-01", t: "Le brief d'une page, avec exemples.", size: "PDF · 14 p.", year: "2025" },
    { n: "PB-02", t: "Le marketing à marge contributive, expliqué aux non-financiers.", size: "PDF · 22 p.", year: "2025" },
    { n: "PB-03", t: "Tests géo-lift en cinq jours, mode d'emploi.", size: "PDF · 18 p. · tableur", year: "2026" },
    { n: "PB-04", t: "Archétypes de cycle de vie pour le DTC, avec création.", size: "PDF · 28 p.", year: "2024" },
  ];
  return (
    <section style={{ padding: "120px 0" }}>
      <div className="page section-head" style={{ padding: 0 }}>
        <div>
          <div className="eyebrow-num">Playbooks</div>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 80px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16 }}>
            Téléchargements gratuits<br/>qui méritent d'être ouverts.
          </h2>
        </div>
        <div style={{ alignSelf: "end" }}>
          <p className="body-lg" style={{ maxWidth: 460 }}>
            Documents de travail que nous utilisons en interne, mis au propre et diffusés. Accès par email — utilisé uniquement pour vous transmettre les playbooks suivants. Pas de séquence automatisée. Aucun commercial ne vous appellera.
          </p>
        </div>
      </div>
      <div className="page">
        {books.map((b, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "80px 1fr 200px 120px 120px", gap: 32, padding: "32px 0", borderTop: "1px solid var(--rule)", alignItems: "center" }}>
            <span className="mono" style={{ color: "var(--muted)" }}>{b.n}</span>
            <h3 className="serif" style={{ fontSize: 32, lineHeight: 1.1, letterSpacing: "-0.01em" }}>{b.t}</h3>
            <span className="mono" style={{ color: "var(--muted)" }}>{b.size}</span>
            <span className="mono" style={{ color: "var(--muted)" }}>{b.year}</span>
            <button className="btn">Télécharger</button>
          </div>
        ))}
      </div>
    </section>
  );
}

// ====== ARTICLE DETAIL ======
function Article({ slug }) {
  const a = ARTICLES.find(x => x.slug === slug);
  if (!a) return <window.NotFound />;
  return <ArticleView a={a} />;
}

function ArticleView({ a }) {
  return (
    <main className="page-enter">
      <ArticleHero a={a} />
      <ArticleBody a={a} />
      <ArticleRelated a={a} />
    </main>
  );
}

function ArticleHero({ a }) {
  return (
    <section style={{ paddingTop: 140, paddingBottom: 80 }}>
      <div className="page">
        <div className="flex items-center gap-3" style={{ marginBottom: 28 }}>
          <Link to="/journal" className="mono ilink">↳ Journal</Link>
          <span className="mono" style={{ color: "var(--muted)" }}>·</span>
          <span className="mono" style={{ color: "var(--ox)" }}>{a.category}</span>
          <span className="mono" style={{ color: "var(--muted)" }}>·</span>
          <span className="mono" style={{ color: "var(--muted)" }}>lecture de {a.read} min</span>
        </div>
        <h1 className="serif" style={{ fontSize: "clamp(48px, 7vw, 144px)", lineHeight: 0.94, letterSpacing: "-0.025em", maxWidth: "16ch" }}>
          {a.title}
        </h1>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 32, marginTop: 60, paddingBottom: 32, borderBottom: "1px solid var(--rule)" }}>
          <div>
            <div className="lx-label" style={{ marginBottom: 6 }}>Par</div>
            <div className="serif" style={{ fontSize: 22 }}>{a.author}</div>
          </div>
          <div>
            <div className="lx-label" style={{ marginBottom: 6 }}>Publié le</div>
            <div className="serif" style={{ fontSize: 22 }}>{a.date}</div>
          </div>
          <div>
            <div className="lx-label" style={{ marginBottom: 6 }}>Partager</div>
            <div className="flex gap-3" style={{ marginTop: 4 }}>
              <span className="ilink mono">Copier le lien</span>
              <span className="ilink mono">Email</span>
              <span className="ilink mono">Are.na</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ArticleBody({ a }) {
  return (
    <section style={{ padding: "40px 0 100px" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "200px 720px 1fr", gap: 32 }}>
        <aside style={{ position: "sticky", top: 120, alignSelf: "start" }}>
          <div className="lx-label" style={{ marginBottom: 16 }}>↳ Sommaire</div>
          <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
            {["La prémisse", "Là où ça dérape", "Ce que nous faisons à la place", "Un exemple concret", "En conclusion"].map((s, i) => (
              <li key={i} className="mono" style={{ color: i === 0 ? "var(--ink)" : "var(--muted)" }}>{String(i+1).padStart(2,"0")} · {s}</li>
            ))}
          </ul>
        </aside>
        <article style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <p className="serif" style={{ fontSize: 32, lineHeight: 1.3, letterSpacing: "-0.005em", color: "var(--ink)" }}>
            Pendant la majeure partie de la dernière décennie, le conseil standard adressé à une entreprise grand public en croissance a été : optimisez l'entonnoir. Trouvez les fuites. Corrigez d'abord le bas. Puis occupez-vous du haut.
          </p>
          <p className="body-lg" style={{ fontSize: 19 }}>
            Nous avons appliqué ce raisonnement, sous différentes formes, pour trente-huit clients en six ans. Audits d'entonnoir, cartographies de parcours, sprints d'optimisation du taux de conversion, programmes de cycle de vie. Une partie a fonctionné. La majeure partie a constitué une mauvaise allocation d'intelligence — une manière de se sentir occupé pendant que le vrai problème restait sans réponse.
          </p>
          <h3 className="serif" style={{ fontSize: 40, lineHeight: 1.1, marginTop: 12 }}>La prémisse</h3>
          <p className="body-lg" style={{ fontSize: 19 }}>
            Le cadrage en entonnoir suppose que le prospect est déjà dans le bâtiment. L'entonnoir s'intéresse au nombre de personnes ayant atteint la troisième étape, pas à savoir si la deuxième étape était bien celle qu'elles attendaient. C'est, essentiellement, un outil pour mesurer la qualité de la porte d'entrée, pas l'intérêt de la maison.
          </p>
          <blockquote style={{ borderLeft: "3px solid var(--acid)", paddingLeft: 32, margin: "16px 0" }}>
            <p className="serif italic" style={{ fontSize: 36, lineHeight: 1.18, letterSpacing: "-0.01em" }}>
              « La plupart des problèmes marketing sont des problèmes de positionnement déguisés en problèmes de performance. »
            </p>
            <div className="mono" style={{ marginTop: 16, color: "var(--muted)" }}>— Mémo interne, Clyvonna, 2022</div>
          </blockquote>
          <h3 className="serif" style={{ fontSize: 40, lineHeight: 1.1, marginTop: 12 }}>Là où ça dérape</h3>
          <p className="body-lg" style={{ fontSize: 19 }}>
            D'expérience, le schéma d'échec est constant : une équipe qui devrait travailler sur la question « pourquoi nous » travaille en réalité sur « pourquoi la troisième étape de l'onboarding a un taux d'abandon de 12 % ». Ce sont deux questions différentes. Elles sont généralement traitées par des personnes différentes. Et très souvent, elles n'ont pas le même ordre de grandeur d'impact.
          </p>
          <figure style={{ margin: "16px 0" }}>
            <MediaPh ratio="16/9" accent="ox" label="Exemple concret · audit d'entonnoir d'un torréfacteur DTC, 2024" tr="FIG. 01" />
            <figcaption className="body-sm" style={{ marginTop: 12, color: "var(--muted)" }}>Fig. 01 · L'entonnoir d'un torréfacteur DTC avant repositionnement. Une optimisation classique aurait fait progresser le bas d'environ 2 %. Le repositionnement a fait progresser le haut d'environ 340 %.</figcaption>
          </figure>
          <h3 className="serif" style={{ fontSize: 40, lineHeight: 1.1, marginTop: 12 }}>Ce que nous faisons à la place</h3>
          <p className="body-lg" style={{ fontSize: 19 }}>
            Nous commençons chaque collaboration par réécrire la porte d'entrée. Positionnement, puis offre, puis canal. L'optimisation de l'entonnoir est la dernière étape, pas la première. Environ 70 % de nos missions débutent par ce qui ressemble à un exercice de marque, et se concluent par un gain d'efficacité média payant d'environ 30 %, parce que les intrants ont changé.
          </p>
          <p className="body-lg" style={{ fontSize: 19 }}>
            Ce n'est pas une thèse. Ce sont six ans d'empreintes laissées sur des feuilles de calcul que nous serions ravis de vous présenter en détail.
          </p>
          <div style={{ marginTop: 36, padding: 28, background: "var(--cream-2)", borderRadius: 4, border: "1px solid var(--rule)" }}>
            <div className="lx-label" style={{ marginBottom: 12 }}>↳ Ce que nous refusons</div>
            <p className="body-lg">
              Nous n'optimiserons pas un entonnoir pour un produit qui n'a pas encore de raison d'être. Cela nous est arrivé d'être engagés pour cette tâche et de l'interrompre en cours de mission. C'est la décision la plus coûteuse à prendre pour ce studio, et la ligne que nous ne franchirons pas.
            </p>
          </div>
        </article>
        <aside style={{ position: "sticky", top: 120, alignSelf: "start" }}>
          <div className="lx-label" style={{ marginBottom: 16 }}>↳ Notes</div>
          <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 18 }}>
            <li className="body-sm"><strong>1.</strong> L'entonnoir a été popularisé par Elias St. Elmo Lewis en 1898. Il n'a pas été actualisé pour le commerce en ligne.</li>
            <li className="body-sm"><strong>2.</strong> Le « positionnement » désigne ici la définition de Trout et Ries. Nous n'allons pas en débattre.</li>
            <li className="body-sm"><strong>3.</strong> Le client mentionné a consenti à la publication de cette analyse. Chiffres réels, non indicatifs.</li>
          </ul>
        </aside>
      </div>
    </section>
  );
}

function ArticleRelated({ a }) {
  const others = ARTICLES.filter(x => x.slug !== a.slug).slice(0, 3);
  return (
    <section style={{ padding: "100px 0", borderTop: "1px solid var(--rule)", background: "var(--cream-2)" }}>
      <div className="page">
        <h2 className="serif" style={{ fontSize: "clamp(36px, 4.4vw, 64px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginBottom: 40 }}>Lire un autre article.</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {others.map(o => <ArticleCard key={o.slug} a={o} />)}
        </div>
      </div>
    </section>
  );
}

window.Journal = Journal;
window.Article = Article;