/* ============================================================
   pages.jsx — Expertise & Contact pages
   ============================================================ */

function ExpertisePage({ lang, setRoute }) {
  const s = window.STR[lang].expertise;
  const cat = window.EXPERTISE[lang];
  const all = cat.groups.flatMap((g) => g.items.map((it) => ({ ...it, _group: g.label })));
  const [active, setActive] = React.useState(all[0].id);
  const cur = all.find((i) => i.id === active);

  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [active]);

  return (
    <div className="route-anim" key={lang}>
      <section className="exp-header">
        <Container wide>
          <Eyebrow>{s.eyebrow}</Eyebrow>
          <h1>{s.title_a} <span className="emph">{s.title_b}</span></h1>
          <p className="lede">{s.lede}</p>
        </Container>
      </section>

      <Section>
        <Container wide>
          <div className="exp-layout">
            <aside className="exp-nav">
              {cat.groups.map((g) => (
                <div className="exp-group" key={g.label}>
                  <div className="label">{g.label}</div>
                  <ul>
                    {g.items.map((it) => (
                      <li key={it.id}>
                        <button className={"exp-link" + (it.id === active ? " active" : "")} onClick={() => setActive(it.id)}>
                          <Icon name={it.icon} /> <span>{it.title}</span>
                        </button>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </aside>
            <div className="exp-body">
              <Eyebrow>{s.moduleLabel} · {cur._group}</Eyebrow>
              <h2>{cur.title}</h2>
              <p className="lede">{cur.desc}</p>

              <div className="exp-detail">
                <div>
                  <h4>{s.includes}</h4>
                  <ul>{cur.includes.map((x, i) => <li key={i}>{x}</li>)}</ul>
                </div>
                <div>
                  <h4>{s.typical}</h4>
                  <div className="exp-table">
                    {s.typicalRows.map((r) => (
                      <div className="er" key={r.k}>
                        <span className="k">{r.k}</span>
                        <span className="v">{r.v}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              <div style={{ marginTop: 40 }}>
                <Btn variant="primary" onClick={() => setRoute("contact")}>{s.discuss} <span className="arr">→</span></Btn>
              </div>
            </div>
          </div>
        </Container>
      </Section>
    </div>
  );
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
function ContactPage({ lang }) {
  const t = window.STR[lang].contact;
  const [sent, setSent] = React.useState(false);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [sent]);
  return (
    <div className="route-anim" key={lang}>
      <section className="contact-header">
        <Container wide>
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <h1>{t.title_a} <span className="emph">{t.title_b}</span></h1>
          <p className="lede">{t.lede}</p>
        </Container>
      </section>

      <Section>
        <Container wide>
          <div className="contact">
            <div>
              <h3 style={{ font: "500 28px/1.2 var(--font-serif)", margin: 0 }}>
                {lang === "en" ? "Talk to a human." : "Bir insanla konuşun."}
              </h3>
              <p style={{ color: "var(--ink-2)", font: "400 16px/1.6 var(--font-sans)", maxWidth: "44ch", marginTop: 12 }}>
                {lang === "en"
                  ? "Tell us where you are today — current tooling, team size, ITIL maturity. We'll come back with a focused next step within one business day."
                  : "Bugünkü durumunuzu kısaca paylaşın — kullanılan araç, ekip büyüklüğü, ITIL olgunluğu. Bir iş günü içinde odaklı bir sonraki adımı önereceğiz."}
              </p>
              <ul className="contact-list">
                <li><Icon name="phone" /><div><span className="k">{t.reach}</span><a href="tel:+905326004972">+90 532 600 49 72</a></div></li>
                <li><Icon name="mail" /><div><span className="k">Email</span><a href="mailto:contact@viraservices.com">contact@viraservices.com</a></div></li>
                <li><Icon name="clock" /><div><span className="k">{lang === "en" ? "Hours" : "Saatler"}</span><span>{t.hours}</span></div></li>
                <li><Icon name="map-pin" /><div><span className="k">{lang === "en" ? "Office" : "Ofis"}</span><span>{t.office}</span></div></li>
              </ul>
            </div>
            <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              {sent ? (
                <div className="thanks">
                  <Icon name="check-circle-2" />
                  <h4>{t.thanks}</h4>
                  <p>{t.thanksSub}</p>
                </div>
              ) : (
                <>
                  <div className="row">
                    <div className="field"><label>{t.name}</label><input defaultValue="Ayşe Yılmaz" /></div>
                    <div className="field"><label>{t.company}</label><input placeholder={lang === "en" ? "Enterprise name" : "Kurum adı"} /></div>
                  </div>
                  <div className="field full"><label>{t.email}</label><input type="email" defaultValue="ayse@enterprise.com.tr" /></div>
                  <div className="field full"><label>{t.message}</label><textarea rows="5" placeholder={t.msgPlaceholder}></textarea></div>
                  <div className="field full" style={{ marginBottom: 0 }}>
                    <Btn variant="primary"><span>{t.submit}</span> <span className="arr">→</span></Btn>
                  </div>
                </>
              )}
            </form>
          </div>
        </Container>
      </Section>
    </div>
  );
}

/* ============================================================
   ABOUT / TURQUALITY — simple placeholder pages
   ============================================================ */
function PlaceholderPage({ lang, route }) {
  const titles = {
    en: { about: "About VIRA", turquality: "Turquality Programme" },
    tr: { about: "Hakkımızda", turquality: "Turquality Programı" },
  };
  const lede = {
    en: { about: "Founders are subject-matter experts in ITIL4 / service management. The team brings combined 20+ years of enterprise IT experience to every engagement.",
          turquality: "VIRA Services is a TURQUALITY-supported brand. The programme backs Turkey's most promising enterprises in their internationalisation journey." },
    tr: { about: "Kurucular ITIL4 / servis yönetimi alanında uzmanlardır. Ekip, her çalışmaya birikmiş 20+ yıllık kurumsal BT tecrübesi getirir.",
          turquality: "VIRA Services bir TURQUALITY destekli markadır. Program, Türkiye'nin uluslararasılaşma yolunda en umut vadeden kurumlarını destekler." },
  };
  return (
    <div className="route-anim" key={route + lang}>
      <section className="exp-header">
        <Container wide>
          <Eyebrow>{lang === "en" ? "company" : "kurum"}</Eyebrow>
          <h1>{titles[lang][route]}</h1>
          <p className="lede">{lede[lang][route]}</p>
        </Container>
      </section>
      <Section>
        <Container narrow>
          <p style={{ color: "var(--ink-2)", font: "400 18px/1.7 var(--font-sans)", textWrap: "pretty" }}>
            {lang === "en"
              ? "This redesign focuses on the Home, Expertise and Contact flows. The About and Turquality pages would follow the same editorial system — section eyebrows, serif headlines, a single hero photograph, and a closing call-to-action."
              : "Bu redesign Home, Uzmanlık ve İletişim akışlarına odaklanır. Hakkımızda ve Turquality sayfaları da aynı editöryel sisteme göre tasarlanır — bölüm eyebrow'ları, serif başlıklar, tek bir hero fotoğrafı ve kapanış call-to-action."}
          </p>
        </Container>
      </Section>
    </div>
  );
}

Object.assign(window, { ExpertisePage, ContactPage, PlaceholderPage });