const { useState, useEffect, useRef } = React;

/* ============ EXTERNAL LINKS ============ */
// Lien Zcal — diagnostic gratuit.
// Remplacez le slug ci-dessous par votre vrai lien Zcal (ex: https://zcal.co/i/AbC123).
const ZCAL_URL = "https://zcal.co/i/yHwsUipg";

/* ============ TWEAK DEFAULTS ============ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#993C1D",
  "heroVariant": "editorial",
  "density": "regular",
  "showCockpit": true
} /*EDITMODE-END*/;

const ACCENTS = {
  "#993C1D": { deep: "#7A2F15", soft: "#D08768" }, // diwanat rust (brand)
  "#3A6E5C": { deep: "#2B5347", soft: "#8FB7A8" }, // sage
  "#2E4B7C": { deep: "#1F3454", soft: "#8AA3C4" }, // indigo
  "#7C5A3A": { deep: "#5B4128", soft: "#C2A287" } // ochre
};

/* ============ SMALL UTILS ============ */
function useInView(threshold = 0.15) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      ([e]) => e.isIntersecting && setInView(true),
      { threshold }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, inView];
}

function Reveal({ children, delay = 0, as: As = "div", ...rest }) {
  const [ref, inView] = useInView();
  return (
    <As
      ref={ref}
      style={{
        opacity: inView ? 1 : 0,
        transform: inView ? "translateY(0)" : "translateY(16px)",
        transition: `opacity .8s cubic-bezier(.16,1,.3,1) ${delay}s, transform .8s cubic-bezier(.16,1,.3,1) ${delay}s`
      }}
      {...rest}>
      
      {children}
    </As>);

}

function CountUp({ to, suffix = "", duration = 1400, prefix = "" }) {
  const [ref, inView] = useInView();
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!inView) return;
    let raf, start;
    const step = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(to * eased);
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [inView, to]);
  const display = Number.isInteger(to) ? Math.round(val) : val.toFixed(1);
  return <span ref={ref}>{prefix}{display}{suffix}</span>;
}

/* ============ HEADER ============ */
function DiwanatLogo({ height = 32, dotColor = "var(--accent)", className = "" }) {
  // Inline wordmark — text uses currentColor, dot uses dotColor.
  // Mirrors the brand SVG geometry (viewBox 1000×380).
  return (
    <svg
      viewBox="0 0 1000 380"
      role="img"
      aria-label="Diwanat"
      style={{ height, width: "auto", display: "block" }}
      className={className}>
      <text
        x="500" y="270" textAnchor="middle"
        fontFamily="'EB Garamond', Georgia, serif"
        fontWeight="600" fontSize="240" letterSpacing="-1"
        fill="currentColor">
        Dıwanat
      </text>
      <circle cx="301.8" cy="121.2" r="26.4" fill={dotColor} />
    </svg>);
}

function Header() {
  const [active, setActive] = useState("hero");
  useEffect(() => {
    const sections = ["hero", "offres", "methode", "manifeste", "contact"];
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) setActive(e.target.id);
        });
      },
      { rootMargin: "-40% 0px -55% 0px" }
    );
    sections.forEach((id) => {
      const el = document.getElementById(id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  const scrollTo = (e, id) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
  };
  const link = (id, label) =>
  <a
    href={`#${id}`}
    className={`nav-link${active === id ? " active" : ""}`}
    onClick={(e) => scrollTo(e, id)}>
    
      {label}
    </a>;


  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <a href="#hero" className="brand" onClick={(e) => scrollTo(e, "hero")} aria-label="Diwanat">
          <img src="assets/diwanat-logo.png" alt="Diwanat" className="brand-mark" />
        </a>
        <nav className="nav-links">
          {link("offres", "Offres")}
          {link("methode", "Méthode")}
          {link("manifeste", "Manifeste")}
          {link("contact", "Contact")}
        </nav>
        <a
          href={ZCAL_URL}
          target="_blank"
          rel="noopener noreferrer"
          className="btn btn-primary btn-sm">Demander un diagnostic gratuit


        </a>
      </div>
    </header>);

}

/* ============ COCKPIT (animated demo) ============ */
const COCKPIT_DATA = [
{ label: "Marge brute par BU", sub: "S46 · cumul YTD", values: ["28,4 %", "29,1 %", "29,7 %", "30,2 %"], deltas: ["+0,7 pt", "+0,6 pt", "+0,5 pt"], delta: "up" },
{ label: "DSO clients", sub: "rolling 30j", values: ["58 j", "55 j", "52 j", "49 j"], deltas: ["−3 j", "−3 j", "−3 j"], delta: "up" },
{ label: "Charge industrielle", sub: "atelier 02 · prév.", values: ["94 %", "97 %", "102 %", "99 %"], deltas: ["seuil 100 %"], delta: "down" },
{ label: "Trésorerie projetée", sub: "fin du mois", values: ["4,1 M€", "4,4 M€", "4,6 M€", "4,8 M€"], deltas: ["+0,7 M€"], delta: "up" }];


function Cockpit() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setTick((x) => (x + 1) % 4), 1800);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="cockpit">
      <div className="cockpit-head">
        <div className="cockpit-title">
          <span className="dot pulse" />
          Cockpit S46
        </div>
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: ".1em" }}>
          MAJ il y a 4 min
        </span>
      </div>

      {COCKPIT_DATA.map((row, i) => {
        const v = row.values[tick % row.values.length];
        const d = row.deltas[tick % row.deltas.length];
        return (
          <div className="ck-row" key={i}>
            <div className="label">
              {row.label}
              <span className="sub">{row.sub}</span>
            </div>
            <div className={`delta ${row.delta}`}>{d}</div>
            <div className="val" key={v} style={{
              animation: "fade .5s ease"
            }}>{v}</div>
          </div>);

      })}

      <div className="ck-decision">
        <span className="pip" />
        <div>
          <strong style={{ display: "block", marginBottom: 4 }}>Décision proposée</strong>
          Réallouer 180 k€ du budget marketing Q4 vers la BU industrie — gain de marge attendu&nbsp;: +0,4 pt sur la marge brute consolidée.
        </div>
      </div>

      <div className="ck-footer">
        <span>3 sources · ERP, CRM, trésorerie</span>
        <span>signé&nbsp;: DAF</span>
      </div>

      <style>{`@keyframes fade { from { opacity:.2; transform: translateY(-3px); } to { opacity:1; transform: translateY(0); } }`}</style>
    </div>);

}

/* ============ HERO ============ */
function Hero({ showCockpit }) {
  return (
    <section className="hero" id="hero">
      <div className="dot-grid" aria-hidden="true" />
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <div className="hero-meta">
          <span className="index">Diwanat</span>
          <span className="right">Pilotage opérationnel de votre ETI</span>
        </div>

        <div className="hero-grid">
          <Reveal>
            <span className="eyebrow">Index — 01 / Manifeste</span>
            <h1 className="text-balance">
              Vous ne <br />
              manquez pas d'informations. <br />
              <span className="italic-accent">Vous manquez</span>{" "}
              <span className="quiet">de décisions.</span>
            </h1>
            <p className="hero-lede text-pretty">Diwanat outille les directions générales et départements des ETI avec du conseil stratégique et opérationnel, de la formation et des agents de pilotage dédiés à la prise de décision.



            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
              <a href={ZCAL_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
                Demander un diagnostic gratuit
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.4" /></svg>
              </a>
              <a href="#offres" onClick={(e) => { e.preventDefault(); document.getElementById("offres")?.scrollIntoView({ behavior: "smooth" }); }} className="btn btn-ghost">Découvrir notre solution de Business Decision
              </a>
            </div>
            <p style={{ marginTop: 16, fontSize: 13, color: "var(--ink-mute)", fontFamily: "var(--font-mono)", letterSpacing: ".08em" }}>
              · 3 ETI françaises sélectionnées pour la bêta 2026
            </p>
          </Reveal>

          {showCockpit ?
          <Reveal delay={0.15}>
              <Cockpit />
            </Reveal> :

          <Reveal delay={0.15}>
              <div style={{
              aspectRatio: "4/5",
              background: "var(--paper)",
              border: "1px solid var(--rule)",
              display: "flex",
              alignItems: "flex-end",
              padding: 32,
              fontFamily: "'EB Garamond', serif",
              fontSize: 28,
              lineHeight: 1.15,
              color: "var(--ink-soft)",
              fontStyle: "italic",
              position: "relative"
            }}>
                <div>
                  « Une décision claire, prise au bon moment, transforme la trajectoire d'une entreprise. »
                  <div style={{ marginTop: 24, fontSize: 12, letterSpacing: ".15em", color: "var(--ink-mute)", textTransform: "uppercase", fontStyle: "normal", fontFamily: "'JetBrains Mono', monospace" }}>
                    — Principe fondateur
                  </div>
                </div>
              </div>
            </Reveal>
          }
        </div>

        <div className="scroll-cue">
          <div className="bar" />
          
        </div>
      </div>
    </section>);

}

/* ============ STATS ============ */
const STATS = [
{ value: 73, suffix: "%", label: "des dirigeants d'ETI déclarent manquer de visibilité en temps réel sur leur performance opérationnelle.", src: "Bpifrance Le Lab — 2023" },
{ value: 3, suffix: " sem.", label: "délai moyen pour consolider un reporting décisionnel dans une ETI sans outil dédié.", src: "Sage / IDC France — 2024" },
{ value: 40, suffix: "%", label: "du temps d'un DAF consacré à produire de l'information plutôt qu'à la transformer en décision.", src: "DFCG / Deloitte — 2023" },
{ value: 30, suffix: "%", prefix: "+", label: "de vitesse de décision dans les ETI ayant déployé un cockpit de pilotage unifié.", src: "McKinsey — 2023" }];


function Stats() {
  return (
    <section style={{ padding: "72px 0" }}>
      <div className="wrap">
        <div style={{ marginBottom: 40 }}>
          <span className="eyebrow">Index — 02 / Constat</span>
        </div>
        <div className="stats">
          {STATS.map((s, i) =>
          <Reveal key={i} delay={i * 0.08} className="stat">
              <span className="figure">
                <CountUp to={s.value} suffix={s.suffix} prefix={s.prefix || ""} />
              </span>
              <p>{s.label}</p>
              <span className="src">{s.src}</span>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ============ PROBLEM ============ */
function Problem() {
  return (
    <section className="problem">
      <div className="wrap">
        <div style={{ marginBottom: 40 }}>
          <span className="eyebrow">Index — 03 / Diagnostic</span>
        </div>
        <Reveal>
          <p className="quote-lead">
            Vos données sont là, dans l'ERP, le CRM, les fichiers Excel, les comptes rendus de réunion. Mais elles n'arrivent jamais au bon moment, dans le bon format et au bon endroit, pour permettre la bonne décision.
            
            <br /><br />
            <span className="em">Ce n'est pas un problème de personnes. C'est un problème de système.</span>
          </p>
        </Reveal>

        <div className="friction-grid">
          {[
          { tag: "Symptôme 01", h: "Les CODIR du lundi matin", p: "Trois directions, trois chiffres différents pour la même question. Les décisions sont reportées à la semaine suivante." },
          { tag: "Symptôme 02", h: "Le temps de décision", p: "40 % du temps passé à consolider, 10 % à analyser, 0 % à arbitrer. La donnée existe, l'arbitrage manque." },
          { tag: "Symptôme 03", h: "L'angle mort opérationnel", p: "Les dérives de marge sont identifiées après les faits,  trop tard pour pouvoir être corrigées." }].
          map((f, i) =>
          <Reveal className="friction" key={i} delay={i * 0.1}>
              <div className="tag">{f.tag}</div>
              <h4>{f.h}</h4>
              <p>{f.p}</p>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ============ OFFERS ============ */
const OFFERS = [
{
  id: "01",
  title: "Business Decision",
  sub: "",
  desc: "Votre cockpit de pilotage activé en 5 semaines. Des agents spécialisés branchés sur vos systèmes existants, qui chaque jour vous livrent une décision chiffrée, sourcée, prête à signer .",
  cta: "Découvrir notre solution",
  featured: true
},
{
  id: "02",
  title: "Conseil",
  sub: "Opérationnel & stratégique",
  desc: "Missions ciblées sur vos sujets prioritaires : Innovation, gouvernance, pilotage de la performance, organisation des directions.",
  cta: "En savoir plus"
},
{
  id: "03",
  title: "Formation",
  sub: "Équipes de direction",
  desc: "Accompagnement personnalisé, formations et ateliers pour les dirigeants et membres du Codir, leadership, définition des cas d'usage prioritaires et transformatifs, éthique, alignement et gouvernance.",
  cta: "Voir les formations"
},
{
  id: "04",
  title: "Études",
  sub: "Analyses & benchmarks ETI",
  desc: "Études sectorielles sur les ETI, performance, pratiques de pilotage, tendances de marché.",
  cta: "Voir les études"
}];


function Offers() {
  return (
    <section id="offres">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <span className="eyebrow">Index — 04 / Offres</span>
          </div>
          <div>
            <h2 className="text-balance">
              Ce que nous <span className="italic-accent">faisons</span>. Quatre modes d'engagement, un seul objectif&nbsp;: la décision.
            </h2>
          </div>
        </div>

        <div className="offers-stack">
          {OFFERS.map((o) =>
          <Reveal key={o.id} className={`offer${o.featured ? " featured" : ""}`}>
              <div className="o-id">{o.id}</div>
              <h3 className="o-title">
                <span className="sub">{o.sub}</span>
                {o.title}
              </h3>
              <p className="o-desc">{o.desc}</p>
              <a
                href={o.featured ? ZCAL_URL : "#contact"}
                target={o.featured ? "_blank" : undefined}
                rel={o.featured ? "noopener noreferrer" : undefined}
                onClick={!o.featured ? (e) => { e.preventDefault(); document.getElementById("contact")?.scrollIntoView({ behavior: "smooth" }); } : undefined}
                className="o-cta">
                {o.cta}
                <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.4" /></svg>
              </a>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ============ METHOD ============ */
const STEPS = [
{ n: "01", days: "J+15", h: "Diagnostic", p: "Quinze jours d'immersion. Nous cartographions vos flux d'information, vos comités, vos décisions différées." },
{ n: "02", days: "J+50", h: "Cockpit", p: "Nous connectons votre cockpit à vos systèmes (ERP, CRM, paie, trésorerie). Votre premier rapport de pilotage est livré." },
{ n: "03", days: "Continu", h: "Décision", p: "Vos décisions chiffrées et sourcées chaque semaine sont partagées au CODIR. Vous arbitrez des recommandations plus que vous n'interprétez des tableaux de bord." },
{ n: "04", days: "Continu", h: "Itération", p: "Vos agents s'adaptent à vos arbitrages, vos indicateurs évoluent avec votre stratégie." }];


function Method() {
  return (
    <section id="methode" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div className="sec-head">
          <div>
            <span className="eyebrow">Index — 05 / Méthode</span>
          </div>
          <div>
            <h2 className="text-balance">
              Passer de l'ère de la donnée brute à celui de <span className="italic-accent">la décision éclairée</span>.
            </h2>
          </div>
        </div>

        <div className="method">
          {STEPS.map((s, i) =>
          <Reveal className="step" key={s.n} delay={i * 0.08}>
              <div className="step-meta">
                <span className="n">{s.n}</span>
                <span>{s.days}</span>
              </div>
              <h4>{s.h}</h4>
              <p>{s.p}</p>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ============ MANIFESTO ============ */
function Manifesto() {
  return (
    <section className="manifesto" id="manifeste">
      <div className="wrap-tight">
        <DiwanatLogo height={44} className="manifesto-logo" />
        <span className="eyebrow">Index — 06 / Manifeste</span>
        <h2 className="text-balance">
          Votre rôle de dirigeant n'est pas d'organiser l'information. C'est de 
          <span className="italic-accent" style={{ color: "var(--accent-soft)" }}> l'utiliser</span>.
        </h2>
        <p>
          Nous avons construit Diwanat avec une conviction simple. Les Entreprises de Taille Intermédiaire ont des besoins complexes, souvent traités avec des outils inadaptés ou simplement obsolètes. 

          <strong> Nous ne vendons pas un produit, nous installons votre système de décision.</strong>
        </p>
        <p>Notre méthode s'ancre dans la réalité des flux d'une ETI — pas dans un modèle générique. Nous branchons directement sur vos systèmes existants, nous comprenons les arbitrages de votre CODIR, et nous construisons un système qui apprend de vos décisions. Nous nous concentrons sur les ETI parce que c'est là qu'une décision claire, prise au bon moment, peut radicalement transformer la trajectoire de l'entreprise.




        </p>
        <div className="manifesto-sig">
          <span>Diwanat — Paris</span>
          <span></span>
        </div>
      </div>
    </section>);

}

/* ============ ZCAL EMBED (official embed.js inline widget) ============ */
function ZcalEmbed() {
  useEffect(() => {
    const SCRIPT_SRC = "https://static.zcal.co/embed/v1/embed.js";
    // Zcal's embed.js auto-scans for .zcal-inline-widget on load. In an SPA we
    // (re)inject it so the widget mounts even after a client-side refresh.
    const existing = document.querySelector(`script[src="${SCRIPT_SRC}"]`);
    if (existing) existing.remove();
    const s = document.createElement("script");
    s.src = SCRIPT_SRC;
    s.async = true;
    document.body.appendChild(s);
    return () => {s.remove();};
  }, []);

  return (
    <div
      className="form-card zcal-card"
      style={{ padding: 0, overflow: "hidden" }}>
      {/* Zcal inline embed — piloté par data-zcal-link */}
      <div
        className="zcal-inline-widget"
        data-zcal-link={ZCAL_URL}
        style={{ minWidth: 320, height: 720, width: "100%" }}>
        <a href={ZCAL_URL} target="_blank" rel="noopener noreferrer" className="zcal-fallback">
          Réserver un diagnostic gratuit
        </a>
      </div>
    </div>);

}

function Contact() {
  return (
    <section className="contact" id="contact">
      <div className="wrap">
        <div className="contact-grid">
          <Reveal>
            <span className="eyebrow">Index — 07 / Contact</span>
            <h2 className="text-balance">
              Analyser <span className="italic-accent">votre situation</span>.
            </h2>
            <p className="contact-promise">Un diagnostic gratuit et sans engagement qui vous permet de faire le point sur l'existant et de détailler ce que nous pouvons concrètement vous proposer.


            </p>
            <ul className="contact-list">
              <li><span className="pip" /> Réponse sous 24 heures ouvrables, par un associé.</li>
              <li><span className="pip" /> Échange initial confidentiel — 45 minutes en visio.</li>
            </ul>
          </Reveal>

          <Reveal delay={0.1}>
            <ZcalEmbed />
          </Reveal>
        </div>
      </div>
    </section>);

}

/* ============ FOOTER ============ */
function Footer() {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-top">
          <div>
            <img src="assets/diwanat-logo.png" alt="Diwanat" className="foot-logo" />
            <p>Chaque décision, chiffrée. Chaque action, tracée.</p>
          </div>
          <div>
            <h5>Offres</h5>
            <a href="#offres">Diwan</a>
            <a href="#offres">Conseil</a>
            <a href="#offres">Formation</a>
            <a href="#offres">Études</a>
          </div>
          <div>
            <h5>Maison</h5>
            <a href="#methode">Méthode</a>
            <a href="#manifeste">Manifeste</a>
            <a href="#contact">Contact</a>
          </div>
          <div>
            <h5>Légal</h5>
            <a href="#">Mentions légales</a>
            <a href="#">Confidentialité</a>
            <a href="mailto:contact@diwanat.fr">at@diwanat.fr</a>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© {new Date().getFullYear()} Diwanat</span>
          <span></span>
        </div>
      </div>
    </footer>);

}

/* ============ APP ROOT ============ */
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks
  useEffect(() => {
    const acc = ACCENTS[tweaks.accent] || ACCENTS["#993C1D"];
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    document.documentElement.style.setProperty("--accent-deep", acc.deep);
    document.documentElement.style.setProperty("--accent-soft", acc.soft);
  }, [tweaks.accent]);

  useEffect(() => {
    document.body.className = `density-${tweaks.density} hero-${tweaks.heroVariant}`;
  }, [tweaks.density, tweaks.heroVariant]);

  return (
    <>
      <Header />
      <Hero showCockpit={tweaks.showCockpit} />
      <Stats />
      <Problem />
      <Offers />
      <Method />
      <Manifesto />
      <Contact />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Identité">
          <TweakColor
            label="Accent"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={Object.keys(ACCENTS)} />
          
        </TweakSection>
        <TweakSection label="Composition">
          <TweakRadio
            label="Hero"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={["editorial", "sombre", "doux"]} />
          
          <TweakToggle
            label="Cockpit animé"
            value={tweaks.showCockpit}
            onChange={(v) => setTweak("showCockpit", v)} />
          
          <TweakRadio
            label="Densité"
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={["cozy", "regular", "airy"]} />
          
        </TweakSection>
      </TweaksPanel>
    </>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);