/* Hard4Tech — inner pages. Exports to window. */

function PageHero({ t, go, crumb, title, desc }) {
  return (
    <section className="pagehero">
      <div className="grid-bg" />
      <div className="glow-orb pagehero__orb" />
      <div className="container pagehero__inner reveal in">
        <div className="crumbs">
          <button onClick={() => go("home")}>{t.nav[0].label}</button>
          <Icon name="arrow" size={14} />
          <span>{crumb}</span>
        </div>
        <h1 className="display h1" style={{ fontSize: "clamp(2.4rem,5vw,3.6rem)" }}>{title}</h1>
        <p className="lead">{desc}</p>
      </div>
    </section>
  );
}

/* ---------- Services page ---------- */
function ServicesPage({ t, go }) {
  return (
    <div className="page">
      <PageHero t={t} go={go} crumb={t.nav[1].label} title={t.servicesHead.title} desc={t.servicesHead.desc} />
      <section className="section">
        <div className="container">
          {t.services.map((s, i) => (
            <div className="svc-row reveal" key={i}>
              <div className="svc-row__ic"><Icon name={s.icon} size={30} /></div>
              <div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
                <div className="svc-row__tags">
                  {s.points.map((p, k) => <span className="pill" key={k}><Icon name="check" size={14} style={{ color: "var(--accent)" }} />{p}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
      <ProcessSection t={t} />
      <CtaBand t={t} go={go} />
    </div>
  );
}

/* ---------- Solutions page ---------- */
function SolutionsPage({ t, go }) {
  return (
    <div className="page">
      <PageHero t={t} go={go} crumb={t.nav[2].label} title={t.solutionsHead.title} desc={t.solutionsHead.desc} />
      <section className="section">
        <div className="container">
          <div className="grid sol-grid">
            {t.solutions.map((s, i) => (
              <article className="card sol reveal" key={i}>
                <span className="pill sol__tag"><span className="dot" />{s.tag}</span>
                <h3 className="sol__title">{s.title}</h3>
                <p className="sol__desc">{s.desc}</p>
                <button className="sol__more" onClick={() => go("contact")}>{t.cta.more}<Icon name="arrow" size={16} /></button>
              </article>
            ))}
          </div>
        </div>
      </section>
      <StatBand t={t} />
      <PartnersBand t={t} />
      <CtaBand t={t} go={go} />
    </div>
  );
}

/* ---------- About page ---------- */
function AboutPage({ t, go }) {
  const values = t.why;
  return (
    <div className="page">
      <PageHero t={t} go={go} crumb={t.nav[3].label} title={t.aboutHead.title} desc={t.aboutHead.p1} />
      <section className="section">
        <div className="container about__center">
          <div className="reveal" style={{ textAlign: "center", maxWidth: 820, marginInline: "auto" }}>
            <span className="eyebrow" style={{ justifyContent: "center" }}>{t.aboutHead.eyebrow}</span>
            <h2 className="display h2" style={{ margin: "16px 0 18px", fontSize: "clamp(1.7rem,3vw,2.4rem)" }}>{t.aboutHead.title}</h2>
            <p className="lead" style={{ marginInline: "auto", marginBottom: 14 }}>{t.aboutHead.p1}</p>
            <p className="muted" style={{ maxWidth: "62ch", 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>
      </section>

      <section className="section--tight">
        <div className="container">
          <div className="mv-grid">
            <div className="panel mv reveal">
              <span className="eyebrow">{t.dir === "rtl" ? "رسالتنا" : "Mission"}</span>
              <h3 className="display" style={{ marginTop: 14 }}>{t.dir === "rtl" ? "نُبقي أعمالك تعمل" : "Keep your business running"}</h3>
              <p>{t.footer.blurb}</p>
            </div>
            <div className="panel mv reveal">
              <span className="eyebrow">{t.dir === "rtl" ? "رؤيتنا" : "Vision"}</span>
              <h3 className="display" style={{ marginTop: 14 }}>{t.dir === "rtl" ? "الشريك التقني الأكثر ثقة" : "The most trusted IT partner"}</h3>
              <p>{t.dir === "rtl" ? "أن نكون الشريك التقني الأكثر ثقة للمؤسسات في مصر والمنطقة، عبر تقديم خدمات يُعتمد عليها وآمنة بشكل دائم." : "To be the most trusted technology partner for organizations across Egypt and the region, through dependable, secure-by-default delivery."}</p>
            </div>
          </div>
        </div>
      </section>

      <StatBand t={t} />

      <section className="section">
        <div className="container">
          <SectionHead eyebrow={t.whyHead.eyebrow} title={t.whyHead.title} center />
          <div className="grid val-grid">
            {values.slice(0, 3).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>
      <CtaBand t={t} go={go} />
    </div>
  );
}

/* ---------- Contact page ---------- */
function ContactPage({ t, go }) {
  const f = t.contact.form;
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  const info = [
    { ic: "pin", title: t.dir === "rtl" ? "العنوان" : "Address", val: t.contact.address },
    { ic: "mail", title: t.dir === "rtl" ? "البريد" : "Email", val: t.contact.email },
    { ic: "phone", title: t.dir === "rtl" ? "الهاتف" : "Phone", val: t.contact.phone, ltr: true },
    { ic: "clock", title: t.dir === "rtl" ? "ساعات العمل" : "Working hours", val: t.contact.hours },
  ];
  return (
    <div className="page">
      <PageHero t={t} go={go} crumb={t.nav[4].label} title={t.contactHead.title} desc={t.contactHead.desc} />
      <section className="section">
        <div className="container contact__grid">
          <div className="contact__info reveal">
            {info.map((it, i) => (
              <div className="contact__item" key={i}>
                <span className="ic"><Icon name={it.ic} size={22} /></span>
                <div>
                  <h4>{it.title}</h4>
                  <p {...(it.ltr ? { dir: "ltr" } : {})}>{it.val}</p>
                </div>
              </div>
            ))}
            <div className="ph" style={{ height: 200, marginTop: 8 }}><span>map embed</span></div>
          </div>

          <form className="card contact__form reveal" onSubmit={submit}>
            <div className="contact__row">
              <div className="field"><label>{f.name}</label><input required type="text" /></div>
              <div className="field"><label>{f.email}</label><input required type="email" /></div>
            </div>
            <div className="field"><label>{f.company}</label><input type="text" /></div>
            <div className="field"><label>{f.message}</label><textarea rows="5" required></textarea></div>
            <button className="btn btn--primary btn--arrow" type="submit" style={{ width: "100%", justifyContent: "center" }}>
              {f.submit}<Icon name="arrow" size={16} className="arr" />
            </button>
            {sent && <div className="contact__success"><Icon name="check" size={20} />{f.success}</div>}
          </form>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ServicesPage, SolutionsPage, AboutPage, ContactPage, PageHero });