/* ============================================================
   home.jsx — Home page (Safe + Bold variants share most blocks)
   ============================================================ */

/* ----- HERO — Safe ------------------------------------------- */
function HeroSafe({ lang, setRoute }) {
  const t = window.STR[lang].hero;
  return (
    <section className="hero">
      <Container>
        <div className="hero-grid">
          <div className="hero-text">
            <Eyebrow>{t.eyebrow}</Eyebrow>
            <h1>
              {t.heading_a} {t.heading_b} <span className="emph">{t.heading_emph}</span>
            </h1>
            <p className="lede">{t.lede}</p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <Btn variant="primary" onClick={() => setRoute("contact")}>{t.primary} <span className="arr">→</span></Btn>
              <Btn variant="ghost" onClick={() => setRoute("expertise")}>{t.secondary} <span className="arr">→</span></Btn>
            </div>
            <div className="meta">
              <span><strong>ITIL4</strong> · aligned practices</span>
              <span>{t.since} <strong>2014</strong></span>
              <span>İstanbul · Türkiye</span>
            </div>
          </div>
          <div className="hero-art">
            <Photo kind="team" label="enterprise team — boardroom" />
            <div className="hero-tag">
              <span className="k">{t.tagKey}</span>
              <span className="v">{t.tagVal}</span>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

/* ----- HERO — Bold ------------------------------------------- */
function HeroBold({ lang, setRoute }) {
  const t = window.STR[lang].hero;
  return (
    <section className="hero">
      <div className="hero-mark"><span className="vt">VIRA · {t.since} 2014 · ISTANBUL · ITIL4</span></div>
      <Container wide>
        <Eyebrow>{t.eyebrow}</Eyebrow>
        <div className="hero-grid">
          <h1>
            {t.heading_a} <br/>
            {t.heading_b} <span className="emph">{t.heading_emph}</span>
          </h1>
          <div className="hero-side">
            <p className="lede">{t.lede}</p>
            <div className="actions">
              <Btn variant="primary" onClick={() => setRoute("contact")}>{t.primary} <span className="arr">→</span></Btn>
              <Btn variant="ghost" onClick={() => setRoute("expertise")}>{t.secondary} <span className="arr">→</span></Btn>
            </div>
          </div>
          <div className="hero-meta-row">
            <div className="cell"><div className="k">{lang === "en" ? "Practice" : "Pratik"}</div><div className="v">ITIL4</div><div className="vs">{lang === "en" ? "aligned end-to-end" : "uçtan uca uyumlu"}</div></div>
            <div className="cell"><div className="k">{lang === "en" ? "Projects" : "Projeler"}</div><div className="v">65+</div><div className="vs">{lang === "en" ? "delivered to date" : "bugüne kadar teslim"}</div></div>
            <div className="cell"><div className="k">{lang === "en" ? "Modules" : "Modüller"}</div><div className="v">16</div><div className="vs">ServiceCore</div></div>
            <div className="cell"><div className="k">{lang === "en" ? "Based in" : "Merkez"}</div><div className="v">İstanbul</div><div className="vs">{lang === "en" ? "serving EMEA" : "EMEA hizmeti"}</div></div>
          </div>
        </div>
      </Container>
    </section>
  );
}

/* ----- PILL STRIP (4-up: experienced/innovative/holistic/best practices) - */
function PillStrip({ lang }) {
  const t = window.STR[lang].pillars4;
  return (
    <section className="pill-strip">
      <Container wide>
        <div className="grid">
          {t.map((p, i) => (
            <div className="item" key={i}>
              <div className="n">0{i + 1}</div>
              <div className="tag">{p.tag}</div>
              <p className="desc">{p.desc}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

/* ----- MODULES BLOCK -------------------------------------- */
function ModulesBlock({ lang }) {
  const t = window.STR[lang].modules;
  return (
    <Section>
      <Container wide>
        <div className="modules">
          <div className="shead">
            <Eyebrow>{t.eyebrow}</Eyebrow>
            <h2>{t.title_a} <span style={{ fontStyle: "italic", color: "var(--accent)", fontWeight: 400 }}>{t.title_b}</span></h2>
            <p className="lede">{t.lede}</p>
          </div>
          <div className="mod-groups">
            {t.groups.map((g) => (
              <div className="mod-group" key={g.label}>
                <h4>{g.label}</h4>
                <ul className="mod-list">{g.items.map((i) => <li key={i}>{i}</li>)}</ul>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </Section>
  );
}

/* ----- SERVICES (6-up) ------------------------------------ */
function Services({ lang, setRoute }) {
  const t = window.STR[lang].svc;
  return (
    <Section band>
      <Container wide>
        <div className="shead">
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <h2>{t.title_a} <span style={{ fontStyle: "italic", color: "var(--accent)", fontWeight: 400 }}>{t.title_b}</span></h2>
          <p className="lede">{t.lede}</p>
        </div>
        <div className="svc-grid">
          {t.items.map((s) => (
            <article key={s.title} className="svc-card">
              <div className="svc-head">
                <span className="svc-num">{s.num}</span>
                <div className="svc-icon"><Icon name={s.icon} /></div>
              </div>
              <div>
                <span className="svc-tag">{s.tag}</span>
                <h3 className="svc-title">{s.title}</h3>
                <p className="svc-desc">{s.desc}</p>
              </div>
              <a className="svc-link" href="#" onClick={(e) => { e.preventDefault(); setRoute("expertise"); }}>
                {t.cta} →
              </a>
            </article>
          ))}
        </div>
      </Container>
    </Section>
  );
}

/* ----- MARQUEE -------------------------------------------- */
function Marquee({ items, dark, big }) {
  const set = (
    <div className="marquee-track" aria-hidden="false">
      {items.map((it, i) => (
        <span className={"marquee-item" + (big ? " lg" : "")} key={i}>
          <span className="dot" /> {it}
        </span>
      ))}
    </div>
  );
  return (
    <div className={"marquee" + (dark ? " dark" : "")}>
      {set}
      {React.cloneElement(set, { "aria-hidden": "true" })}
    </div>
  );
}

/* ----- STATS ---------------------------------------------- */
function StatsBand({ lang }) {
  const t = window.STR[lang].stats;
  return (
    <Section dark tight>
      <Container wide>
        <div className="stats">
          {t.map((s) => (
            <div className="stat" key={s.label}>
              <span className="n">{s.n}</span>
              <span className="label">{s.label}</span>
            </div>
          ))}
        </div>
      </Container>
    </Section>
  );
}

/* ----- STANDARDS (tabs + photo) --------------------------- */
function Standards({ lang, setRoute }) {
  const t = window.STR[lang].standards;
  const [active, setActive] = React.useState(t.tabs[0].id);
  const cur = t.tabs.find((x) => x.id === active);
  return (
    <Section>
      <Container wide>
        <div className="standards">
          <div className="standards-art"><Photo kind="boardroom" label={lang === "en" ? "planning session — Istanbul" : "planlama oturumu — İstanbul"} /></div>
          <div>
            <Eyebrow>{t.eyebrow}</Eyebrow>
            <h2 style={{ font: "500 clamp(36px,5vw,72px)/1.05 var(--font-serif)", letterSpacing: "-0.022em", margin: "12px 0 0" }}>
              {t.title_a} <span style={{ fontStyle: "italic", color: "var(--accent)", fontWeight: 400 }}>{t.title_b}</span>
            </h2>
            <div className="standards-tabs" role="tablist">
              {t.tabs.map((tab) => (
                <button key={tab.id} role="tab"
                        className={"standards-tab" + (tab.id === active ? " active" : "")}
                        onClick={() => setActive(tab.id)}>{tab.label}</button>
              ))}
            </div>
            <div className="standards-body">
              <p>{cur.body}</p>
              <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 32 }}>
                <span style={{ font: "500 11px/1.2 var(--font-sans)", letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-3)" }}>
                  <Icon name="phone" /> {t.hours}
                </span>
                <Btn variant="primary" onClick={() => setRoute("contact")}><Icon name="user-round" /> {t.askExpert}</Btn>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}

/* ----- CLIENT MARQUEE ------------------------------------- */
function ClientsMarquee({ lang }) {
  const t = window.STR[lang].clients;
  return (
    <Section tight>
      <Container wide>
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <p style={{ color: "var(--ink-3)", font: "400 14px/1.4 var(--font-sans)", margin: "12px 0 0" }}>{t.label}</p>
        </div>
      </Container>
      <Marquee items={window.CLIENTS} />
    </Section>
  );
}

/* ----- PILLARS (4 dimensions of Service Management) ------- */
function Pillars({ lang }) {
  const t = window.STR[lang].pillars;
  return (
    <Section band>
      <Container wide>
        <div className="pillars">
          <div className="pillars-art"><Photo kind="team" label={lang === "en" ? "service value stream — workshop" : "değer akışı — çalıştay"} /></div>
          <div>
            <Eyebrow>{t.eyebrow}</Eyebrow>
            <h2 style={{ font: "500 clamp(36px,5vw,72px)/1.05 var(--font-serif)", letterSpacing: "-0.022em", margin: "12px 0 0" }}>
              {t.title_a} <span style={{ fontStyle: "italic", color: "var(--accent)", fontWeight: 400 }}>{t.title_b}</span>
            </h2>
            <p className="lede" style={{ marginTop: 20 }}>{t.lede}</p>
            <ul className="pillar-list">
              {t.items.map((p) => (
                <li className="pillar-row" key={p.n}>
                  <span className="n">{p.n}</span>
                  <div>
                    <div className="t">{p.title}</div>
                    <p className="d">{p.desc}</p>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Container>
    </Section>
  );
}

/* ----- WHY block — left art + quote + stat strip ; right copy/list */
function WhyAndContact({ lang, setRoute }) {
  const t = window.STR[lang].why;
  const c = window.STR[lang].contact;
  return (
    <Section>
      <Container wide>
        <div className="why">
          <div className="why-side">
            <div className="why-art"><Photo kind="boardroom" label={lang === "en" ? "consulting lead" : "danışmanlık lideri"} /></div>
            <div className="why-quote">
              <p>{lang === "en"
                ? "VIRA reshaped how our service desk thinks about value streams — not just tickets."
                : "VIRA, servis masamızın değer akışlarına bakışını yeniden şekillendirdi — sadece kayıtlara değil."}</p>
              <div className="who"><span className="av" /> <span>{lang === "en" ? "Enterprise IT Director · Banking" : "Kurumsal BT Direktörü · Bankacılık"}</span></div>
            </div>
            <div className="why-stat-row">
              <div className="cell"><span className="n">65+</span><span className="label">{lang === "en" ? "Enterprise projects delivered" : "Tamamlanan kurumsal proje"}</span></div>
              <div className="cell"><span className="n">20y</span><span className="label">{lang === "en" ? "Combined ITIL experience" : "Birikmiş ITIL tecrübesi"}</span></div>
            </div>
          </div>
          <div>
            <Eyebrow>{t.eyebrow}</Eyebrow>
            <h2 style={{ font: "500 clamp(36px,5vw,72px)/1.05 var(--font-serif)", letterSpacing: "-0.022em", margin: "12px 0 0" }}>
              {t.title_a} <span style={{ fontStyle: "italic", color: "var(--accent)", fontWeight: 400 }}>{t.title_b}</span>
            </h2>
            <p className="lede" style={{ marginTop: 20, color: "var(--ink-2)", font: "400 17px/1.65 var(--font-sans)", maxWidth: "54ch" }}>{t.lede}</p>
            <ul className="why-checks" style={{ marginTop: 32 }}>
              {t.bullets.map((b, i) => <li key={i}>{b}</li>)}
            </ul>
            <p style={{ color: "var(--ink-2)", font: "400 15px/1.6 var(--font-sans)", margin: "28px 0 0", maxWidth: "50ch" }}>{t.lede2}</p>
            <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <Btn variant="primary" onClick={() => setRoute("contact")}>{c.submit} <span className="arr">→</span></Btn>
              <Btn variant="ghost" onClick={() => setRoute("expertise")}>{lang === "en" ? "see expertise" : "uzmanlığı gör"} <span className="arr">→</span></Btn>
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}

/* ----- NEWSLETTER CARD ------------------------------------ */
function Newsletter({ lang }) {
  const t = window.STR[lang].newsletter;
  return (
    <Section tight>
      <Container>
        <div className="nl-card">
          <h3>{t.title}</h3>
          <p>{t.lede}</p>
          <form className="nl-form" onSubmit={(e) => e.preventDefault()}>
            <input type="email" placeholder={t.placeholder} />
            <Btn variant="primary"><span>{t.cta}</span></Btn>
          </form>
        </div>
      </Container>
    </Section>
  );
}

/* ============================================================
   HOME — composes the page
   ============================================================ */
function Home({ variant, lang, setRoute }) {
  return (
    <div className="route-anim" key={variant + lang}>
      {variant === "bold" ? <HeroBold lang={lang} setRoute={setRoute} /> : <HeroSafe lang={lang} setRoute={setRoute} />}
      <PillStrip lang={lang} />
      <Services lang={lang} setRoute={setRoute} />
      <ModulesBlock lang={lang} />
      {variant === "bold"
        ? <Marquee items={["ITIL4 aligned", "ServiceCore platform", "Enterprise grade", "Since 2014", "İstanbul · EMEA", "Passionate · Dedicated · Professional"]} big />
        : null}
      <Standards lang={lang} setRoute={setRoute} />
      <StatsBand lang={lang} />
      <ClientsMarquee lang={lang} />
      <Pillars lang={lang} />
      <WhyAndContact lang={lang} setRoute={setRoute} />
      <Newsletter lang={lang} />
    </div>
  );
}

Object.assign(window, { Home });