// MEMORI — FAQ + CTAs + Footer
// Detect base path: '' from root, '../' from articles/ subfolder
const _FOOTER_BASE = window.location.pathname.includes('/articles/') ? '../' : '';

function Faq() {
  const items = [
    { q: "Combien ça coûte ?", a: "L'accompagnement démarre à partir de 500€. Le tarif varie en fonction du besoin, de la fréquence de publication et des options sélectionnées." },
    { q: "Sous combien de temps voit-on des résultats ?", a: "Cela dépend de beaucoup de variables : d'où vous partez, votre nombre d'abonnés, votre légitimité sur le marché, est-ce que vous prenez déjà la parole ou non, etc... Nous pourrons vous donner une réponse après un premier appel, une fois que nous aurons ces informations." },
    { q: "Quel niveau d'implication est attendu de ma part ?", a: "30 minutes à 1h tous les 15 jours pour l'interview. Plus une validation des posts avant publication. Tout le reste : veille, rédaction, publication, growth, extraction de leads, reporting est porté par nos soins." },
    { q: "En quoi est-ce différent d'un freelance ou d'un community manager ?", a: "Un freelance produit du contenu. Un CM gère un calendrier. MEMORI construit une marque. Nous travaillons sur la stratégie éditoriale, la voix, le positionnement, la lead gen et le profil. C'est comme un cabinet de conseil, avec une exécution opérationnelle intégrée. Nous mettons un point d'honneur sur la stratégie en fonction des objectifs." },
    { q: "À qui appartient le contenu publié ?", a: "Les posts publiés sous votre nom vous appartiennent intégralement et à vie. Aucune clause d'exclusivité ne vous lie à MEMORI à ce sujet." },
    { q: "Quelle est la durée d'engagement ?", a: "Il n'y a aucun engagement. Si vous n'aimez pas notre travail, vous êtes libres de partir quand vous le souhaitez." },
    { q: "Comment se passe l'onboarding ?", a: "Semaine 1-2 : audit profil + interviews de cadrage + refonte profil livrée + stratégie de contenu validée. Semaine 3 : on active le run mensuel et on publie les premiers posts." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="s-head fade-up">
          <span className="eyebrow">§ 06 : Questions</span>
          <h2>Questions <em>fréquentes</em>.</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="faq-num">{String(i+1).padStart(2,'0')}</span>
                <span>{it.q}</span>
                <span className="faq-icon" aria-hidden="true"></span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Text scramble helper — vanilla React, no deps
const SCRAMBLE_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

function ScrambleText({ text, trigger, duration = 1.4, speed = 0.032 }) {
  const [display, setDisplay] = React.useState(text);
  const animating = React.useRef(false);

  React.useEffect(() => {
    if (!trigger || animating.current) return;
    animating.current = true;
    const steps = Math.floor(duration / speed);
    let step = 0;
    const id = setInterval(() => {
      const progress = step / steps;
      let s = '';
      for (let i = 0; i < text.length; i++) {
        if (text[i] === ' ' || text[i] === '-') { s += text[i]; continue; }
        if (progress * text.length > i) {
          s += text[i];
        } else {
          s += SCRAMBLE_CHARS[Math.floor(Math.random() * SCRAMBLE_CHARS.length)];
        }
      }
      setDisplay(s);
      step++;
      if (step > steps) {
        clearInterval(id);
        setDisplay(text);
        animating.current = false;
      }
    }, speed * 1000);
    return () => clearInterval(id);
  }, [trigger]);

  return display;
}

function CtaBanner() {
  const [visible, setVisible] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVisible(true); io.disconnect(); }
    }, { threshold: 0.4 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  return (
    <section className="cta-banner" ref={ref}>
      <h2 className="cta-banner-h">
        <ScrambleText text="Construisez votre " trigger={visible} duration={1.2} speed={0.032} />
        <em><ScrambleText text="Marque-Mémoire" trigger={visible} duration={1.6} speed={0.032} /></em>.
      </h2>
      <a href="https://calendly.com/marlet-memori/decouverte" target="_blank" rel="noopener noreferrer" className="btn btn-light">
        Réserver un appel <span className="arrow">→</span>
      </a>
    </section>
  );
}

function FinalCta() {
  return (
    <section className="final-cta" id="call">
      <span className="eyebrow no-rule fade-up">§ 07 : Démarrer</span>
      <h2 className="final-cta-h fade-up">
        Prêt à devenir <em>mémorable</em><span className="dot">?</span>
      </h2>
      <p className="final-cta-sub fade-up">
        Un premier échange de 45 minutes pour comprendre votre marché,
        vos objectifs, et voir si MEMORI est le bon partenaire pour vous.
      </p>
      <a href="https://calendly.com/marlet-memori/decouverte" target="_blank" rel="noopener noreferrer" className="btn btn-ruby fade-up">
        Réserver un appel <span className="arrow">→</span>
      </a>
      <div className="final-cta-meta fade-up">
        Marlet Kervolin · Fondateur · Réponse sous 24h
      </div>
    </section>
  );
}

function Footer({ xxlVariant = 'solid', grain = true }) {
  return (
    <footer className="footer">
      <div className="footer-top">
        <div className="footer-brand">
          <div className="footer-brand-mark">
            <img src={_FOOTER_BASE + "assets/memori-logotype-white.svg"} alt="MEMORI"
              onError={e => { e.target.style.display='none'; }} />
          </div>
          <p className="footer-tag">
            <em>Crafted for impact,</em><br/>
            <em>built to <span className="kw">last</span>.</em>
          </p>
        </div>
        <div className="footer-col">
          <h4 className="footer-col-h">Navigation</h4>
          <a href="/#services">Service</a>
          <a href="/#realisations">Cas clients</a>
          <a href="/#faq">FAQ</a>
          <a href="/blog">Blog</a>
        </div>
        <div className="footer-col">
          <h4 className="footer-col-h">Ressources</h4>
          <a href="https://thememoriletters.kit.com" target="_blank" rel="noopener noreferrer">The Memori Letters ↗</a>
          <a href="/scan-linkedin">Scan LinkedIn ↗</a>
        </div>
        <div className="footer-col">
          <h4 className="footer-col-h">Contact</h4>
          <a href="https://www.linkedin.com/in/marlet-kervolin/" target="_blank" rel="noopener noreferrer">LinkedIn de Marlet ↗</a>
          <a href="mailto:marlet@agence-memori.fr">marlet@agence-memori.fr</a>
          <a href="https://calendly.com/marlet-memori/decouverte" target="_blank" rel="noopener noreferrer">Réserver un appel</a>
        </div>
        <div className="footer-col">
          <h4 className="footer-col-h">Légal</h4>
          <a href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('open-mentions-legales')); }}>Mentions légales</a>
          <a href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('open-cgv')); }}>CGV</a>
          <a href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('open-confidentialite')); }}>Confidentialité</a>
        </div>
      </div>


<div className={`footer-xxl ${grain ? 'grain' : ''}`}>
        <span className={`footer-xxl-word ${xxlVariant === 'outlined' ? 'outlined' : ''}`}>
          MEMORI<span className="dot">.</span>
        </span>
      </div>

      <div className="footer-base">
        <span>© 2026 MEMORI · All rights reserved</span>
        <span>Remote · Worldwide</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Faq, CtaBanner, FinalCta, Footer });
