// Full-page sections. Depends on Components.jsx.
const { useEffect: useE, useState: useS, useRef: useR } = React;

/* ---------------- Hero ---------------- */
const Hero = ({ variant = 'oversized' }) => {
  // cursor-tracked gentle dot wobble
  const dotRef = useR(null);
  useE(() => {
    const el = dotRef.current;
    if (!el) return;
    const onMove = (e) => {
      const w = window.innerWidth, h = window.innerHeight;
      const dx = (e.clientX / w - 0.5) * 1.5;
      const dy = (e.clientY / h - 0.5) * 1.5;
      el.style.transform = `translate(${dx}px, ${dy}px)`;
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <section id="top" className={`hero container ${variant}`}>
      <Reveal>
        <div className="hero__eyebrow">Brendan O'Neill — independent practice</div>
      </Reveal>
      <Reveal delay={60}>
        <h1 className="hero__title">
          Ideas that land<br/>
          <span className="soft">Decisions that stick</span><span className="dot-wrap" aria-hidden><span ref={dotRef} className="dot hide" /></span>
        </h1>
      </Reveal>
      <Reveal delay={140}>
        <div className="hero__foot">
          <p className="hero__dek">
            Advisory, coaching, and <em>applied AI</em>.<br/>
            A practice built on relationships and shaped by conversation.
          </p>
          <div className="hero__meta">
            <a
              className="hero__meta-link"
              href="https://www.google.com/maps/place/Loulé,+Portugal/@37.1395,-8.0229,13z"
              target="_blank"
              rel="noopener"
            >
              <b>Loulé, Portugal</b>
              <span className="hero__meta-coord">37.1395° N, 8.0229° W</span>
              <span className="hero__meta-arrow" aria-hidden>↗</span>
            </a>
          </div>
        </div>
      </Reveal>
    </section>
  );
};

/* ---------------- Currently (replaces services, intrigue-first) ---------------- */
const Currently = () => (
  <section id="currently" className="section">
    <div className="container">
      <Reveal>
        <div className="section__head">
          <div className="section__eyebrow"><span className="num">01</span> / Currently</div>
          <h2 className="section__title">
            A short list of <span className="soft">what I'm doing.</span>
          </h2>
        </div>
      </Reveal>

      <div className="currently">
        <div className="currently__spacer" />
        <ul className="currently__list">
          {[
            { n: '→ 01', text: <><span className="soft">Sitting with founders on</span> what to build, and what to stop.</>, tag: 'Advisory' },
            { n: '→ 02', text: <>Coaching <span className="soft">a handful of leaders through major transitions.</span></>, tag: 'Coaching' },
            { n: '→ 03', text: <><span className="soft">Taking one workflow from idea to</span> shipped <span className="soft">in weeks, not quarters.</span></>, tag: 'Applied AI' },
          ].map((it, i) => (
            <Reveal key={i} delay={i * 60}>
              <li className="currently__item">
                <span className="currently__num">{it.n}</span>
                <span className="currently__text">{it.text}</span>
                <span className="currently__tag">{it.tag}</span>
              </li>
            </Reveal>
          ))}
        </ul>
      </div>
    </div>
  </section>
);

/* Writing section removed — not shipping yet. */

/* ---------------- About ---------------- */
const About = () => (
  <section id="about" className="section">
    <div className="container">
      <Reveal>
        <div className="section__head about__head">
          <div className="section__eyebrow"><span className="num">02</span> / About</div>
          <h2 className="section__title about__title">
            Twenty-five years at the intersection of <span className="soft">people and technology.</span>
          </h2>
        </div>
      </Reveal>
      <div className="about">
        <div className="about__spacer" />
        <Reveal delay={80}>
          <div className="about__portrait" aria-hidden />
        </Reveal>
        <Reveal delay={140}>
          <div className="about__body">
            <p>
              <em>Leader. Coach. Operator.</em>
            </p>
            <p>
              I work with coaches, consultants, and leaders. A small number, by design.
              Some are creating transformation. Some are in the middle of their own.
            </p>
            <p>
              If you'd like to talk, the note below goes to me directly.
            </p>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

/* ---------------- Contact ---------------- */
const Contact = ({ theme = 'dark' }) => (
  <section id="note" className={`contact ${theme === 'light' ? 'light' : ''}`}>
    <div className="container">
      <Reveal>
        <div className="contact__head">
          <div className="contact__eyebrow">03 / Connect</div>
          <h2 className="contact__title">
            Send a note.<br/> <span className="soft">I reply within a day.</span>
          </h2>
        </div>
      </Reveal>
      <Reveal delay={80}>
        <Form />
      </Reveal>
    </div>
  </section>
);

/* ---------------- Footer ---------------- */
const Foot = () => (
  <footer className="container foot">
    <div>
      <Wordmark height={40} />
    </div>
    <div className="foot__meta">
      © 2026 Brendan O'Neill · <a
        className="foot__meta-link"
        href="https://www.google.com/maps/place/Loulé,+Portugal/@37.1395,-8.0229,13z"
        target="_blank"
        rel="noopener"
      >Loulé, PT</a>
    </div>
    <div className="foot__links">
      <a href="mailto:brendan@oneill.sg">brendan@oneill.sg</a>
      <a href="https://www.linkedin.com/in/oneillpt/" target="_blank" rel="noopener">LinkedIn</a>
    </div>
  </footer>
);

Object.assign(window, { Hero, Currently, About, Contact, Foot });