// ============================================================
// Thiago Argel Portfolio — App
// ============================================================

const { useState, useEffect, useRef, useMemo, useCallback } = React;
const DATA = window.PORTFOLIO_DATA;

// ----- i18n + content helpers -----
const t = (val, lang) => {
  if (val == null) return "";
  if (typeof val === "string") return val;
  if (Array.isArray(val)) return val.map((v, i) => renderRich(v, lang, i));
  if (typeof val === "object" && (val.en || val.es)) return val[lang] ?? val.en;
  return val;
};
// Render an array of string | {italic:"..."} fragments
function renderRich(node, lang, key) {
  if (typeof node === "string") return <React.Fragment key={key}>{node}</React.Fragment>;
  if (node && node.italic) return <span key={key} className="italic-word">{t(node.italic, lang)}</span>;
  return null;
}
function Rich({ value, lang }) {
  // value is an array of fragments (some objects {italic} translated already via t())
  if (Array.isArray(value)) {
    return <>{value.map((node, i) => renderRich(node, lang, i))}</>;
  }
  return <>{value}</>;
}

// ----- Theme -----
function useTheme() {
  const [theme, setTheme] = useState(() => {
    if (typeof window === "undefined") return "dark";
    return localStorage.getItem("ta-theme") || "dark";
  });
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem("ta-theme", theme);
  }, [theme]);
  return [theme, setTheme];
}

// ----- Lang -----
function useLang() {
  const [lang, setLang] = useState(() => {
    if (typeof window === "undefined") return "en";
    return localStorage.getItem("ta-lang") || "en";
  });
  useEffect(() => {
    document.documentElement.setAttribute("lang", lang);
    localStorage.setItem("ta-lang", lang);
  }, [lang]);
  return [lang, setLang];
}

// ----- ScrollSpy / reveal observer -----
function useReveal() {
  useEffect(() => {
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -10% 0px" }
    );
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

function useScrollSpy(ids) {
  const [active, setActive] = useState(ids[0]);
  useEffect(() => {
    const handler = () => {
      const y = window.scrollY + 200;
      let current = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) current = id;
      }
      setActive(current);
    };
    handler();
    window.addEventListener("scroll", handler, { passive: true });
    return () => window.removeEventListener("scroll", handler);
  }, [ids.join(",")]);
  return active;
}

// ============================================================
// HEADER
// ============================================================
function Header({ lang, setLang, theme, setTheme, active, onNavClick, openMobile }) {
  const [scrolled, setScrolled] = useState(false);
  const navRef = useRef(null);
  const [pill, setPill] = useState({ left: 0, width: 0, opacity: 0 });

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    if (!navRef.current) return;
    const btn = navRef.current.querySelector(`button[data-id="${active}"]`);
    if (btn) {
      const rect = btn.getBoundingClientRect();
      const parent = navRef.current.getBoundingClientRect();
      setPill({ left: rect.left - parent.left, width: rect.width, opacity: 1 });
    } else {
      setPill((p) => ({ ...p, opacity: 0 }));
    }
  }, [active, lang]);

  return (
    <header className={`header ${scrolled ? "is-scrolled" : ""}`}>
      <a className="brand" href="#top" onClick={(e) => { e.preventDefault(); onNavClick("top"); }}>
        <div className="brand-name">{DATA.profile.name}</div>
        <div className="brand-role">{t(DATA.profile.short_role, lang)}</div>
      </a>

      <nav className="nav-inline" ref={navRef} aria-label="Primary">
        <div className="nav-pill-bg" style={{ left: pill.left, width: pill.width, opacity: pill.opacity }} />
        {DATA.nav.map((n) => (
          <button
            key={n.id}
            data-id={n.id}
            className={active === n.id ? "is-active" : ""}
            onClick={() => onNavClick(n.id)}
          >
            <span>{t(n.label, lang)}</span>
          </button>
        ))}
      </nav>

      <div className="header-actions">
        <div className="toggle-group" role="group" aria-label="Language">
          <button className={lang === "en" ? "is-active" : ""} onClick={() => setLang("en")}>EN</button>
          <button className={lang === "es" ? "is-active" : ""} onClick={() => setLang("es")}>ES</button>
        </div>
        <button
          className="icon-btn"
          aria-label="Toggle theme"
          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
        >
          {theme === "dark" ? <SunIcon /> : <MoonIcon />}
        </button>
        <a className="header-link linkedin" href="https://www.linkedin.com/in/thiago-argel-3206563a5/" target="_blank" rel="noreferrer">
          LinkedIn <ArrowIcon className="arrow" />
        </a>
        <a className="header-link resume" href={lang === "es" ? "assets/cv-es.pdf" : "assets/cv-en.pdf"} target="_blank" rel="noreferrer">
          {lang === "es" ? "Curriculum" : "Resume"} <ArrowIcon className="arrow" />
        </a>
        <button
          className="icon-btn mobile-menu-btn"
          onClick={openMobile}
          aria-label="Open menu"
        >
          <MenuIcon />
        </button>
      </div>
    </header>
  );
}

// ============================================================
// MOBILE MENU
// ============================================================
function MobileMenu({ open, onClose, lang, setLang, theme, setTheme, onNavClick }) {
  return (
    <div className={`mobile-menu ${open ? "open" : ""}`} aria-hidden={!open}>
      <div className="mobile-menu-head">
        <div className="brand">
          <div className="brand-name">{DATA.profile.name}</div>
          <div className="brand-role">{t(DATA.profile.short_role, lang)}</div>
        </div>
        <button className="icon-btn" onClick={onClose} aria-label="Close menu">
          <CloseIcon />
        </button>
      </div>
      <nav>
        {DATA.nav.map((n) => (
          <a
            key={n.id}
            href={`#${n.id}`}
            onClick={(e) => { e.preventDefault(); onClose(); setTimeout(() => onNavClick(n.id), 200); }}
          >
            {t(n.label, lang)}
          </a>
        ))}
      </nav>
      <div className="mobile-menu-foot">
        <div className="toggle-group">
          <button className={lang === "en" ? "is-active" : ""} onClick={() => setLang("en")}>EN</button>
          <button className={lang === "es" ? "is-active" : ""} onClick={() => setLang("es")}>ES</button>
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <button className="icon-btn" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
            {theme === "dark" ? <SunIcon /> : <MoonIcon />}
          </button>
          <a className="header-link" href="https://www.linkedin.com/in/thiago-argel-3206563a5/" target="_blank" rel="noreferrer">LinkedIn <ArrowIcon className="arrow" /></a>
          <a className="header-link" href="https://github.com/argelthiagoj-alt" target="_blank" rel="noreferrer">GitHub <ArrowIcon className="arrow" /></a>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// HERO
// ============================================================
function Hero({ lang, onNavClick }) {
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="window reveal">
          <div className="window-chrome">
            <div className="traffic">
              <span className="dot red" /><span className="dot yellow" /><span className="dot green" />
            </div>
            <div className="window-title">argelthiago.dev  —  Portfolio</div>
          </div>

          <div className="window-body">
            <div className="hero-availability">
              <span className="pulse" />
              <span>{t(DATA.profile.availability, lang)}</span>
            </div>

            <h1 className="hero-headline">
              <Rich value={DATA.hero.headline[lang]} lang={lang} />
            </h1>

            <div className="hero-footer">
              <div className="hero-meta">
                <div className="hero-meta-primary">{t(DATA.profile.based_short, lang)}</div>
                <div className="hero-meta-secondary">{t(DATA.profile.bg, lang)}</div>
              </div>
              <div className="hero-ctas">
                <button className="btn primary" onClick={() => onNavClick("work")}>
                  {t(DATA.hero.cta_primary, lang)} <ArrowIcon className="arrow" />
                </button>
                <button className="btn ghost" onClick={() => onNavClick("contact")}>
                  {t(DATA.hero.cta_secondary, lang)}
                </button>
              </div>
            </div>
          </div>
        </div>

        <TrustStrip lang={lang} />

        <div className="scroll-indicator reveal">
          <span>{t(DATA.hero.scroll_label, lang)}</span>
          <span className="line" />
        </div>
      </div>
    </section>
  );
}

function TrustStrip({ lang }) {
  return (
    <div className="trust-strip reveal">
      <div className="trust-strip-track">
        {DATA.trust[lang].map((s, i) => (
          <span key={i} className="trust-item">
            <span className="glyph">0{i + 1}</span>
            {s}
          </span>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// SECTION LABEL helper
// ============================================================
function SectionLabel({ num, children }) {
  return (
    <div className="section-label reveal">
      <span className="glyph">◍</span>
      <span className="num">{num}</span>
      <span>—</span>
      <span>{children}</span>
      <span className="rule" />
    </div>
  );
}

// ============================================================
// WORK
// ============================================================
function Work({ lang }) {
  return (
    <section id="work" className="block">
      <div className="container">
        <SectionLabel num="01">{t(DATA.work.label, lang)}</SectionLabel>
        <h2 className="section-title reveal">
          <Rich value={DATA.work.title[lang]} lang={lang} />
        </h2>
        <p className="section-lede reveal">{t(DATA.work.lede, lang)}</p>

        <div className="projects">
          {DATA.projects.map((p, i) => (
            <Project key={p.slug} project={p} lang={lang} reverse={i % 2 === 1} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Project({ project, lang, reverse, index }) {
  const num = String(index + 1).padStart(2, "0");
  return (
    <article className={`project ${reverse ? "reverse" : ""}`}>
      <div className="project-info reveal">
        <span className={`project-tag ${project.status_class || ""}`}>
          <span className="dot-sm" />
          <span>{t(project.type, lang)}  ·  {t(project.status, lang)}</span>
        </span>
        <p className="project-category">{num} — {t(project.category, lang)}</p>
        <h3 className="project-title">{project.title}</h3>
        <p className="project-desc">{t(project.desc, lang)}</p>
        <div className="project-stack">
          {project.stack.map((s) => <span key={s} className="chip">{s}</span>)}
        </div>
        <dl className="project-meta-row">
          <dt>Role</dt><dd>{t(project.role, lang)}</dd>
          <dt>Highlight</dt><dd>{t(project.highlight, lang)}</dd>
        </dl>
        <div className="project-cta-row">
          <a className="text-link" href={project.live} target="_blank" rel="noreferrer">
            {lang === "es" ? "Sitio en vivo" : "Live site"} <ArrowIcon className="arrow" />
          </a>
          {project.case_study ? (
            <a className="text-link" href={t(project.case_study, lang)} target="_blank" rel="noreferrer">
              {lang === "es" ? "Caso de estudio (PDF)" : "Case study (PDF)"} <ArrowIcon className="arrow" />
            </a>
          ) : (
            <a className="text-link muted" href="#" onClick={(e) => e.preventDefault()}>
              {lang === "es" ? "Caso de estudio (pronto)" : "Case study (soon)"}
            </a>
          )}
        </div>
      </div>

      <div className="project-frame reveal">
        <div className="project-frame-bar">
          <div className="traffic">
            <span className="dot red" /><span className="dot yellow" /><span className="dot green" />
          </div>
        </div>
        <div className="project-frame-body">
          <ProjectPreview project={project} lang={lang} />
        </div>
      </div>
    </article>
  );
}

function ProjectPreview({ project, lang }) {
  const pv = project.preview;
  const h = (
    <h4 className="preview-h">
      <Rich value={pv.h[lang].map((n) => (n && n.italic ? { italic: t(n.italic, lang) } : n))} lang={lang} />
    </h4>
  );
  const eyebrow = <span className="preview-eyebrow">{t(pv.eyebrow, lang)}</span>;
  const pills = (
    <div className="preview-pill-row">
      {pv.pills.map((p) => <span key={p} className="preview-pill">{p}</span>)}
    </div>
  );

  if (pv.layout === "marketplace") {
    return (
      <div className="project-preview preview-marketplace">
        {eyebrow}
        {h}
        <div className="preview-grid">
          {pv.tiles.map((tone, i) => (
            <div key={i} className={`preview-tile scene-${tone}`}>
              <div className="tile-overlay">
                <span className="tile-label">{tone === "lake" ? "Lago Nahuel" : tone === "forest" ? "Bosque Andino" : "Refugio Alpino"}</span>
                <span className="tile-meta">★ 4.9</span>
              </div>
            </div>
          ))}
        </div>
        <div className="preview-row">{pills}</div>
      </div>
    );
  }

  if (pv.layout === "shop") {
    return (
      <div className="project-preview preview-shop">
        {eyebrow}
        {h}
        <div className="shop-grid">
          {pv.items.map((it, i) => (
            <div key={i} className="shop-card">
              <div className={`shop-swatch sw-${it.swatch}`}>
                <span className="shop-tag">{i === 0 ? "NEW" : i === 1 ? "" : "—"}</span>
              </div>
              <div className="shop-meta">
                <span className="shop-name">{it.name}</span>
                <span className="shop-price">{it.price}</span>
              </div>
            </div>
          ))}
        </div>
        <div className="preview-row">{pills}</div>
      </div>
    );
  }

  if (pv.layout === "estate") {
    const l = pv.listing;
    return (
      <div className="project-preview preview-estate">
        {eyebrow}
        {h}
        <div className="estate-card">
          <div className="estate-photo">
            <svg viewBox="0 0 120 60" preserveAspectRatio="none" aria-hidden="true">
              <polygon points="10,55 60,15 110,55" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.18)" strokeWidth="0.5"/>
              <rect x="25" y="35" width="70" height="20" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.18)" strokeWidth="0.5"/>
              <rect x="40" y="42" width="8" height="13" fill="rgba(255,255,255,0.12)"/>
              <rect x="55" y="42" width="8" height="8" fill="rgba(255,255,255,0.12)"/>
              <rect x="70" y="42" width="10" height="8" fill="rgba(255,255,255,0.12)"/>
              <line x1="0" y1="55" x2="120" y2="55" stroke="rgba(255,255,255,0.2)" strokeWidth="0.4"/>
            </svg>
          </div>
          <div className="estate-meta">
            <div className="estate-meta-top">
              <span className="estate-name">{l.name}</span>
              <span className="estate-price">{l.price}</span>
            </div>
            <div className="estate-meta-bot">
              <span>{l.area}</span>
              <span className="dot-sep">·</span>
              <span>{l.rooms}</span>
            </div>
          </div>
        </div>
        <div className="preview-row">{pills}</div>
      </div>
    );
  }

  // fallback (legacy)
  return (
    <div className="project-preview">
      {eyebrow}{h}
      <div className="preview-row">{pills}</div>
    </div>
  );
}

// ============================================================
// SERVICES
// ============================================================
function Services({ lang }) {
  return (
    <section id="services" className="block">
      <div className="container">
        <SectionLabel num="02">{t(DATA.services.label, lang)}</SectionLabel>
        <h2 className="section-title reveal">
          <Rich value={DATA.services.title[lang]} lang={lang} />
        </h2>
        <p className="section-lede reveal">{t(DATA.services.lede, lang)}</p>

        <div className="services-grid reveal">
          {DATA.services.list.map((s, i) => (
            <div key={i} className="service-card">
              <span className="service-num">— {String(i + 1).padStart(2, "0")}</span>
              <h3 className="service-title">{t(s.title, lang)}</h3>
              <p className="service-desc">{t(s.desc, lang)}</p>
              <ul className="service-deliverables">
                {s.items[lang].map((d) => <li key={d}>{d}</li>)}
              </ul>
            </div>
          ))}
        </div>

        <p className="services-note reveal">
          <strong>{lang === "en" ? "Pricing — " : "Tarifas — "}</strong>
          {t(DATA.services.note, lang)}
        </p>
      </div>
    </section>
  );
}

// ============================================================
// SKILLS
// ============================================================
function Skills({ lang }) {
  return (
    <section id="skills" className="block">
      <div className="container">
        <SectionLabel num="03">{t(DATA.skills.label, lang)}</SectionLabel>
        <h2 className="section-title reveal">
          <Rich value={DATA.skills.title[lang]} lang={lang} />
        </h2>
        <p className="section-lede reveal">{t(DATA.skills.lede, lang)}</p>

        <div className="skills-grid reveal">
          {DATA.skills.categories.map((cat, i) => (
            <div key={i} className="skill-col">
              <div className="skill-cat">{t(cat.name, lang)}</div>
              {cat.items.map((it) => (
                <div key={it} className="skill-item">{it}</div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PROCESS
// ============================================================
function Process({ lang }) {
  return (
    <section id="process" className="block">
      <div className="container">
        <SectionLabel num="04">{t(DATA.process.label, lang)}</SectionLabel>
        <h2 className="section-title reveal">
          <Rich value={DATA.process.title[lang]} lang={lang} />
        </h2>
        <p className="section-lede reveal">{t(DATA.process.lede, lang)}</p>

        <div className="process-grid reveal">
          {DATA.process.steps.map((s, i) => (
            <div key={i} className="process-step">
              <div className="process-num">{String(i + 1).padStart(2, "0")}</div>
              <h3 className="process-title">{t(s.title, lang)}</h3>
              <p className="process-desc">{t(s.desc, lang)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// ABOUT
// ============================================================
function About({ lang }) {
  return (
    <section id="about" className="block">
      <div className="container">
        <SectionLabel num="05">{t(DATA.about.label, lang)}</SectionLabel>
        <h2 className="section-title reveal">
          <Rich value={DATA.about.title[lang]} lang={lang} />
        </h2>

        <div className="about">
          <aside className="about-aside reveal">
            <div className="about-portrait">
              <img src="assets/portrait.png" alt="Thiago Argel" />
              <span className="ph-overlay">
                <span>THIAGO ARGEL</span>
                <span>'26</span>
              </span>
            </div>
            <div className="about-fact-list">
              {DATA.about.facts.map((f, i) => (
                <div key={i} className="about-fact">
                  <span className="k">{t(f.k, lang)}</span>
                  <span className="v">{t(f.v, lang)}</span>
                </div>
              ))}
            </div>
          </aside>
          <div className="about-body reveal delay-1">
            {DATA.about.body[lang].map((para, i) => (
              <p key={i}><Rich value={para.map((n) => (n && n.italic ? { italic: t(n.italic, lang) } : n))} lang={lang} /></p>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CONTACT
// ============================================================
function Contact({ lang }) {
  const [state, setState] = useState({
    name: "", email: "", company: "", type: "", budget: "", message: ""
  });
  const [submitted, setSubmitted] = useState(false);
  const f = DATA.contact.form;

  function update(k, v) { setState((s) => ({ ...s, [k]: v })); }
  function submit(e) {
    e.preventDefault();
    if (!state.name || !state.email || !state.message) return;
    setSubmitted(true);
  }

  return (
    <section id="contact" className="block">
      <div className="container">
        <SectionLabel num="06">{t(DATA.contact.label, lang)}</SectionLabel>
        <h2 className="section-title reveal">
          <Rich value={DATA.contact.title[lang]} lang={lang} />
        </h2>
        <p className="section-lede reveal">{t(DATA.contact.lede, lang)}</p>

        <div className="contact">
          <aside className="contact-aside reveal">
            {DATA.contact.channels.map((c, i) => (
              <a key={i} className="contact-channel" href={c.href}>
                <div>
                  <div className="k">{t(c.k, lang)}</div>
                  <div className="v">{c.v}</div>
                </div>
                <ArrowIcon className="arrow" />
              </a>
            ))}
          </aside>

          {!submitted ? (
            <form className="contact-form reveal delay-1" onSubmit={submit}>
              <div className="field">
                <label>{t(f.name, lang)} *</label>
                <input value={state.name} onChange={(e) => update("name", e.target.value)} placeholder="Jane Doe" required />
              </div>
              <div className="field">
                <label>{t(f.email, lang)} *</label>
                <input type="email" value={state.email} onChange={(e) => update("email", e.target.value)} placeholder="jane@studio.com" required />
              </div>
              <div className="field full">
                <label>{t(f.company, lang)}</label>
                <input value={state.company} onChange={(e) => update("company", e.target.value)} placeholder="Acme Co." />
              </div>
              <div className="field">
                <label>{t(f.type, lang)}</label>
                <select value={state.type} onChange={(e) => update("type", e.target.value)}>
                  <option value="">—</option>
                  {DATA.contact.types[lang].map((o) => <option key={o}>{o}</option>)}
                </select>
              </div>
              <div className="field">
                <label>{t(f.budget, lang)}</label>
                <select value={state.budget} onChange={(e) => update("budget", e.target.value)}>
                  <option value="">—</option>
                  {DATA.contact.budgets[lang].map((o) => <option key={o}>{o}</option>)}
                </select>
              </div>
              <div className="field full">
                <label>{t(f.message, lang)} *</label>
                <textarea value={state.message} onChange={(e) => update("message", e.target.value)} placeholder={lang === "en" ? "Tell me about your project, goals and timeline…" : "Contame sobre tu proyecto, objetivos y plazos…"} required />
              </div>
              <div className="field full" style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
                <span style={{ color: "var(--text-mute)", fontSize: 12.5 }}>
                  {lang === "en" ? "I usually reply within 1–2 business days." : "Suelo responder en 1–2 días hábiles."}
                </span>
                <button className="btn primary" type="submit">
                  {t(f.submit, lang)} <ArrowIcon className="arrow" />
                </button>
              </div>
            </form>
          ) : (
            <div className="contact-success reveal">
              <div className="check"><CheckIcon /></div>
              <div>
                <h4>{t(DATA.contact.success.title, lang)}</h4>
                <p>{t(DATA.contact.success.desc, lang)}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function Footer({ lang }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="name">{DATA.profile.name}</div>
            <div className="meta">{t(DATA.profile.role, lang)}</div>
            <div className="meta" style={{ marginTop: 4 }}>{t(DATA.profile.location, lang)}</div>
          </div>
          <div className="footer-col">
            <h5>{t(DATA.footer.nav_title, lang)}</h5>
            <ul>
              {DATA.nav.map((n) => (
                <li key={n.id}><a href={`#${n.id}`}>{t(n.label, lang)}</a></li>
              ))}
            </ul>
          </div>
          <div className="footer-col">
            <h5>{t(DATA.footer.social_title, lang)}</h5>
            <ul>
              <li><a href="https://www.linkedin.com/in/thiago-argel-3206563a5/" target="_blank" rel="noreferrer">LinkedIn ↗</a></li>
              <li><a href="https://github.com/argelthiagoj-alt" target="_blank" rel="noreferrer">GitHub ↗</a></li>
              <li><a href="mailto:argelthiagoj@outlook.com">Email ↗</a></li>
              <li><a href="https://wa.me/5492994725561" target="_blank" rel="noreferrer">WhatsApp ↗</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>{t(DATA.footer.info_title, lang)}</h5>
            <ul>
              {DATA.footer.info.map((f, i) => (
                <li key={i} style={{ color: "var(--text-soft)" }}>
                  <span style={{ color: "var(--text-mute)" }}>{t(f.k, lang)}: </span>
                  {t(f.v, lang)}
                </li>
              ))}
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t(DATA.footer.legal, lang)}</span>
          <a className="mono" href="https://argelthiago.dev" target="_blank" rel="noreferrer">argelthiago.dev ↗</a>
        </div>
      </div>
    </footer>
  );
}

// ============================================================
// ICONS
// ============================================================
function ArrowIcon({ className }) {
  return (
    <svg className={className} width="11" height="11" viewBox="0 0 11 11" fill="none" aria-hidden="true">
      <path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function SunIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M12 2V4M12 20V22M4.93 4.93L6.34 6.34M17.66 17.66L19.07 19.07M2 12H4M20 12H22M4.93 19.07L6.34 17.66M17.66 6.34L19.07 4.93"
        stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
}
function MoonIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
    </svg>
  );
}
function MenuIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M4 7h16M4 17h16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
}
function CloseIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
}
function CheckIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M5 12.5l4.5 4.5L19 7.5" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// ============================================================
// APP
// ============================================================
function App() {
  const [theme, setTheme] = useTheme();
  const [lang, setLang] = useLang();
  const [mobileOpen, setMobileOpen] = useState(false);
  const navIds = useMemo(() => DATA.nav.map((n) => n.id), []);
  const active = useScrollSpy(navIds);
  useReveal();

  const onNavClick = useCallback((id) => {
    if (id === "top") {
      window.scrollTo({ top: 0, behavior: "smooth" });
      return;
    }
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  }, []);

  return (
    <div className="app">
      <div className="bg-field" />
      <Header
        lang={lang} setLang={setLang}
        theme={theme} setTheme={setTheme}
        active={active}
        onNavClick={onNavClick}
        openMobile={() => setMobileOpen(true)}
      />
      <MobileMenu
        open={mobileOpen}
        onClose={() => setMobileOpen(false)}
        lang={lang} setLang={setLang}
        theme={theme} setTheme={setTheme}
        onNavClick={onNavClick}
      />

      <main>
        <Hero lang={lang} onNavClick={onNavClick} />
        <Work     lang={lang} />
        <Services lang={lang} />
        <Skills   lang={lang} />
        <Process  lang={lang} />
        <About    lang={lang} />
        <Contact  lang={lang} />
      </main>

      <Footer lang={lang} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);