/* WLAD Homepage v2 — Section components (top half) */

const useScrolled2 = (threshold = 16) => {
  const [s, setS] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setS(window.scrollY > threshold);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, [threshold]);
  return s;
};

const useFade2 = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {e.target.classList.add('in');obs.unobserve(e.target);}
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return ref;
};

const Arrow2 = ({ size = 14 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M5 12h14M13 5l7 7-7 7" />
  </svg>;


const Nav2 = ({ onTalk }) => {
  const scrolled = useScrolled2();
  return (
    <header className={`nav2 ${scrolled ? 'scrolled' : ''}`}>
      <a className="nav2__logo" href="#top" aria-label="With Love and Data">
        <img src="assets/logo-light.png" alt="With Love and Data" />
      </a>
      <nav className="nav2__links">
        <a className="nav2__link" href="#proof">Case studies</a>
        <a className="nav2__link" href="#about">About</a>
      </nav>
      <button className="nav2__cta" onClick={onTalk}>Let's talk <Arrow2 /></button>
    </header>);

};

/* ---------- S1 Hero ---------- */
const S1Hero = ({ onTalk }) => {
  const ref = useFade2();
  return (
    <section className="s1 fade2" ref={ref} id="top" data-screen-label="01 Hero">
      <p className="eyebrow2">The marketing operating system</p>
      <h1 className="s1__h1">
        Brand strategy is not a document.{' '}
        <span className="magic">It's a living system.</span>
      </h1>
      <div className="s1__body">
        <p>
          Most brand strategies die in execution. The gap between strategy and execution is no
          longer expensive. It's existential. We build the marketing operating system that keeps
          them alive.
        </p>
        <p>
          So the CMO, the brand lead, and the marketing teams finally speak one language. Every
          post, campaign, and customer touchpoint carries the same DNA across the whole customer
          journey.
        </p>
      </div>
      <div className="s1__cta">
        <button className="btn2 btn2--ink" onClick={onTalk}>Let's talk <Arrow2 /></button>
        <a className="btn2 btn2--ghost" href="#pain">See how it works ↓</a>
      </div>
    </section>);

};

/* ---------- S2 The Pain — Sage diagnosis, no magic ---------- */

const StickFigure = () =>
<svg viewBox="0 0 360 360" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <g fill="none" stroke="#050505" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {/* desk */}
      <line x1="40" y1="280" x2="320" y2="280" />
      {/* head of brand on left */}
      <circle cx="110" cy="150" r="22" />
      <line x1="110" y1="172" x2="110" y2="240" />
      <line x1="110" y1="240" x2="92" y2="280" />
      <line x1="110" y1="240" x2="128" y2="280" />
      <line x1="110" y1="195" x2="80" y2="220" />
      <line x1="110" y1="195" x2="150" y2="180" />
      {/* speech jagged */}
      <path d="M 145 130 L 165 122 L 158 138 L 178 132 L 170 148 L 192 144 L 184 158 L 205 152" />
      <text x="200" y="118" fontFamily="JetBrains Mono, monospace" fontSize="11" fill="#050505" letterSpacing="1.5">"I COULD SCREAM."</text>
      {/* listener on right */}
      <circle cx="270" cy="160" r="18" />
      <line x1="270" y1="178" x2="270" y2="240" />
      <line x1="270" y1="240" x2="256" y2="280" />
      <line x1="270" y1="240" x2="284" y2="280" />
      <line x1="270" y1="200" x2="248" y2="225" />
      <line x1="270" y1="200" x2="292" y2="225" />
      {/* paper on desk */}
      <rect x="200" y="260" width="40" height="22" />
      <line x1="208" y1="268" x2="232" y2="268" />
      <line x1="208" y1="274" x2="226" y2="274" />
      {/* hand-letter caption */}
      <text x="180" y="320" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#ff3399" letterSpacing="2" textAnchor="middle">THE BOARDROOM · LAST WEEK</text>
    </g>
  </svg>;


const S2Pain = () => {
  const ref = useFade2();
  return (
    <section className="s2 fade2" ref={ref} id="pain" data-screen-label="02 Pain">
      <div className="s2__inner">
        <div className="s2__head">
          <p className="eyebrow2">The problem</p>
          <h2 className="h-big">Marketing just entered its most demanding era.</h2>
          <p className="body2 body2--lg" style={{ marginTop: 32, maxWidth: 760 }}>
            Half the budget. Twice the accountability. An AI wild west that amplifies chaos
            instead of solving it. As one customer described it:
          </p>
          <blockquote className="s2__pullquote">
            <p>"I could scream. We're burning budget on a strategy our social team doesn't even understand, let alone execute."</p>
            <cite>Head of Brand, enterprise client</cite>
          </blockquote>
          <p className="body2" style={{ maxWidth: 760 }}>
            She was naming what every CMO already knows. In-housing has collapsed the safety
            net. When something breaks now, it isn't the agency that gets fired. It's the CMO.
          </p>
          <p className="body2" style={{ maxWidth: 760, marginTop: 22 }}>
            Generic AI hasn't solved this. It's amplified it. Faster output, looser strategy,
            more review work than anyone can actually do. The slop ships anyway. Signed off by
            people who never had time to read it, let alone own it.
          </p>
          <div className="s2__shift" style={{ marginTop: 48, marginBottom: 0 }}>
            <h3 style={{ margin: 0 }}>This is not a people problem. This is an infrastructure problem.</h3>
          </div>
          <p className="body2 body2--lg" style={{ maxWidth: 760, marginTop: 22 }}>
            When strategy doesn't survive execution, bold thinking dies. Every bold idea becomes
            a single bet. The brand turns average. From a thousand small compromises. Five years
            ago, this was inefficient. Today it's existential.
          </p>
          <div className="eyebrow2" style={{ marginTop: 48 }}>Stealth customer's baseline, before they came to us</div>
          <div className="s2__numbers">
            <div className="s2__num"><div className="s2__num-val">48</div><div className="s2__num-label">Comment loops per asset</div></div>
            <div className="s2__num"><div className="s2__num-val">15+</div><div className="s2__num-label">People for one newsletter</div></div>
            <div className="s2__num"><div className="s2__num-val">3-4<span style={{ fontSize: '0.5em', opacity: 0.7 }}>/10</span></div><div className="s2__num-label">Brand-compliance score</div></div>
            <div className="s2__num"><div className="s2__num-val">~50%</div><div className="s2__num-label">Off-strategy content</div></div>
          </div>
        </div>

        <div className="s2__founder">
          <p className="s2__founder-quote">
            We've watched this break for twenty years. We know exactly where it breaks. And we built
            the system that stops it.
          </p>
          <p className="s2__founder-attr">Alex Jacobi &amp; Matthias Lange, Founders</p>
        </div>
      </div>
    </section>);}; /* ---------- S3 What-If — Magier-Sektion ---------- */
const S3WhatIf = () => {
  const ref = useFade2();
  const items = [
  "Your strategy would survive execution. Every post, every campaign, every touchpoint carrying the same DNA. The system would make it inevitable.",
  "AI output would empower your team. Not bury them. Reviewable, traceable, ownable. Each piece, fully in their hands.",
  "Bold imagination wouldn't be a risk anymore. It would be the strategy you trusted most. Because constraints and creativity finally worked together.",
  "Your strategy would come alive. Learning on its own, sharper every cycle. What worked, what didn't, what your strategy should do next. Self-improving. Not self-eroding."];

  return (
    <section className="s3 fade2" ref={ref} id="whatif" data-screen-label="03 WhatIf">
      <div className="s3__inner">
        <h2 className="s3__h">
          Now imagine a world built{' '}
          <span className="magic">for bold imagination.</span>
        </h2>
        <p className="s3__sub">Where strategy actually survives execution. Four things would follow.</p>
        <div className="s3__quotes">
          {items.map((q, i) =>
          <div className="s3__quote" key={i}>
              <div className="s3__quote-num">0{i + 1}</div>
              <blockquote className="s3__quote-text">{q}</blockquote>
            </div>
          )}
        </div>
        <p className="s3__close">This isn't hypothetical.</p>
      </div>
    </section>);

};

Object.assign(window, { Nav2, S1Hero, S2Pain, S3WhatIf, Arrow2, useFade2 });