/* shared.jsx — chrome + hooks shared across all pages. Exports to window. */
const { useState, useEffect, useRef, useCallback } = React;

/* ---------------------------------------------------------------- tweaks */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "brand",
  "type": "editorial",
  "radius": 14,
  "showFloaters": true
}/*EDITMODE-END*/;

function useBrandTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-palette", t.palette);
    r.setAttribute("data-type", t.type);
    r.style.setProperty("--radius", t.radius + "px");
    r.style.setProperty("--radius-lg", (t.radius + 8) + "px");
    r.style.setProperty("--radius-sm", Math.max(6, t.radius - 4) + "px");
  }, [t.palette, t.type, t.radius]);
  return [t, setTweak];
}

function BrandTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakColor label="Theme" value={PALETTE_SWATCH[t.palette]}
        options={Object.values(PALETTE_SWATCH)}
        onChange={(v) => {
          const key = Object.keys(PALETTE_SWATCH).find(k => PALETTE_SWATCH[k].join() === v.join());
          if (key) setTweak("palette", key);
        }} />
      <TweakRadio label="Variant" value={t.palette}
        options={["brand", "onyx", "ink", "teal", "terracotta"]}
        onChange={(v) => setTweak("palette", v)} />
      <TweakSection label="Typography" />
      <TweakRadio label="Pairing" value={t.type}
        options={["editorial", "modern", "classic"]}
        onChange={(v) => setTweak("type", v)} />
      <TweakSection label="Shape" />
      <TweakSlider label="Corner radius" value={t.radius} min={0} max={26} step={2} unit="px"
        onChange={(v) => setTweak("radius", v)} />
      <TweakToggle label="Floating cards" value={t.showFloaters}
        onChange={(v) => setTweak("showFloaters", v)} />
    </TweaksPanel>
  );
}
const PALETTE_SWATCH = {
  brand:      ["#006838", "#c98a3a", "#f6f3ec"],
  onyx:       ["#1a1a17", "#2f8a59", "#f6f3ec"],
  ink:        ["#3a4a6b", "#e0b252", "#f6f4ef"],
  teal:       ["#2c6b85", "#e0a93f", "#f4f5f4"],
  terracotta: ["#b5563a", "#4f8a72", "#f7f3f0"],
};

/* ------------------------------------------------------------- scroll reveal */
function useReveal() {
  useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      document.querySelectorAll(".reveal").forEach(el => el.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    document.querySelectorAll(".reveal").forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}
function Reveal({ children, delay = 0, className = "", style = {}, as: Tag = "div" }) {
  return <Tag className={`reveal ${className}`} style={{ transitionDelay: delay + "ms", ...style }}>{children}</Tag>;
}

/* ------------------------------------------------------------- count up */
function useCountUp(target, run) {
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!run) return;
    const num = parseFloat(String(target).replace(/[^0-9.]/g, ""));
    if (!num) { setVal(num); return; }
    let raf, start;
    const dur = 1400;
    const tick = (ts) => {
      if (!start) start = ts;
      const p = Math.min((ts - start) / dur, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(num * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, run]);
  return val;
}
function StatNumber({ value, suffix }) {
  const ref = useRef(null);
  const [run, setRun] = useState(false);
  useEffect(() => {
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setRun(true); io.disconnect(); } }, { threshold: 0.4 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  const v = useCountUp(value, run);
  const hasComma = String(value).includes(",");
  const display = hasComma ? Math.round(v).toLocaleString("en-US") : Math.round(v).toLocaleString("en-US");
  return <span ref={ref}>{display}<span>{suffix}</span></span>;
}

/* ------------------------------------------------------------- header */
function Logo({ variant = "light" }) {
  const src = variant === "dark" ? "assets/logo-dark.png" : "assets/logo-light.png";
  return (
    <a className="brand" href="index.html" aria-label="FindStaff — home">
      <img className="brand__img" src={src} alt="FindStaff" />
    </a>
  );
}

function LangMenu() {
  const [open, setOpen] = useState(false);
  const [cur, setCur] = useState("EN");
  const ref = useRef(null);
  useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, []);
  const active = SITE.langs.find(l => l.code === cur);
  return (
    <div className="lang" ref={ref}>
      <button className="lang__btn" onClick={() => setOpen(o => !o)} aria-haspopup="true" aria-expanded={open}>
        <span>{active.flag}</span><span>{active.code}</span>
        <Icon name="chevron" size={13} style={{ transform: open ? "rotate(90deg)" : "rotate(90deg)" }} />
      </button>
      {open && (
        <div className="lang__menu">
          {SITE.langs.map(l => (
            <button key={l.code} className={`lang__opt ${l.code === cur ? "is-active" : ""}`} onClick={() => { setCur(l.code); setOpen(false); }}>
              <span>{l.flag}</span><span>{l.label}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function SiteHeader({ active }) {
  const [scrolled, setScrolled] = useState(false);
  const [drawer, setDrawer] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 8);
    h(); window.addEventListener("scroll", h, { passive: true });
    return () => window.removeEventListener("scroll", h);
  }, []);
  useEffect(() => { document.body.style.overflow = drawer ? "hidden" : ""; }, [drawer]);
  return (
    <header className="site-header">
      <div className="topbar">
        <div className="shell">
          <span className="topbar__promo"><span className="topbar__dot"></span> Now placing for the 2026 summer season — talk to us early.</span>
          <div className="topbar__right">
            <a href={"tel:" + SITE.brand.phone.replace(/\s/g, "")}>{SITE.brand.phone}</a>
            <a href={"mailto:" + SITE.brand.email}>{SITE.brand.email}</a>
          </div>
        </div>
      </div>
      <nav className={`nav ${scrolled ? "nav--scrolled" : ""}`}>
        <div className="shell">
          <Logo />
          <div className="nav__links">
            {SITE.nav.map(n => (
              <a key={n.label} className={`nav__link ${active === n.label ? "is-active" : ""}`} href={n.href}>{n.label}</a>
            ))}
          </div>
          <div className="nav__spacer"></div>
          <div className="nav__actions">
            <LangMenu />
            <a className="btn btn--primary btn--sm" href="contact.html">Hire staff <Icon name="arrow" size={16} /></a>
            <button className="nav__burger" onClick={() => setDrawer(true)} aria-label="Open menu"><Icon name="menu" size={20} /></button>
          </div>
        </div>
      </nav>
      <div className={`drawer ${drawer ? "is-open" : ""}`}>
        <div className="drawer__scrim" onClick={() => setDrawer(false)}></div>
        <div className="drawer__panel">
          <div className="drawer__head">
            <Logo />
            <button className="nav__burger" onClick={() => setDrawer(false)} aria-label="Close menu"><Icon name="close" size={20} /></button>
          </div>
          {SITE.nav.map(n => <a key={n.label} className="drawer__link" href={n.href} onClick={() => setDrawer(false)}>{n.label}</a>)}
          <a className="btn btn--primary" style={{ marginTop: 18 }} href="contact.html">Hire staff <Icon name="arrow" size={16} /></a>
          <div style={{ display: "flex", gap: 8, marginTop: 16, flexWrap: "wrap" }}>
            {SITE.langs.map(l => <span key={l.code} style={{ fontSize: 13, color: "var(--muted)" }}>{l.flag} {l.code}</span>)}
          </div>
        </div>
      </div>
    </header>
  );
}

/* ------------------------------------------------------------- footer */
function SiteFooter() {
  const [done, setDone] = useState(false);
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer__top">
          <div>
            <Logo variant="dark" />
            <p className="footer__about">Connecting businesses in Europe with skilled and unskilled workers from third countries — recruitment, permits and relocation, handled end to end.</p>
            <span className="footer__lic"><span className="dot"></span> R.Z. Find Staff · {SITE.brand.license}</span>
          </div>
          <div className="footer__col">
            <h4>Company</h4>
            <a href="index.html#solutions">Solutions</a>
            <a href="industries.html">Industries</a>
            <a href="process.html">How it works</a>
            <a href="index.html#results">Results</a>
          </div>
          <div className="footer__col">
            <h4>Support</h4>
            <a href="contact.html">Contact</a>
            <a href="contact.html#faq">FAQ</a>
            <a href="#">Privacy policy</a>
            <a href="#">Terms</a>
          </div>
          <div className="footer__col footer__news">
            <h4>Newsletter</h4>
            <p>The latest methods and legislation for hiring and managing workers — straight to your inbox.</p>
            {done ? (
              <p style={{ color: "var(--accent)", fontWeight: 600 }}>Thanks — you're subscribed. ✓</p>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setDone(true); }}>
                <input type="email" required placeholder="you@company.com" aria-label="Email" />
                <button className="btn btn--accent btn--sm" type="submit">Join</button>
              </form>
            )}
            <div style={{ marginTop: 22, fontSize: 14, lineHeight: 1.7 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}><Icon name="pin" size={15} /> {SITE.brand.address}</div>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 6 }}><Icon name="phone" size={15} /> {SITE.brand.phone}</div>
            </div>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© {new Date().getFullYear()} {SITE.brand.domain} · All rights reserved</span>
          <div className="footer__social">
            <a href="https://www.instagram.com/findstaff.gr/" aria-label="Instagram"><Social name="instagram" /></a>
            <a href="https://www.facebook.com/profile.php?id=61557616748503" aria-label="Facebook"><Social name="facebook" /></a>
            <a href="https://www.linkedin.com/company/findstaffgr/" aria-label="LinkedIn"><Social name="linkedin" /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ------------------------------------------------------------- shared bits */
function Eyebrow({ children, center, onInk }) {
  return <span className={`eyebrow ${center ? "eyebrow--center" : ""}`}>{children}</span>;
}

function CTABand() {
  return (
    <section className="section section--tight">
      <div className="shell">
        <Reveal className="cta-band">
          <div className="cta-band__glow"></div>
          <div className="cta-band__inner">
            <span className="eyebrow" style={{ color: "var(--accent)" }}>Immediate hiring</span>
            <h2 className="h-1" style={{ marginTop: 16 }}>Try the new way to find staff from Asia.</h2>
            <p className="lead" style={{ marginTop: 16 }}>Every business is unique — and so are our solutions. Tell us what you need for the short or long term, and we'll bring the skills, experience and network to deliver.</p>
            <div className="btn-row">
              <a className="btn btn--primary btn--lg" href="contact.html">Register your interest <Icon name="arrow" size={17} /></a>
              <a className="btn btn--ghost btn--lg" href="process.html">See how it works</a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function PlaceHolder({ label, style, className = "" }) {
  return <div className={`ph ${className}`} style={style}><span className="ph__tag">{label}</span></div>;
}

function PageHero({ crumb, eyebrow, title, lead }) {
  return (
    <section className="pagehero">
      <div className="pagehero__glow"></div>
      <div className="shell">
        <div className="breadcrumb">
          <a href="index.html">Home</a><Icon name="chevron" size={13} /><span>{crumb}</span>
        </div>
        <span className="eyebrow">{eyebrow}</span>
        <h1 className="h-display" style={{ marginTop: 18, fontSize: "clamp(2.4rem,5.5vw,4.2rem)" }}>{title}</h1>
        <p className="lead">{lead}</p>
      </div>
    </section>
  );
}

Object.assign(window, {
  useBrandTweaks, BrandTweaks, useReveal, Reveal, StatNumber, useCountUp,
  SiteHeader, SiteFooter, Logo, LangMenu, Eyebrow, CTABand, PlaceHolder, PageHero,
});