// Hero + About sections
function Hero({ t }) {
  return (
    <header id="top" className="hero">
      <div className="wrap">
        <div className="hero-meta">
          <span className="status">
            <span className="pulse"></span>
            {t.hero.status}
          </span>
          <span>{t.hero.role}</span>
          <span>{t.hero.location}</span>
          <span><LiveClock /></span>
        </div>

        <h1 className="hero-name">
          <span>{t.hero.name}</span>
          <span>{t.hero.surname}</span>
        </h1>

        <div className="hero-grid">
          <p className="hero-tagline">
            {t.hero.tagline.map((w, i) => {
              const isVerb = i === 0;
              return (
                <span key={i} className="word">
                  {isVerb ? <em className="serif">{w}</em> : w}
                </span>
              );
            })}
          </p>
          <div className="hero-side">
            <p className="hero-intro">{t.hero.intro}</p>
            <div className="hero-ctas">
              <a href="#projects" className="btn btn-primary" onClick={(e) => {
                e.preventDefault();
                const el = document.getElementById("projects");
                if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 40, behavior: "smooth" });
              }}>
                {t.hero.cta} <span className="arr">→</span>
              </a>
              <a href="#contact" className="btn" onClick={(e) => {
                e.preventDefault();
                const el = document.getElementById("contact");
                if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 40, behavior: "smooth" });
              }}>
                {t.nav.contact}
              </a>
            </div>
          </div>
        </div>

        <div className="hero-kpis">
          {t.hero.kpis.map((k, i) => (
            <div key={i} className="kpi">
              <div className="kpi-n">{k.n}</div>
              <div className="kpi-l">{k.l}</div>
            </div>
          ))}
        </div>
      </div>
    </header>
  );
}

function Marquee({ lang }) {
  const items = [
    "BigQuery", "dbt", "Apache Airflow", "Apache Iceberg", "Terraform",
    "Pub/Sub", "Cloud Run", "spaCy", "BERTopic", "HDBSCAN",
    "Streamlit", "MLflow", "Claude API", "PyTorch", "Pydantic v2",
  ];
  const doubled = [...items, ...items];
  return (
    <div className="strip">
      <div className="strip-track">
        {doubled.map((it, i) => <span key={i}>{it}</span>)}
      </div>
    </div>
  );
}

function About({ t }) {
  return (
    <section id="about">
      <div className="wrap">
        <div className="section-head">
          <span className="kicker">{t.about.kicker}</span>
          <Reveal as="h2">{t.about.title}</Reveal>
        </div>

        <div className="about-grid">
          <Reveal className="about-body">
            {t.about.body.map((p, i) => <p key={i}>{p}</p>)}
          </Reveal>
          <Reveal className="about-facts" delay={100}>
            {t.about.facts.map(([k, v], i) => (
              <div key={i} className="row">
                <span className="k">{k}</span>
                <span className="v">{v}</span>
              </div>
            ))}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Marquee, About });