/* global React, Ic, Wordmark, PlaceholderImg, useT */
const { useState, useEffect } = React;

// ===== Language Switcher =====
function LangSwitch() {
  const { lang, setLang } = useT();
  return (
    <div className="lang-switch" role="group" aria-label="Language">
      <button
        type="button"
        className={lang === "en" ? "active" : ""}
        onClick={() => setLang("en")}
        aria-pressed={lang === "en"}
      >EN</button>
      <button
        type="button"
        className={lang === "lv" ? "active" : ""}
        onClick={() => setLang("lv")}
        aria-pressed={lang === "lv"}
      >LV</button>
    </div>
  );
}

// ===== NAV =====
function Nav() {
  const { t } = useT();
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav${scrolled ? " scrolled" : ""}`}>
      <div className="shell nav-inner">
        <div className="nav-links">
          <a href="#how">{t("nav.how")}</a>
          <a href="#services">{t("nav.services")}</a>
          <a href="#who">{t("nav.who")}</a>
          <a href="#faq">{t("nav.faq")}</a>
        </div>
        <div className="nav-right">
          <LangSwitch />
          <a href="#request" className="btn btn-primary" style={{ padding: "10px 18px", fontSize: 14 }}>
            {t("nav.cta")} <span className="arrow"><Ic.arrow width="14" height="14" /></span>
          </a>
        </div>
      </div>
    </nav>
  );
}

// ===== HERO =====
function Hero() {
  const { t } = useT();
  return (
    <header id="top" className="hero" data-screen-label="01 Hero">
      <div className="shell">
        <div className="hero-grid">
          <div>
            <span className="eyebrow"><span className="dot"></span>{t("hero.eyebrow")}</span>
            <h1 className="display hero-headline">
              {t("hero.h1_pre")}<em>{t("hero.h1_em")}</em>{t("hero.h1_post")}
            </h1>
            <p className="hero-sub">{t("hero.sub")}</p>
            <div className="hero-ctas">
              <a href="#request" className="btn btn-primary">
                {t("hero.cta1")} <span className="arrow"><Ic.arrow /></span>
              </a>
              <a href="#request" className="btn btn-ghost">{t("hero.cta2")}</a>
            </div>
            <div className="hero-pill-row">
              <span className="hero-pill lead">{t("hero.pill_lead")}</span>
              <span className="hero-pill">{t("hero.pill_friends")}</span>
              <span className="hero-pill">{t("hero.pill_corp")}</span>
              <span className="hero-pill">{t("hero.pill_sports")}</span>
              <span className="hero-pill">{t("hero.pill_events")}</span>
            </div>
          </div>

          <div className="hero-side">
            <div className="hero-img">
              <img src="assets/hero.png" alt={t("hero.img_alt")} />
            </div>
            <div className="hero-img-tag">{t("hero.tag")}</div>
          </div>
        </div>

        <div className="hero-marquee">
          <span className="item"><span className="dot"></span>{t("hero.marquee1")}</span>
          <span className="item"><span className="dot"></span>{t("hero.marquee2")}</span>
          <span className="item"><span className="dot"></span>{t("hero.marquee3")}</span>
          <span className="item"><span className="dot"></span>{t("hero.marquee4")}</span>
        </div>
      </div>
    </header>
  );
}

// ===== DIFFERENTIATOR =====
function Differentiator() {
  const { t } = useT();
  return (
    <section className="section section-dark" data-screen-label="02 Not a tour guide">
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="eyebrow" style={{ color: "rgba(244,241,232,.6)" }}>
              <span className="dot"></span>{t("diff.eyebrow")}
            </span>
            <h2 className="display h-title" style={{ marginTop: 18 }}>
              {t("diff.title_pre")}<br/>
              <em style={{ fontStyle: "normal", color: "var(--accent)", fontVariationSettings: '"wdth" 80' }}>{t("diff.title_em")}</em>
            </h2>
          </div>
          <div className="lead">
            <p>{t("diff.lead")}</p>
          </div>
        </div>

        <div className="diff-grid">
          <div className="diff-card">
            <div className="icon-wrap"><Ic.comms /></div>
            <span className="num">{t("diff.c1.tag")}</span>
            <h3>{t("diff.c1.h")}</h3>
            <p>{t("diff.c1.p")}</p>
          </div>
          <div className="diff-card">
            <div className="icon-wrap"><Ic.group /></div>
            <span className="num">{t("diff.c2.tag")}</span>
            <h3>{t("diff.c2.h")}</h3>
            <p>{t("diff.c2.p")}</p>
          </div>
          <div className="diff-card">
            <div className="icon-wrap"><Ic.wrench /></div>
            <span className="num">{t("diff.c3.tag")}</span>
            <h3>{t("diff.c3.h")}</h3>
            <p>{t("diff.c3.p")}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== SERVICES =====
function Services() {
  const { t } = useT();
  const services = [
    { icon: <Ic.fork />,     title: t("serv.s1.t"), body: t("serv.s1.b") },
    { icon: <Ic.activity />, title: t("serv.s2.t"), body: t("serv.s2.b") },
    { icon: <Ic.car />,      title: t("serv.s3.t"), body: t("serv.s3.b") },
    { icon: <Ic.globe />,    title: t("serv.s4.t"), body: t("serv.s4.b") },
    { icon: <Ic.alert />,    title: t("serv.s5.t"), body: t("serv.s5.b") },
    { icon: <Ic.calendar />, title: t("serv.s6.t"), body: t("serv.s6.b") },
  ];
  return (
    <section id="services" className="section" data-screen-label="03 Services">
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>{t("serv.eyebrow")}</span>
            <h2 className="display h-title" style={{ marginTop: 18 }}>
              {t("serv.title_l1")}<br/>{t("serv.title_l2")}
            </h2>
          </div>
          <div className="lead">
            <p>{t("serv.lead")}</p>
          </div>
        </div>

        <div className="serv-grid">
          {services.map((s, i) => (
            <div className="serv-card" key={i}>
              <div className="serv-icon">{s.icon}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== WHO IT'S FOR =====
function WhoFor() {
  const { t } = useT();
  return (
    <section id="who" className="section section-paper" data-screen-label="04 Who it's for">
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>{t("who.eyebrow")}</span>
            <h2 className="display h-title" style={{ marginTop: 18 }}>
              {t("who.title_pre")}<em style={{ fontStyle: "normal", color: "var(--accent-text)", fontVariationSettings: '"wdth" 80' }}>{t("who.title_em")}</em>{t("who.title_post")}
            </h2>
          </div>
          <div className="lead">
            <p>{t("who.lead")}</p>
          </div>
        </div>

        <div className="who-grid">
          <div className="who-card featured">
            <div className="who-top">
              <span>{t("who.w1.tag")}</span>
            </div>
            <h3>{t("who.w1.t")}</h3>
            <p className="who-sub">{t("who.w1.p")}</p>
          </div>
          <div className="who-card featured-dark">
            <div className="who-top">
              <span>02</span>
            </div>
            <h3>{t("who.w2.t")}</h3>
            <p className="who-sub">{t("who.w2.p")}</p>
          </div>

          <div className="who-card">
            <div className="who-top"><span>03</span></div>
            <h3>{t("who.w3.t")}</h3>
            <p className="who-sub">{t("who.w3.p")}</p>
          </div>
          <div className="who-card">
            <div className="who-top"><span>04</span></div>
            <h3>{t("who.w4.t")}</h3>
            <p className="who-sub">{t("who.w4.p")}</p>
          </div>
          <div className="who-card">
            <div className="who-top"><span>05</span></div>
            <h3>{t("who.w5.t")}</h3>
            <p className="who-sub">{t("who.w5.p")}</p>
          </div>
          <div className="who-card">
            <div className="who-top"><span>06</span></div>
            <h3>{t("who.w6.t")}</h3>
            <p className="who-sub">{t("who.w6.p")}</p>
          </div>
          <div className="who-card">
            <div className="who-top"><span>07</span></div>
            <h3>{t("who.w7.t")}</h3>
            <p className="who-sub">{t("who.w7.p")}</p>
          </div>
          <div className="who-card">
            <div className="who-top"><span>08</span></div>
            <h3>{t("who.w8.t")}</h3>
            <p className="who-sub">{t("who.w8.p")}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== HOW IT WORKS =====
function HowItWorks() {
  const { t } = useT();
  const steps = [
    { n: "01", t: t("how.s1.t"), b: t("how.s1.b") },
    { n: "02", t: t("how.s2.t"), b: t("how.s2.b") },
    { n: "03", t: t("how.s3.t"), b: t("how.s3.b") },
    { n: "04", t: t("how.s4.t"), b: t("how.s4.b") },
  ];
  return (
    <section id="how" className="section" data-screen-label="05 How it works">
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>{t("how.eyebrow")}</span>
            <h2 className="display h-title" style={{ marginTop: 18 }}>
              {t("how.title_l1")}<br/>{t("how.title_l2")}
            </h2>
          </div>
          <div className="lead">
            <p>{t("how.lead")}</p>
          </div>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <span className="step-num">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Differentiator, Services, WhoFor, HowItWorks });