// SECTION 1 — THE IDEA
// "Vision needs strength" — the opening manifesto after the hero.
function Idea() {
  const [scrolled, setScrolled] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const vh = window.innerHeight;
      const p = 1 - (r.top + r.height * 0.3) / vh;
      setScrolled(Math.max(0, Math.min(1, p)));
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section id="idea" ref={ref} className="idea-section">
      <div className="idea-bg" aria-hidden="true">
        <span className="idea-orb" style={{ transform: `translateY(${(1 - scrolled) * 40}px) scale(${0.9 + scrolled * 0.2})` }} />
        <span className="idea-line idea-line-1" />
        <span className="idea-line idea-line-2" />
        <span className="idea-line idea-line-3" />
      </div>

      <div className="container idea-container">
        <div className="idea-head reveal">
          <span className="eyebrow"><span>SECTION 01 — THE IDEA</span></span>
        </div>

        <h2 className="idea-title reveal">
          Vision needs <em>strength</em>.
        </h2>

        <div className="idea-body">
          <p className="idea-para reveal">
            Human progress has always started the same way:
            <br />
            someone sees further, thinks bigger, and builds what does not yet exist.
          </p>

          <p className="idea-para reveal">
            But vision alone is never enough.
            Breakthroughs require <b>strength</b> — the discipline to execute,
            the clarity to decide, and the resilience to keep moving.
          </p>

          <div className="idea-triad reveal">
            <div className="idea-triad-item">
              <span className="idea-triad-num">01</span>
              <span className="idea-triad-label">Discipline</span>
              <span className="idea-triad-copy">to execute</span>
            </div>
            <div className="idea-triad-divider" />
            <div className="idea-triad-item">
              <span className="idea-triad-num">02</span>
              <span className="idea-triad-label">Clarity</span>
              <span className="idea-triad-copy">to decide</span>
            </div>
            <div className="idea-triad-divider" />
            <div className="idea-triad-item">
              <span className="idea-triad-num">03</span>
              <span className="idea-triad-label">Resilience</span>
              <span className="idea-triad-copy">to keep moving</span>
            </div>
          </div>

          <p className="idea-para idea-stand reveal">
            That is what <em>Veiron</em> stands for.
          </p>

          <p className="idea-para reveal">
            We build intelligence that helps people move from complexity to clarity,
            from insight to action, and from ambition to progress.
          </p>

          <div className="idea-flow reveal">
            <span className="idea-flow-node">complexity</span>
            <span className="idea-flow-arrow">→</span>
            <span className="idea-flow-node">clarity</span>
            <span className="idea-flow-arrow">→</span>
            <span className="idea-flow-node">action</span>
            <span className="idea-flow-arrow">→</span>
            <span className="idea-flow-node idea-flow-strong">progress</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Idea = Idea;