// sections-bottom.jsx — Stack technique + About + CTA final (HubSpot Meetings) + Footer

const LINKEDIN_URL = 'https://www.linkedin.com/in/lucasdemange';

/* ======================= Stack technique ======================= */
function Stack() {
  const acquisition = [
    { n: 'Apollo', bg: '#3B5BFE' }, { n: 'Pharow', bg: '#0B0B0B' },
    { n: 'Fullenrich', bg: '#2E7D5B' }, { n: 'Lemlist', bg: '#F3C850' },
    { n: 'HubSpot', bg: '#FF7A59' }, { n: 'Pipedrive', bg: '#1F1F1F' },
    { n: 'Attio', bg: '#000000' }, { n: 'Clay', bg: '#2B2D4E' },
  ];
  const automation = [
    { n: 'N8N', bg: '#EA4B71' }, { n: 'Make', bg: '#6D00CC' },
    { n: 'Zapier', bg: '#FF4A00' }, { n: 'Claude', bg: '#D97757' },
    { n: 'OpenAI', bg: '#10A37F' },
  ];
  const data = [
    { n: 'Notion', bg: '#0B0B0B' }, { n: 'Airtable', bg: '#FCB400' },
    { n: 'Sheets', bg: '#0F9D58' }, { n: 'Supabase', bg: '#3ECF8E' },
    { n: 'Webflow', bg: '#146EF5' }, { n: 'Metabase', bg: '#509EE3' },
  ];

  const containerRef = useRef(null);
  useEffect(() => {
    if (!containerRef.current) return;
    const chips = containerRef.current.querySelectorAll('.tool-chip');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          chips.forEach((c, i) => setTimeout(() => c.classList.add('is-in'), i * 45));
          io.disconnect();
        }
      });
    }, { threshold: 0.15 });
    io.observe(containerRef.current);
    return () => io.disconnect();
  }, []);

  const renderGroup = (label, tools, chipVariant) => (
    <div key={label} style={{ marginBottom: 32 }}>
      <span className={`chip chip--${chipVariant}`} style={{ marginBottom: 14 }}>
        <span className="chip__dot"></span>{label}
      </span>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 14 }}>
        {tools.map(t => (
          <span key={t.n} className="tool-chip">
            <span className="tool-chip__logo" style={{ background: t.bg }}>{t.n[0]}</span>
            {t.n}
          </span>
        ))}
      </div>
    </div>
  );

  return (
    <section id="stack" className="section section--accent-mint" style={{
      borderTop: '1px solid var(--chalk)', borderBottom: '1px solid var(--chalk)',
    }}>
      <div className="container">
        <div className="credos-layout" style={{
          display: 'grid', gridTemplateColumns: '1fr 1.3fr',
          gap: 72, alignItems: 'flex-start',
        }}>
          <div>
            <span className="chip chip--paper reveal" style={{ marginBottom: 20 }}>
              <span className="chip__dot"></span>Stack technique
            </span>
            <h2 className="display-serif reveal" style={{
              fontSize: 'clamp(36px, 5vw, 64px)', margin: '20px 0 0', maxWidth: 520,
            }}>
              Les outils que <em>vous gardez</em>.
            </h2>
            <p className="reveal" style={{
              fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6,
              color: 'var(--graphite)', maxWidth: 420, margin: '28px 0 0',
            }}>
              Je construis avec des outils que votre équipe maîtrise ensuite. Tout est documenté, tout est transférable.
            </p>
          </div>
          <div ref={containerRef}>
            {renderGroup('Acquisition', acquisition, 'peach')}
            {renderGroup('Automatisation', automation, 'lilac')}
            {renderGroup('Data & CMS', data, 'butter')}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ======================= About ======================= */
function About({ name = 'Lucas' }) {
  return (
    <section id="about" className="section" style={{ borderTop: '1px solid var(--chalk)' }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 40, alignItems: 'flex-start' }}>
          <div className="reveal" style={{
            width: 72, height: 72, borderRadius: 999,
            background: 'var(--ink)', color: 'var(--paper)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 32,
          }}>
            {name[0]}
          </div>
          <div>
            <Eyebrow className="reveal" style={{ marginBottom: 20 }}>À propos</Eyebrow>
            <h3 className="display-serif reveal" style={{
              fontSize: 'clamp(28px, 3.6vw, 44px)',
              margin: '0 0 24px',
            }}>
              10 ans de marketing B2B. <br/>
              Des startups aux <em>ETI</em>.
            </h3>
            <p className="reveal" style={{
              fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.65,
              color: 'var(--fg-2)', maxWidth: 640, margin: '0 0 24px',
            }}>
              <strong style={{ color: 'var(--ink)', fontWeight: 600 }}>{name}.</strong> Ex-growth marketer en B2B tech, devenu GTM Engineer. Je construis les systèmes que j'aurais voulu avoir quand je dirigeais des équipes marketing. Aujourd'hui, je les mets au service des PME et ETI qui veulent structurer leur croissance sans dépendre d'une agence.
            </p>
            <a className="u-link reveal" href={LINKEDIN_URL} target="_blank" rel="noopener noreferrer" style={{
              fontFamily: 'var(--font-tight)', fontSize: 14, fontWeight: 600,
            }}>
              Retrouvez-moi sur LinkedIn <span>→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ======================= CTA final — HubSpot Meetings ======================= */
const HUBSPOT_MEETING_URL = 'https://meetings-eu1.hubspot.com/ldemange';
const HUBSPOT_EMBED_SCRIPT = 'https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js';

function HubSpotMeetings() {
  const containerRef = useRef(null);
  const [status, setStatus] = useState('loading');

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const mo = new MutationObserver(() => {
      if (container.querySelector('iframe')) {
        setStatus('ready');
        mo.disconnect();
      }
    });
    mo.observe(container, { childList: true, subtree: true });

    // The embed script scans for containers once, on load: it must be injected after React has mounted the container.
    let script = document.querySelector(`script[src="${HUBSPOT_EMBED_SCRIPT}"]`);
    if (!script) {
      script = document.createElement('script');
      script.src = HUBSPOT_EMBED_SCRIPT;
      script.async = true;
      script.onerror = () => setStatus('failed');
      document.body.appendChild(script);
    }
    const timeout = setTimeout(() => {
      if (!container.querySelector('iframe')) setStatus('failed');
    }, 12000);

    return () => { mo.disconnect(); clearTimeout(timeout); };
  }, []);

  return (
    <div className={`meetings-card${status === 'ready' ? '' : ' is-loading'}`} id="rdv-calendrier">
      <div
        ref={containerRef}
        className="meetings-iframe-container"
        data-src={`${HUBSPOT_MEETING_URL}?embed=true`}
      ></div>
      {status !== 'ready' && (
        <div className="meetings-card__state">
          {status === 'loading' ? (
            <span className="meetings-card__loading">Chargement du calendrier…</span>
          ) : (
            <>
              <span>Le calendrier ne s'affiche pas ici.</span>
              <Button variant="accent" href={HUBSPOT_MEETING_URL} icon="↗">Ouvrir la prise de rendez-vous</Button>
            </>
          )}
        </div>
      )}
    </div>
  );
}

function CTA() {
  return (
    <section id="rdv" className="on-dark" style={{ padding: 'clamp(96px, 12vw, 160px) 0' }}>
      <div className="container">
        <div className="contact-layout" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <Eyebrow className="reveal" style={{ color: 'var(--dust)', marginBottom: 28 }}>
              <span style={{ background: 'var(--peach-400)' }}></span>
              <span>On commence par un échange</span>
            </Eyebrow>
            <h2 className="display-serif reveal" style={{
              fontSize: 'clamp(44px, 6vw, 88px)',
              color: 'var(--paper)',
              margin: '0 0 32px',
            }}>
              Prêt à <em>amorcer</em>{' '}?
            </h2>
            <p className="reveal" style={{
              fontFamily: 'var(--font-sans)',
              fontSize: 'clamp(17px, 1.5vw, 20px)',
              lineHeight: 1.6,
              color: 'var(--dust)',
              maxWidth: 440, margin: '0 0 40px',
            }}>
              Un premier échange gratuit pour diagnostiquer vos processus et identifier les premiers leviers. 30 minutes, pas de deck, juste un diagnostic honnête.
            </p>
            <div className="reveal" style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
              <Button variant="on-dark" href="#rdv-calendrier" icon="↓">Choisir un créneau</Button>
            </div>
          </div>
          <div className="reveal">
            <HubSpotMeetings />
            <p className="meetings-notice">
              Vos coordonnées sont transmises à Amorce via HubSpot, uniquement pour organiser cet échange.{' '}
              <a href="confidentialite.html">Politique de confidentialité</a>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ======================= Footer ======================= */
const FOOTER_LINK_STYLE = { fontFamily: 'var(--font-tight)', fontSize: 14, color: 'var(--fg-2)', textDecoration: 'none' };

/* Shown only once the HubSpot tracking code (and its consent banner) is on the page */
function CookieSettingsLink() {
  const [available, setAvailable] = useState(false);

  useEffect(() => {
    if (window._hsp) { setAvailable(true); return; }
    let tries = 0;
    const id = setInterval(() => {
      tries++;
      if (window._hsp) { setAvailable(true); clearInterval(id); }
      else if (tries > 20) clearInterval(id);
    }, 500);
    return () => clearInterval(id);
  }, []);

  if (!available) return null;
  return (
    <li>
      <button type="button" className="footer-link-btn" style={FOOTER_LINK_STYLE}
        onClick={() => { (window._hsp = window._hsp || []).push(['showBanner']); }}>
        Gérer les cookies
      </button>
    </li>
  );
}

function Footer({ siteBase = '' }) {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr', gap: 48, alignItems: 'flex-start' }}>
          <div>
            <a href={siteBase ? siteBase : '#top'} style={{ display: 'inline-block', textDecoration: 'none' }}>
              <img src="assets/logo/amorce-wordmark.svg" alt="Amorce" style={{ height: 36, marginBottom: 20 }} />
            </a>
            <p style={{
              fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20,
              margin: 0, color: 'var(--graphite)',
            }}>
              On amorce. Vous accélérez.
            </p>
          </div>
          <div>
            <div className="t-eyebrow" style={{ marginBottom: 14 }}>Site</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <li><a href={`${siteBase}#methode`} style={{ fontFamily: 'var(--font-tight)', fontSize: 14, color: 'var(--fg-2)', textDecoration: 'none' }}>Méthode</a></li>
              <li><a href={`${siteBase}#expertise`} style={{ fontFamily: 'var(--font-tight)', fontSize: 14, color: 'var(--fg-2)', textDecoration: 'none' }}>Expertise</a></li>
              <li><a href={`${siteBase}#credos`} style={{ fontFamily: 'var(--font-tight)', fontSize: 14, color: 'var(--fg-2)', textDecoration: 'none' }}>Crédos</a></li>
            </ul>
          </div>
          <div>
            <div className="t-eyebrow" style={{ marginBottom: 14 }}>Contact</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <li><a href={LINKEDIN_URL} target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'var(--font-tight)', fontSize: 14, color: 'var(--fg-2)', textDecoration: 'none' }}>LinkedIn</a></li>
              <li><a href={`${siteBase}#rdv`} style={{ fontFamily: 'var(--font-tight)', fontSize: 14, color: 'var(--fg-2)', textDecoration: 'none' }}>Calendrier</a></li>            </ul>
          </div>
          <div>
            <div className="t-eyebrow" style={{ marginBottom: 14 }}>Ressources</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <li><a href="blog.html" style={{ fontFamily: 'var(--font-tight)', fontSize: 14, color: 'var(--fg-2)', textDecoration: 'none' }}>Blog</a></li>
              <li><a href="mentions-legales.html" style={{ fontFamily: 'var(--font-tight)', fontSize: 14, color: 'var(--fg-2)', textDecoration: 'none' }}>Mentions légales</a></li>
              <li><a href="confidentialite.html" style={FOOTER_LINK_STYLE}>Confidentialité</a></li>
              <CookieSettingsLink />
            </ul>
          </div>
        </div>
        <hr className="hairline" style={{ margin: '48px 0 20px' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-4)' }}>
            © 2026 Amorce · Tous droits réservés
          </span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-4)' }}>
            Fait avec soin à Bordeaux.
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Stack, About, CTA, Footer });