/* home.jsx — FindStaff homepage */
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

const HERO_AVATARS = [
  "https://d8j0ntlcm91z4.cloudfront.net/user_3ERKV9G8LlYebsmOC4nJfJrPsFJ/hf_20260612_081514_207c0df2-ae27-4013-a29c-74d3a6ce61ff.png",
  "https://d8j0ntlcm91z4.cloudfront.net/user_3ERKV9G8LlYebsmOC4nJfJrPsFJ/hf_20260612_081514_e7479fa0-ac54-44d8-9339-8b01fbc3d731.png",
  "https://d8j0ntlcm91z4.cloudfront.net/user_3ERKV9G8LlYebsmOC4nJfJrPsFJ/hf_20260612_081514_fae80cf0-2c3e-4b7f-afa4-222212f76c36.png",
  "https://d8j0ntlcm91z4.cloudfront.net/user_3ERKV9G8LlYebsmOC4nJfJrPsFJ/hf_20260612_081514_6e1264b4-10ae-4099-af07-7f5126fbc120.png",
];

/* ---------------------------------------------------------------- hero */
function Hero({ showFloaters }) {
  const words = SITE.hero.rotate;
  const [i, setI] = useStateH(0);
  useEffectH(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const id = setInterval(() => setI((x) => (x + 1) % words.length), 2200);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="hero">
      <div className="shell">
        <div className="hero__grid">
          <div>
            <span className="hero__pill"><span className="tag">26 years</span> Europe's trusted recruitment partner <b>·</b> Asia → Europe</span>
            <h1 className="h-display">
              Hire dependable<br />
              <span className="rotator" key={i} style={{ display: "inline-block", animation: "fadeSwap .5s var(--ease)" }}>{words[i]}</span><br />
              from Asia, placed across Europe.
            </h1>
            <p className="hero__sub lead">The most innovative staffing platform connecting European employers with a global workforce — skilled or unskilled, vetted, and visa-ready from day one.</p>
            <div className="hero__cta">
              <a className="btn btn--primary btn--lg" href="contact.html">Start hiring <Icon name="arrow" size={17} /></a>
              <a className="btn btn--ghost btn--lg" href="#solutions">Explore solutions</a>
            </div>
            <div className="hero__trust">
              <div className="hero__avatars">
                {HERO_AVATARS.map((src, n) => <span className="av" key={n}><img src={src} alt="" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /></span>)}
              </div>
              <span className="hero__trust-txt">
                <span className="stars">★★★★★</span><br />
                <b>385+ employers</b> across 20+ countries
              </span>
            </div>
          </div>
          <div className="hero__visual">
            <div className="hero__photo">
              <image-slot id="hero-main" shape="rounded" radius="22" src="https://d8j0ntlcm91z4.cloudfront.net/user_3ERKV9G8LlYebsmOC4nJfJrPsFJ/hf_20260612_081505_c58efcee-474b-424e-a36a-61d1947c5b64.png" placeholder="Drop hero photo — worker / workplace"></image-slot>
            </div>
            {showFloaters &&
            <React.Fragment>
                <div className="float-card float-card--match" style={{ animation: "fadeSwap .7s var(--ease) .2s both" }}>
                  <span className="av"><PlaceHolder label="" /></span>
                  <div>
                    <div className="nm">Ali R. <span className="pct">98% match</span></div>
                    <div className="rl">Field worker · Available now</div>
                  </div>
                </div>
                <div className="float-card float-card--stat" style={{ animation: "fadeSwap .7s var(--ease) .35s both" }}>
                  <div className="n">14 days</div>
                  <div className="l">Avg. time to placement</div>
                  <div className="bars"><i style={{ height: "40%" }}></i><i style={{ height: "100%" }}></i><i style={{ height: "65%" }}></i><i style={{ height: "80%" }}></i><i style={{ height: "50%" }}></i></div>
                </div>
              </React.Fragment>
            }
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------------------------------------------------------- logos */
function Logos() {
  return (
    <div className="logos">
      <div className="shell">
        <p className="logos__label">Working with leading employers across every sector</p>
        <div className="logos__row">
          {SITE.partners.map((p) => <div className="logo-chip" key={p}><span>{p}</span></div>)}
        </div>
      </div>
    </div>);

}

/* ---------------------------------------------------------------- values */
function Values() {
  return (
    <section className="section" id="solutions">
      <div className="shell">
        <Reveal className="sec-head">
          <span className="eyebrow">Why FindStaff</span>
          <h2 className="h-1" style={{ marginTop: 16 }}>Grow your business with people ready to make a difference.</h2>
          <p className="lead">Flexible recruitment built around your needs — from immediate placement to long-term workforce planning, powered by our extensive global network.</p>
        </Reveal>
        <div className="values">
          {SITE.values.map((v, idx) =>
          <Reveal key={v.title} className="value card card--hover" delay={idx * 80}>
              <div className="value__icon"><Icon name={v.icon} size={23} /></div>
              <h3>{v.title}</h3>
              <p>{v.body}</p>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------------------------------------------------------- partner */
function Partner() {
  return (
    <section className="section on-ink">
      <div className="shell">
        <div className="split">
          <Reveal>
            <span className="eyebrow">Your partner</span>
            <h2 className="h-1" style={{ marginTop: 16 }}>A partner for building a strong workforce.</h2>
            <p className="lead" style={{ marginTop: 18 }}>Welcome to FindStaff — a leading recruitment platform with over 26 years of experience supporting industries and professionals across Europe.</p>
            <div style={{ display: "flex", gap: 28, marginTop: 32, flexWrap: "wrap" }}>
              <div><div className="stat__n" style={{ fontSize: "2.6rem" }}>26<span>+</span></div><div className="stat__l">Years of experience</div></div>
              <div style={{ width: 1, background: "var(--on-ink-line)" }}></div>
              <div><div className="stat__n" style={{ fontSize: "2.6rem" }}>7<span></span></div><div className="stat__l">Industries served</div></div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="split__media" style={{ aspectRatio: "5/4" }}>
              <image-slot id="partner-main" shape="rounded" radius="22" src="https://d8j0ntlcm91z4.cloudfront.net/user_3ERKV9G8LlYebsmOC4nJfJrPsFJ/hf_20260604_202909_de6621ba-61d9-49ea-acf7-b1f2f9e540ae.png" placeholder="Drop team / office photo"></image-slot>
            </div>
          </Reveal>
        </div>
        <div className="feat-grid">
          {SITE.features.map((f, idx) =>
          <Reveal key={f.n} className="feat" delay={idx * 70}>
              <div className="feat__num">{f.n}</div>
              <div><h3>{f.title}</h3><p>{f.body}</p></div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------------------------------------------------------- industries */
function Industries() {
  const [active, setActive] = useStateH(SITE.industries[0].id);
  const ind = SITE.industries.find((x) => x.id === active);
  return (
    <section className="section" id="industries">
      <div className="shell">
        <Reveal className="sec-head">
          <span className="eyebrow">Who we serve</span>
          <h2 className="h-1" style={{ marginTop: 16 }}>Staff from third countries, for every role you need.</h2>
          <p className="lead">Whether you're after capable waiters, creative chefs or reliable housekeepers — we've got you covered across seven industries.</p>
        </Reveal>
        <div className="ind">
          <div className="ind__tabs" role="tablist">
            {SITE.industries.map((x) =>
            <button key={x.id} className={`ind__tab ${x.id === active ? "is-active" : ""}`} onClick={() => setActive(x.id)} role="tab" aria-selected={x.id === active}>
                <span className="ind__tab-ico"><Icon name={x.icon} size={20} /></span>
                <span className="ind__tab-tx"><b>{x.name}</b><span>{x.tag}</span></span>
              </button>
            )}
          </div>
          <div className="ind__panel">
            <div className="ind__media"><div className="fade-swap" key={ind.id} style={{ width: "100%", height: "100%" }}>
              <image-slot id={"ind-" + ind.id} shape="rounded" radius="22" src={ind.photo} placeholder={ind.name + " photo"}></image-slot>
            </div></div>
            <div className="fade-swap" key={"t-" + ind.id}>
              <span className="eyebrow">{ind.proof}</span>
              <h3 style={{ marginTop: 12 }}>{ind.headline}</h3>
              <p style={{ marginTop: 14 }}>{ind.body}</p>
              <div className="ind__roles">
                {ind.roles.map((r) => <span className="ind__role" key={r}>{r}</span>)}
              </div>
              <a className="link-arrow" style={{ marginTop: 24 }} href="industries.html">All {ind.name.toLowerCase()} roles <Icon name="arrow" size={16} /></a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------------------------------------------------------- marquee */
function RolesMarquee() {
  const items = [...SITE.rolesMarquee, ...SITE.rolesMarquee];
  return (
    <section className="section--tight on-ink" style={{ paddingBlock: "clamp(40px,6vw,72px)" }}>
      <div className="shell" style={{ marginBottom: 28 }}>
        <span className="eyebrow eyebrow--center" style={{ display: "flex", justifyContent: "center" }}>Roles we place</span>
      </div>
      <div className="marquee">
        <div className="marquee__track">
          {items.map((r, idx) => <span className="role-chip" key={idx}><span className="dot"></span>{r}</span>)}
        </div>
      </div>
    </section>);

}

/* ---------------------------------------------------------------- process preview */
function ProcessPreview() {
  return (
    <section className="section" id="process">
      <div className="shell">
        <Reveal className="sec-head">
          <span className="eyebrow">How it works</span>
          <h2 className="h-1" style={{ marginTop: 16 }}>A clear path to your next hire.</h2>
          <p className="lead">A glance at the steps to success — search, evaluate, hire. We handle the complexity in between.</p>
        </Reveal>
        <div className="proc">
          {SITE.process.map((p, idx) =>
          <Reveal key={p.title} className="proc__step" delay={idx * 90}>
              {idx < SITE.process.length - 1 && <span className="proc__arrow"><Icon name="arrow" size={15} /></span>}
              <div className="value__icon" style={{ marginBottom: 16 }}><Icon name={p.icon} size={23} /></div>
              <div className="proc__n">{p.n}</div>
              <div className="proc__num">{String(idx + 1).padStart(2, "0")}</div>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
            </Reveal>
          )}
        </div>
        <div style={{ marginTop: 36 }}>
          <a className="btn btn--ghost btn--lg" href="process.html">See the full process <Icon name="arrow" size={17} /></a>
        </div>
      </div>
    </section>);

}

/* ---------------------------------------------------------------- stats */
function Stats() {
  return (
    <section className="section on-ink" id="results">
      <div className="shell">
        <Reveal className="sec-head sec-head--center">
          <span className="eyebrow eyebrow--center" style={{ display: "flex", justifyContent: "center" }}>Building trust</span>
          <h2 className="h-1" style={{ marginTop: 16 }}>Real results, real placements.</h2>
        </Reveal>
        <div className="stats" style={{ marginTop: 56 }}>
          {SITE.stats.map((s, idx) =>
          <React.Fragment key={s.label}>
              {idx > 0 && <div className="stats__div"></div>}
              <Reveal className="stat" delay={idx * 100}>
                <div className="stat__n"><StatNumber value={s.n} suffix={s.suffix} /></div>
                <div className="stat__l">{s.label}</div>
              </Reveal>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------------------------------------------------------- testimonials */
function Testimonials() {
  const [i, setI] = useStateH(0);
  const list = SITE.testimonials;
  const go = (d) => setI((x) => (x + d + list.length) % list.length);
  const t = list[i];
  return (
    <section className="section">
      <div className="shell">
        <div className="testi">
          <div>
            <span className="eyebrow">Real experiences</span>
            <div className="testi__big" aria-hidden="true">“</div>
          </div>
          <div>
            <blockquote className="testi__quote" key={i} style={{ animation: "fadeSwap .5s var(--ease)" }}>
              <span dangerouslySetInnerHTML={{ __html: t.quote }} />
            </blockquote>
            <div className="testi__person">
              <span className="testi__av"><PlaceHolder label="" /></span>
              <div><div className="nm">{t.name}</div><div className="rl">{t.role}</div></div>
            </div>
            <div className="testi__nav">
              <button className="testi__dot" onClick={() => go(-1)} aria-label="Previous"><Icon name="chevron" size={16} style={{ transform: "rotate(180deg)" }} /></button>
              <button className="testi__dot" onClick={() => go(1)} aria-label="Next"><Icon name="chevron" size={16} /></button>
              <span className="testi__count">{String(i + 1).padStart(2, "0")} / {String(list.length).padStart(2, "0")}</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------------------------------------------------------- candidates */
function Candidates() {
  const [open, setOpen] = useStateH(null);
  const c = open != null ? SITE.candidates[open] : null;
  useEffectH(() => {document.body.style.overflow = open != null ? "hidden" : "";}, [open]);
  return (
    <section className="section on-ink">
      <div className="shell">
        <Reveal className="sec-head">
          <span className="eyebrow">Ready when you are</span>
          <h2 className="h-1" style={{ marginTop: 16 }}>See candidates we've selected — just for you.</h2>
          <p className="lead">A preview of the vetted, EU-ready talent in our database. Register your interest to browse full profiles.</p>
        </Reveal>
        <div className="cands">
          {SITE.candidates.map((cd, idx) =>
          <Reveal key={cd.role} delay={idx * 70}>
              <div className="cand" onClick={() => setOpen(idx)}>
                <div className="cand__photo">
                  <PlaceHolder label="" />
                  <span className="cand__flag">{cd.flag}</span>
                  <span className="cand__verify"><Icon name="check" size={14} /></span>
                </div>
                <div className="cand__body">
                  <div className="cand__role">{cd.role}</div>
                  <div className="cand__meta">{cd.exp}</div>
                  <div className="cand__tags">{cd.tags.map((tg) => <span className="cand__tag" key={tg}>{tg}</span>)}</div>
                </div>
              </div>
            </Reveal>
          )}
        </div>
        <div style={{ marginTop: 36 }}>
          <a className="btn btn--accent btn--lg" href="contact.html">Browse all candidates <Icon name="arrow" size={17} /></a>
        </div>
      </div>

      <div className={`modal ${open != null ? "is-open" : ""}`}>
        <div className="modal__scrim" onClick={() => setOpen(null)}></div>
        {c &&
        <div className="modal__card">
            <button className="modal__close" onClick={() => setOpen(null)} aria-label="Close"><Icon name="close" size={18} /></button>
            <div className="modal__head">
              <span className="modal__av"><PlaceHolder label="" /></span>
              <div>
                <div style={{ fontSize: 12.5, color: "var(--muted)", letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 600 }}>{c.flag}</div>
                <h3 style={{ fontSize: "1.5rem", marginTop: 4 }}>{c.role}</h3>
                <div style={{ color: "var(--muted)", fontSize: 14 }}>{c.exp}</div>
                <div className="cand__tags" style={{ marginTop: 10 }}>{c.tags.map((tg) => <span className="cand__tag" key={tg}>{tg}</span>)}</div>
              </div>
            </div>
            <div className="modal__body">
              <div className="modal__row"><span>Availability</span><b>Immediate</b></div>
              <div className="modal__row"><span>Work permit</span><b>We handle it</b></div>
              <div className="modal__row"><span>Languages</span><b>English + native</b></div>
              <div className="modal__row" style={{ borderBottom: "none" }}><span>Background check</span><b style={{ color: "var(--brand)" }}>Verified ✓</b></div>
              <a className="btn btn--primary" style={{ width: "100%", marginTop: 18 }} href="contact.html">Request this candidate <Icon name="arrow" size={16} /></a>
            </div>
          </div>
        }
      </div>
    </section>);

}

/* ---------------------------------------------------------------- faq teaser */
function FAQTeaser() {
  const [open, setOpen] = useStateH(0);
  const items = SITE.faq.slice(0, 4);
  return (
    <section className="section">
      <div className="shell">
        <Reveal className="sec-head">
          <span className="eyebrow">Good to know</span>
          <h2 className="h-1" style={{ marginTop: 16 }}>Frequently asked questions.</h2>
        </Reveal>
        <div className="faq">
          {items.map((f, idx) =>
          <div className={`faq__item ${open === idx ? "is-open" : ""}`} key={idx}>
              <button className="faq__q" onClick={() => setOpen(open === idx ? -1 : idx)} aria-expanded={open === idx}>
                {f.q}<span className="faq__icon"></span>
              </button>
              <div className="faq__a" style={{ maxHeight: open === idx ? 460 : 0 }}>
                <div className="faq__a-inner">
                  {f.a}
                  {f.list && <ul>{f.list.map((li) => <li key={li}>{li}</li>)}</ul>}
                </div>
              </div>
            </div>
          )}
        </div>
        <div style={{ marginTop: 28 }}>
          <a className="link-arrow" href="contact.html#faq">See all questions <Icon name="arrow" size={16} /></a>
        </div>
      </div>
    </section>);

}

/* ---------------------------------------------------------------- app */
function HomeApp() {
  const [t, setTweak] = useBrandTweaks();
  useReveal();
  return (
    <React.Fragment>
      <SiteHeader active="Solutions" />
      <main>
        <Hero showFloaters={t.showFloaters} />
        <Logos />
        <Values />
        <Partner />
        <Industries />
        <RolesMarquee />
        <ProcessPreview />
        <Stats />
        <Testimonials />
        <Candidates />
        <FAQTeaser />
        <CTABand />
      </main>
      <SiteFooter />
      <BrandTweaks t={t} setTweak={setTweak} />
    </React.Fragment>);

}

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