/* Hard4Tech — Home page sections + reusable bands. Exports to window. */

/* Rotating hero word */
function RotatingWord({ words }) {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setI((v) => (v + 1) % words.length), 2600);
    return () => clearInterval(id);
  }, [words.length]);
  return (
    <span className="hero__rotate">
      <span key={i} className="hero__rotate-word gradient-text" style={{ animation: "wordin .6s cubic-bezier(.2,.7,.2,1)" }}>
        {words[i]}
      </span>
    </span>
  );
}

/* Brand mark watermark in the hero background (the circuit "H" from the logo) */
function CircuitDeco() {
  return (
    <img src="assets/mark-white.png" className="hero__deco hero__deco--mark" alt="" aria-hidden="true" />
  );
}

function Hero({ t, go }) {
  const slides = t.slides || [];
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const n = slides.length;
  const DUR = 6000;

  React.useEffect(() => {
    if (paused || n <= 1) return;
    const id = setTimeout(() => setI((v) => (v + 1) % n), DUR);
    return () => clearTimeout(id);
  }, [i, paused, n]);

  if (!n) return null;
  const s = slides[i];

  return (
    <section className="hero hero--slider"
      onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="grid-bg" />
      <div className="glow-orb hero__orb1" />
      <div className="glow-orb hero__orb2" />
      <CircuitDeco />
      <div className="container hero__inner">
        <div className="pill hero__badge reveal in"><span className="dot" />{t.hero.badge}</div>
        <div className="hero__slides" key={i}>
          <span className="eyebrow hero__kicker">{s.kicker}</span>
          <h1 className="display h1 hero__title">
            <span className="hero__ul">{s.title}</span>
          </h1>
          <p className="lead hero__sub">{s.sub}</p>
          <div className="hero__actions">
            <button className="btn btn--primary btn--arrow" onClick={() => go(s.primaryGo)}>{s.primary}<Icon name="arrow" size={16} className="arr" /></button>
            <button className="btn btn--ghost" onClick={() => go(s.secondaryGo)}>{s.secondary}</button>
          </div>
        </div>

        <div className="hero__stats reveal in">
          <div className="hero__stat"><b>140+</b><span>{t.hero.stat1}</span></div>
          <div className="hero__stat"><b>99.9%</b><span>{t.hero.stat2}</span></div>
          <div className="hero__stat"><b>9+</b><span>{t.hero.stat3}</span></div>
        </div>
      </div>
    </section>
  );
}

function TrustBar({ t }) {
  return <div className="trustbar"><div className="container trustbar__inner">{t.trustBar}</div></div>;
}

function ServiceCard({ s, idx }) {
  return (
    <article className="card svc reveal">
      <span className="svc__num">{String(idx + 1).padStart(2, "0")}</span>
      <div className="svc__icon"><Icon name={s.icon} size={28} /></div>
      <h3 className="svc__title">{s.title}</h3>
      <p className="svc__desc">{s.desc}</p>
      <ul className="svc__points">
        {s.points.map((p, i) => <li key={i}><Icon name="check" size={16} />{p}</li>)}
      </ul>
    </article>
  );
}

function ServicesSection({ t, go }) {
  return (
    <section className="section" id="services-sec">
      <div className="container">
        <SectionHead eyebrow={t.servicesHead.eyebrow} title={t.servicesHead.title} desc={t.servicesHead.desc} />
        <div className="grid svc-grid">
          {t.services.map((s, i) => <ServiceCard key={i} s={s} idx={i} />)}
        </div>
        <div className="reveal" style={{ marginTop: 44, display: "flex", justifyContent: "center" }}>
          <button className="btn btn--ghost btn--arrow" onClick={() => go("services")}>{t.cta.all}<Icon name="arrow" size={16} className="arr" /></button>
        </div>
      </div>
    </section>
  );
}

function AboutGlimpse({ t, go }) {
  return (
    <section className="section about about--center">
      <div className="container about__center">
        <div className="reveal" style={{ textAlign: "center", maxWidth: 780, marginInline: "auto" }}>
          <span className="eyebrow" style={{ justifyContent: "center" }}>{t.aboutHead.eyebrow}</span>
          <h2 className="display h2" style={{ margin: "16px 0 20px" }}>{t.aboutHead.title}</h2>
          <p className="lead" style={{ marginInline: "auto", marginBottom: 14 }}>{t.aboutHead.p1}</p>
          <p className="muted" style={{ maxWidth: "60ch", marginInline: "auto" }}>{t.aboutHead.p2}</p>
        </div>
        <ul className="about__pills reveal">
          {t.aboutHead.bullets.map((b, i) => (
            <li key={i}><span className="ck"><Icon name="check" size={16} /></span>{b}</li>
          ))}
        </ul>
        <div className="reveal" style={{ marginTop: 8, display: "flex", justifyContent: "center" }}>
          <button className="btn btn--primary btn--arrow" onClick={() => go("about")}>{t.cta.more}<Icon name="arrow" size={16} className="arr" /></button>
        </div>
      </div>
    </section>
  );
}

function StatBand({ t }) {
  return (
    <section className="section--tight statband">
      <div className="glow-orb" />
      <div className="container">
        <div className="grid stat-grid">
          {t.stats.map((s, i) => (
            <div className="stat reveal" key={i}>
              <div className="stat__val gradient-text"><Counter value={s.value} suffix={s.suffix} decimal={s.decimal} /></div>
              <div className="stat__label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhySection({ t }) {
  return (
    <section className="section">
      <div className="container">
        <SectionHead eyebrow={t.whyHead.eyebrow} title={t.whyHead.title} center />
        <div className="grid why-grid">
          {t.why.map((w, i) => (
            <div className="card why reveal" key={i}>
              <div className="why__icon"><Icon name={w.icon} size={24} /></div>
              <h3 className="why__title">{w.title}</h3>
              <p className="why__desc">{w.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProcessSection({ t }) {
  return (
    <section className="section--tight">
      <div className="container">
        <SectionHead eyebrow={t.processHead.eyebrow} title={t.processHead.title} center />
        <div className="grid proc-grid">
          {t.process.map((p, i) => (
            <div className="proc reveal" key={i}>
              <div className="proc__step">{p.step}</div>
              <h3 className="proc__title">{p.title}</h3>
              <p className="proc__desc">{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PartnersBand({ t }) {
  const row = [...t.partners, ...t.partners];
  return (
    <section className="section--tight">
      <div className="container">
        <SectionHead eyebrow={t.partnersHead.eyebrow} title={t.partnersHead.title} center />
      </div>
      <div className="marquee">
        <div className="marquee__track">
          {row.map((p, i) => <span className="partner" key={i}>{p}</span>)}
        </div>
      </div>
    </section>
  );
}

function ClientStrip({ t }) {
  const clients = (t.partnersPage && t.partnersPage.clients) || [];
  if (!clients.length) return null;
  const row = [...clients, ...clients];
  const label = t.dir === "rtl" ? "موثوقون من شركات رائدة في مصر" : "Trusted by leading companies across Egypt";
  return (
    <section className="client-strip">
      <div className="client-strip__head">{label}</div>
      <div className="marquee">
        <div className="marquee__track">
          {row.map((c, i) => (
            <div className="client-strip__logo" key={i} title={c.name}><img src={c.logo} alt={c.name} /></div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials({ t }) {
  return (
    <section className="section">
      <div className="container">
        <SectionHead eyebrow={t.testiHead.eyebrow} title={t.testiHead.title} center />
        <div className="grid testi-grid">
          {t.testimonials.map((q, i) => (
            <div className="card testi reveal" key={i}>
              <p className="testi__quote">{q.quote}</p>
              <div className="testi__who"><b>{q.name}</b><span>{q.role}</span></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CtaBand({ t, go }) {
  return (
    <section className="section ctaband">
      <div className="container">
        <div className="ctaband__box reveal">
          <div className="grid-bg" />
          <div className="glow-orb ctaband__glow" />
          <h2 className="display h2 gradient-text">{t.ctaBand.title}</h2>
          <p className="lead">{t.ctaBand.desc}</p>
          <button className="btn btn--primary btn--arrow" onClick={() => go("contact")}>{t.ctaBand.btn}<Icon name="arrow" size={16} className="arr" /></button>
        </div>
      </div>
    </section>
  );
}

function HomePage({ t, go }) {
  return (
    <div className="page">
      <Hero t={t} go={go} />
      <ClientStrip t={t} />
      <ServicesSection t={t} go={go} />
      <AboutGlimpse t={t} go={go} />
      <StatBand t={t} />
      <WhySection t={t} />
      <PartnersBand t={t} />
      <Testimonials t={t} />
      <CtaBand t={t} go={go} />
    </div>
  );
}

Object.assign(window, { HomePage, StatBand, ProcessSection, PartnersBand, ClientStrip, CtaBand, Testimonials, WhySection, RotatingWord });