/* global React, ReactDOM, Reveal, Icon, CountUp, Portfolio, ROITool, Automations, CodeField, WorksData */

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

function useData() {
  const [data, setData] = useStateA(() => WorksData.load());
  useEffectA(() => {
    const onChange = () => setData(WorksData.load());
    window.addEventListener("storage", onChange);
    return () => window.removeEventListener("storage", onChange);
  }, []);
  return data;
}

function Nav() {
  const [scrolled, setScrolled] = useStateA(false);
  const data = useData();
  const s = data.settings || WorksData.DEFAULT_DATA.settings;
  useEffectA(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="nav-inner">
        <a className="nav-brand" href="#">
          <img src="assets/works-logo.svg" alt="Works" />
          <span>works.cy</span>
        </a>
        <a className="btn btn-dark" href={s.navCtaUrl}>
          {s.navCtaLabel} <Icon name="arrow-right" size={13} />
        </a>
      </div>
    </nav>
  );
}

function HeroText() {
  const d = useData();
  const s = d.settings || WorksData.DEFAULT_DATA.settings;
  const lines = s.heroHeadline.split("\n");
  return (
    <>
      <div className="hero-tagline"><span style={{ color: "rgb(0, 0, 0)" }}>{s.heroTagline}</span></div>
      <h1 className="hero-headline">
        {lines.map((l, i) => i === 0 ? l : <React.Fragment key={i}><br />{l}</React.Fragment>)}
      </h1>
    </>
  );
}

function Hero() {
  const [hideScroll, setHideScroll] = useStateA(false);
  const [loaded, setLoaded] = useStateA(false);
  const [hint, setHint] = useStateA(true);
  const logoRef = useRefA(null);
  const posRef = useRefA({ x: 0, y: 0 });
  const dragRef = useRefA(null);

  useEffectA(() => {
    const t = setTimeout(() => setLoaded(true), 30);
    return () => clearTimeout(t);
  }, []);

  useEffectA(() => {
    const onScroll = () => setHideScroll(window.scrollY > 100);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Broadcast the logo's current screen-centre to the code field. Runs on
  // mount, on every drag tick (called imperatively), on resize and on scroll
  // (the logo is inside the hero, so it moves with the page).
  const broadcast = () => {
    const el = logoRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const detail = { x: r.left + r.width / 2, y: r.top + r.height / 2 };
    window.dispatchEvent(new CustomEvent("worksLogoMove", { detail }));
  };

  useEffectA(() => {
    // Initial dispatch after layout settles.
    let raf1 = requestAnimationFrame(() => {
      let raf2 = requestAnimationFrame(broadcast);
      // store on the function itself so cleanup can cancel
      broadcast._raf2 = raf2;
    });
    let scrollRaf = null;
    const scheduleBroadcast = () => {
      if (scrollRaf != null) return;
      scrollRaf = requestAnimationFrame(() => {
        scrollRaf = null;
        broadcast();
      });
    };
    window.addEventListener("resize", scheduleBroadcast);
    window.addEventListener("scroll", scheduleBroadcast, { passive: true });
    return () => {
      cancelAnimationFrame(raf1);
      if (broadcast._raf2 != null) cancelAnimationFrame(broadcast._raf2);
      if (scrollRaf != null) cancelAnimationFrame(scrollRaf);
      window.removeEventListener("resize", scheduleBroadcast);
      window.removeEventListener("scroll", scheduleBroadcast);
    };
  }, []);

  const applyTransform = () => {
    const el = logoRef.current;
    if (!el) return;
    el.style.transform =
      `translate3d(${posRef.current.x}px, ${posRef.current.y}px, 0)`;
  };

  const onPointerDown = (e) => {
    const el = logoRef.current;
    if (!el) return;
    try { el.setPointerCapture(e.pointerId); } catch (err) {}
    dragRef.current = {
      pointerId: e.pointerId,
      startX: e.clientX,
      startY: e.clientY,
      baseX: posRef.current.x,
      baseY: posRef.current.y,
    };
    el.classList.add("dragging");
    if (hint) setHint(false);
    e.preventDefault();
  };

  const onPointerMove = (e) => {
    const d = dragRef.current;
    if (!d) return;
    posRef.current = {
      x: d.baseX + (e.clientX - d.startX),
      y: d.baseY + (e.clientY - d.startY),
    };
    applyTransform();
    broadcast();
  };

  const endDrag = (e) => {
    const d = dragRef.current;
    if (!d) return;
    const el = logoRef.current;
    if (el) {
      try { el.releasePointerCapture(d.pointerId); } catch (err) {}
      el.classList.remove("dragging");
    }
    dragRef.current = null;
  };

  const onDoubleClick = () => {
    posRef.current = { x: 0, y: 0 };
    applyTransform();
    broadcast();
  };

  return (
    <section className="hero" id="top">
      <div
        ref={logoRef}
        className={"hero-logo-wrap" + (loaded ? " loaded" : "") + (hint ? " hint" : "")}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={endDrag}
        onPointerCancel={endDrag}
        onDoubleClick={onDoubleClick}
        title="Drag me · double-click to reset"
      >
        <img
          className="hero-logo"
          src="assets/works-logo.svg"
          alt="WORKS"
          draggable={false}
        />
        <span className="hero-logo-hint">drag me</span>
      </div>
      <HeroText />
      <div className={"hero-scroll" + (hideScroll ? " gone" : "")}>
        <div className="line" />
        <div className="label">Scroll</div>
      </div>
    </section>
  );
}

function Trust() {
  const data = useData();
  const clients = data.clients || [];
  return (
    <section className="trust">
      <div className="shell">
        <div className="eyebrow trust-eyebrow">Trusted by forward-thinking teams</div>
        <Reveal className="trust-row">
          {clients.map((c) =>
            c.logo ? (
              <img key={c.id} className="trust-logo-img" src={c.logo} alt={c.name} />
            ) : (
              <span key={c.id} className="trust-logo serif">{c.name}</span>
            )
          )}
        </Reveal>
      </div>
    </section>
  );
}

function Architect() {
  const data = useData();
  const a = data.architect || WorksData.DEFAULT_DATA.architect;
  return (
    <section className="pad" id="about">
      <div className="shell">
        <div className="architect">
          <Reveal dir="left" className="arch-photo">
            {a.photo
              ? <img src={a.photo} alt={a.name} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", borderRadius: 24 }} />
              : <div className="ph-silhouette" />
            }
            <div className="ph-label">{a.eyebrow}</div>
            <div className="ph-name">{a.name}</div>
            <div className="ph-loc">{a.location}</div>
          </Reveal>
          <Reveal dir="right" className="arch-body">
            <div className="eyebrow">{a.eyebrow}</div>
            <h2 className="serif">{a.headline}</h2>
            <p>{a.bio1}</p>
            <p>{a.bio2}</p>
            <div className="arch-sig">{a.sig}</div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const data = useData();
  const testimonials = data.testimonials || WorksData.DEFAULT_DATA.testimonials;
  return (
    <section className="dark-section" id="praise">
      <div className="shell">
        <Reveal className="section-head">
          <div className="eyebrow">Works.cy — Praise</div>
          <h2>Don't just take my word for it.</h2>
        </Reveal>
        <Reveal className="testi-grid">
          {testimonials.map((t) => (
            <div key={t.id} className="testi-card">
              <div className="testi-quote">"{t.quote}"</div>
              <div className="testi-sep" />
              <div className="testi-meta">
                <div className="testi-logo">{t.name.toUpperCase()}</div>
                <div className="testi-name">{t.name}</div>
                <div className="testi-role">{t.role}</div>
              </div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

function Stats() {
  const data = useData();
  const stats = data.stats || WorksData.DEFAULT_DATA.stats;
  return (
    <section className="pad" id="stats">
      <div className="shell">
        <Reveal className="stats">
          {stats.map((s) => (
            <div key={s.id} className="stat">
              <div className="stat-num">
                <CountUp value={s.value} duration={1200} jitter={!!s.jitter} />
                {s.suffix && <span>{s.suffix}</span>}
              </div>
              <div className="stat-label">{s.label}</div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

function FinalCTA() {
  const data = useData();
  const s = data.settings || WorksData.DEFAULT_DATA.settings;
  return (
    <section className="final-cta" id="contact">
      <div className="shell">
        <Reveal>
          <div className="h">Got an idea?</div>
          <div className="h"><em>Let's build it.</em></div>
          <div className="gap" />
          <a href={"mailto:" + s.contactEmail} className="btn-pill">
            Let's talk <Icon name="arrow-right" size={13} />
          </a>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  const data = useData();
  const s = data.settings || WorksData.DEFAULT_DATA.settings;
  return (
    <footer className="footer">
      <div className="footer-inner">
        <a className="footer-brand" href="#top">
          <img src="assets/works-logo.svg" alt="Works" />
          <span>works.cy</span>
        </a>
        <div className="footer-copy">{s.footerCopy}</div>
        <div className="footer-social">
          <a href={s.linkedinUrl} aria-label="LinkedIn" target="_blank" rel="noopener"><Icon name="linkedin" size={16} /></a>
          <a href={s.instagramUrl} aria-label="Instagram" target="_blank" rel="noopener"><Icon name="instagram" size={16} /></a>
          <a href="Admin.html" aria-label="Admin" style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.5 }}>Admin</a>
        </div>
      </div>
    </footer>
  );
}

function App() {
  return (
    <>
      <CodeField />
      <Nav />
      <Hero />
      <Trust />
      <Automations />
      <Portfolio />
      <ROITool />
      <Architect />
      <Testimonials />
      <Stats />
      <FinalCTA />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);