// Hero section — rotating title, status chip, summary.

function RotatingRole({ intervalMs = 2200 }) {
  const { t, lang } = useT();
  const roles = [t("role.analyst"), t("role.bi"), t("role.auto")];
  const [i, setI] = React.useState(0);
  const [anim, setAnim] = React.useState(true);
  React.useEffect(() => { setI(0); }, [lang]);
  React.useEffect(() => {
    const tm = setInterval(() => {
      setAnim(false);
      setTimeout(() => { setI((x) => (x + 1) % roles.length); setAnim(true); }, 280);
    }, intervalMs);
    return () => clearInterval(tm);
  }, [intervalMs, lang]);
  return (
    <span className="relative inline-block align-baseline" style={{ minWidth: "18ch" }}>
      <span
        className="inline-block italic serif whitespace-nowrap"
        style={{
          color: "var(--accent)",
          transition: "transform 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.4s, filter 0.4s",
          transform: anim ? "translateY(0)" : "translateY(-0.3em)",
          opacity: anim ? 1 : 0,
          filter: anim ? "blur(0)" : "blur(6px)",
        }}
      >
        {roles[i]}
      </span>
    </span>
  );
}

function StatusPill() {
  const { t } = useT();
  return (
    <div className="chip" style={{ borderColor: "var(--accent-line)", color: "var(--accent-ink)", background: "var(--accent-soft)" }}>
      <span className="dot pulse" />
      {t("hero.availability")}
    </div>
  );
}

function HeroMeta() {
  const { t } = useT();
  const items = [
    { k: t("hero.meta.location"), v: PROFILE.location },
    { k: t("hero.meta.experience"), v: t("hero.meta.years") },
    { k: t("hero.meta.focus"), v: t("hero.meta.focus.v") },
  ];
  return (
    <div className="grid grid-cols-3 gap-0 hairline-t hairline-b">
      {items.map((it, idx) => (
        <div key={it.k} className={`py-4 ${idx !== 0 ? "pl-6 border-l border-white/5" : ""}`} style={{borderColor:"var(--border)"}}>
          <div className="mono text-[10px] uppercase tracking-[0.14em] t-dim mb-1">{it.k}</div>
          <div className="text-[14px] text-[color:var(--text)]">{it.v}</div>
        </div>
      ))}
    </div>
  );
}

function HeroVisual() {
  // decorative data-panel placeholder, no hand-drawn illustrations
  const R = window.Recharts;
  const { t } = useT();
  return (
    <Tilt className="rounded-2xl h-full w-full" max={4}>
      <div className="glass-strong rounded-2xl p-5 h-full w-full relative overflow-hidden">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <span className="w-2 h-2 rounded-full" style={{background:"#E74C3C"}} />
            <span className="w-2 h-2 rounded-full" style={{background:"#F1C40F"}} />
            <span className="w-2 h-2 rounded-full" style={{background:"var(--accent)"}} />
          </div>
          <div className="mono text-[10px] t-dim">{t("visual.file")}</div>
          <Icon name="maximize-2" size={14} className="t-dim" />
        </div>

        <div className="grid grid-cols-6 gap-3 h-[calc(100%-32px)]">
          {/* KPI tiles */}
          <div className="col-span-2 hairline rounded-lg p-3 flex flex-col justify-between" style={{background:"var(--surface-0)"}}>
            <div className="mono text-[10px] t-dim uppercase tracking-wider">{t("visual.sla")}</div>
            <div className="flex items-baseline">
              <span className="serif text-[36px] leading-none">−35</span>
              <span className="serif text-[22px] leading-none t-accent ml-1">%</span>
            </div>
            <div className="mono text-[10px] t-dim">{t("visual.slaNote")}</div>
          </div>
          <div className="col-span-2 hairline rounded-lg p-3 flex flex-col justify-between" style={{background:"var(--surface-0)"}}>
            <div className="mono text-[10px] t-dim uppercase tracking-wider">{t("visual.claims")}</div>
            <div className="flex items-baseline gap-1.5">
              <span className="serif text-[36px] leading-none">25K</span>
              <span className="mono text-[11px] t-mute">+</span>
            </div>
            <div className="mono text-[10px] t-dim">{t("visual.claimsNote")}</div>
          </div>
          <div className="col-span-2 hairline rounded-lg p-3 flex flex-col justify-between" style={{background:"var(--surface-0)"}}>
            <div className="mono text-[10px] t-dim uppercase tracking-wider">{t("visual.savings")}</div>
            <div className="flex items-baseline gap-1.5">
              <span className="serif text-[36px] leading-none">12h</span>
              <span className="mono text-[11px] t-mute">{t("visual.savingsUnit")}</span>
            </div>
            <div className="mono text-[10px] t-dim">{t("visual.savingsNote")}</div>
          </div>

          {/* Chart row — SLA reaction time, before/after */}
          <div className="col-span-6 hairline rounded-lg p-3 relative overflow-hidden" style={{background:"var(--surface-1)"}}>
            <div className="flex items-center justify-between mb-1.5">
              <div className="mono text-[10px] t-dim uppercase tracking-wider">{t("visual.errors")}</div>
              <div className="flex items-center gap-3 mono text-[9.5px]">
                <span className="flex items-center gap-1"><span className="w-2 h-[2px]" style={{background:"rgba(14,21,19,0.35)", borderTop:"1px dashed rgba(14,21,19,0.35)"}} /><span className="t-dim">baseline</span></span>
                <span className="flex items-center gap-1"><span className="w-2 h-[2px]" style={{background:"var(--accent)"}} /><span className="t-mute">post-dashboard</span></span>
                <span className="t-accent">{t("visual.errorsDelta")}</span>
              </div>
            </div>
            <div className="absolute inset-x-0 bottom-0 h-[75%]">
              {R && (
                <R.ResponsiveContainer width="100%" height="100%">
                  <R.AreaChart data={SLA_SERIES} margin={{ top: 12, right: 18, left: 18, bottom: 18 }}>
                    <defs>
                      <linearGradient id="gSla" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="var(--accent)" stopOpacity={0.35} />
                        <stop offset="100%" stopColor="var(--accent)" stopOpacity={0} />
                      </linearGradient>
                    </defs>
                    <R.CartesianGrid stroke="rgba(14,21,19,0.06)" vertical={false} />
                    <R.XAxis dataKey="m" tick={{ fontSize: 9, fill: "var(--text-dim)", fontFamily: "Geist Mono" }} axisLine={false} tickLine={false} />
                    <R.YAxis hide domain={[4, 9]} />
                    <R.Area type="monotone" dataKey="before" stroke="rgba(14,21,19,0.4)" strokeWidth={1.25} strokeDasharray="4 3" fill="transparent" dot={false} connectNulls={false} isAnimationActive={true} animationDuration={900} />
                    <R.Area type="monotone" dataKey="after" stroke="var(--accent)" strokeWidth={1.8} fill="url(#gSla)" dot={{ r: 2.5, fill: "var(--accent)", strokeWidth: 0 }} activeDot={{ r: 4 }} isAnimationActive={true} animationDuration={1200} animationEasing="ease-out" />
                  </R.AreaChart>
                </R.ResponsiveContainer>
              )}
            </div>
          </div>
        </div>

        {/* corner accents */}
        <div className="absolute top-2 right-2 mono text-[9px] t-dim">{t("visual.live")}</div>
      </div>
    </Tilt>
  );
}

function StickyNav() {
  const [scrolled, setScrolled] = React.useState(false);
  const { t } = useT();
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`site-header ${scrolled ? "scrolled" : ""}`}>
      <div className="max-w-[1320px] mx-auto px-6 md:px-10 h-[68px] flex items-center justify-between gap-4">
        <a href="#top" className="flex items-center gap-3 shrink-0">
          <div className="w-9 h-9 rounded-md hairline flex items-center justify-center" style={{background:"var(--surface-0)"}}>
            <span className="serif text-[20px]" style={{color:"var(--accent)"}}>ag</span>
          </div>
          <div className="hidden sm:flex flex-col leading-tight">
            <span className="serif text-[17px] tracking-[-0.01em]" style={{color:"var(--text)"}}>Ana García</span>
            <span className="mono text-[9.5px] t-dim uppercase tracking-[0.18em]">{t("nav.badge")}</span>
          </div>
        </a>
        <nav className="hidden md:flex items-center gap-8 nav-links">
          <a href="#work">{t("nav.work")}</a>
          <a href="#stack">{t("nav.stack")}</a>
          <a href="#edu">{t("nav.edu")}</a>
          <a href="#contact">{t("nav.contact")}</a>
        </nav>
        <div className="flex items-center gap-3 shrink-0">
          <LangToggle />
          <a href={CV_URL} download="Ana-Garcia-CV.pdf" className="chip nav-cta hidden sm:inline-flex" style={{borderColor:"var(--border-strong)", color:"var(--text)", background:"var(--surface-0)"}}>
            <Icon name="download" size={12} /> {t("nav.cv")}
          </a>
          <a href="#contact" className="chip nav-cta" style={{borderColor:"var(--accent-line)", color:"var(--accent)", background:"var(--accent-soft)"}}>
            <Icon name="arrow-up-right" size={12} /> {t("nav.hire")}
          </a>
        </div>
      </div>
    </header>
  );
}

function Hero() {
  const { t } = useT();
  return (
    <section id="top" className="relative min-h-[calc(100svh-64px)] overflow-hidden bg-grid noise">
      <div className="relative z-10 max-w-[1320px] mx-auto px-6 md:px-10 pt-14 md:pt-20 grid grid-cols-12 gap-6 md:gap-10">
        <div className="col-span-12 lg:col-span-7">
          <Reveal>
            <StatusPill />
          </Reveal>

          <Reveal delay={0.06}>
            <h1 className="serif mt-6 text-[84px] md:text-[132px] leading-[0.92] tracking-[-0.02em]" style={{textWrap:"balance"}}>
              Ana<br/>García.
            </h1>
          </Reveal>

          <Reveal delay={0.12}>
            <div className="mt-6 text-[22px] md:text-[28px] leading-snug">
              <span className="t-mute">{t("hero.soy")}</span>
              <RotatingRole intervalMs={TWEAKS.titleRotationMs} />
            </div>
          </Reveal>

          <Reveal delay={0.18}>
            <p className="mt-8 max-w-xl text-[16px] leading-[1.7] t-mute">
              {t("hero.summary")}
            </p>
          </Reveal>

          <Reveal delay={0.24} className="mt-10">
            <div className="flex flex-wrap items-center gap-3">
              <a href="#work" className="group inline-flex items-center gap-2 px-5 py-3 rounded-full text-[13px] font-medium" style={{background:"var(--accent)", color:"#FFFFFF"}}>
                {t("hero.cta.work")}
                <Icon name="arrow-down-right" size={14} />
              </a>
              <a href="#contact" className="inline-flex items-center gap-2 px-5 py-3 rounded-full text-[13px] hairline transition" style={{background:"var(--surface-0)", color:"var(--text)"}}>
                <Icon name="mail" size={14} /> {t("hero.cta.mail")}
              </a>
              <div className="chip ml-1"><Icon name="map-pin" size={11} /> {PROFILE.location}</div>
            </div>
          </Reveal>

          <Reveal delay={0.32} className="mt-14 max-w-xl">
            <HeroMeta />
          </Reveal>
        </div>

        <div className="col-span-12 lg:col-span-5 min-h-[420px] lg:min-h-[560px]">
          <Reveal y={32} delay={0.1} className="h-full">
            <HeroVisual />
          </Reveal>
        </div>
      </div>

      {/* scroll cue */}
      <div className="relative z-10 max-w-[1320px] mx-auto px-6 md:px-10 mt-16 md:mt-24 pb-10 flex items-center justify-between">
        <div className="mono text-[10px] t-dim uppercase tracking-[0.2em]">{t("hero.scroll")}</div>
        <div />
      </div>
    </section>
  );
}

Object.assign(window, { Hero });