// Site components — Hugo BLASCO
const { useState, useEffect, useRef } = React;

// ============== ICONS ==============
const Icon = {
  Arrow: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
      <path d="M2 7h10M8 3l4 4-4 4" />
    </svg>
  ),
  Caret: ({ size = 10 }) => (
    <svg width={size} height={size} viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 4l3 3 3-3" />
    </svg>
  ),
  Logo: ({ size = 32 }) => (
    <svg width={size} height={size} viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="BLASCOTECH">
      <circle cx="36" cy="36" r="24" stroke="#0A0E1A" strokeWidth="6" fill="none"/>
      <path d="M 33 23 L 41 30 L 33 37" stroke="#1E40FF" strokeWidth="5.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
      <path d="M 33 37 L 41 44 L 33 51" stroke="#1E40FF" strokeWidth="5.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
    </svg>
  ),
  Diag: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
      <path d="M3 11L11 3M5 3h6v6" />
    </svg>
  ),
  Dot: ({ size = 8 }) => (
    <svg width={size} height={size} viewBox="0 0 8 8"><circle cx="4" cy="4" r="3" fill="currentColor" /></svg>
  ),
  Check: ({ size = 12 }) => (
    <svg width={size} height={size} viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square">
      <path d="M2 6.5L5 9.5L10 3" />
    </svg>
  ),
  LinkedIn: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M19 0h-14C2.2 0 0 2.2 0 5v14c0 2.8 2.2 5 5 5h14c2.8 0 5-2.2 5-5V5c0-2.8-2.2-5-5-5zM8 19H5V8h3v11zM6.5 6.7c-1 0-1.7-.8-1.7-1.7s.8-1.7 1.7-1.7 1.7.8 1.7 1.7-.7 1.7-1.7 1.7zM20 19h-3v-5.6c0-3.4-4-3.1-4 0V19h-3V8h3v1.8c1.4-2.6 7-2.8 7 2.5V19z" />
    </svg>
  ),
};

// ============== NAV DROPDOWN ==============
function NavDropdown({ label, items }) {
  const [open, setOpen] = useState(false);
  const closeT = useRef(null);
  const onEnter = () => { if (closeT.current) clearTimeout(closeT.current); setOpen(true); };
  const onLeave = () => { closeT.current = setTimeout(() => setOpen(false), 180); };
  return (
    <div
      className={`nav__drop ${open ? "nav__drop--open" : ""}`}
      onMouseEnter={onEnter}
      onMouseLeave={onLeave}
    >
      <button
        type="button"
        className="nav__link nav__dropTrigger"
        aria-haspopup="true"
        aria-expanded={open}
        onClick={() => setOpen(o => !o)}
      >
        <span>{label}</span>
        <Icon.Caret size={9} />
      </button>
      <div className="nav__dropMenu" role="menu">
        {items.map((it, i) => (
          <a key={i} href={it.href} className="nav__dropItem" role="menuitem">
            <span className="nav__dropItemTitle">{it.title}</span>
            <span className="nav__dropItemDesc">{it.desc}</span>
          </a>
        ))}
      </div>
    </div>
  );
}

// ============== NAV ==============
function Nav({ t, lang, setLang, palette, setPalette }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

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

  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, []);

  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const close = () => setMenuOpen(false);

  const profileItems = [
    { title: t.nav.profile_about, desc: t.nav.profile_about_desc, href: "profile.html#about" },
    { title: t.nav.profile_approach, desc: t.nav.profile_approach_desc, href: "profile.html#approach" },
    { title: t.nav.profile_certs, desc: t.nav.profile_certs_desc, href: "profile.html#certifications" },
  ];
  const resourceItems = [
    { title: t.nav.resources_refs, desc: t.nav.resources_refs_desc, href: "references.html" },
    { title: t.nav.resources_projects, desc: t.nav.resources_projects_desc, href: "other-projects.html" },
  ];

  return (
    <>
      <nav className={`nav ${scrolled ? "nav--scrolled" : ""}`}>
        <div className="nav__inner">
          <a href="index.html" className="nav__brand" aria-label="BLASCOTECH — accueil">
            <span className="nav__brandMark"><Icon.Logo size={28} /></span>
            <span className="nav__brandText">
              <span className="nav__brandName">BLASCOTECH</span>
              <span className="nav__brandRole">Hugo BLASCO</span>
            </span>
          </a>

          <div className="nav__links">
            <NavDropdown label={t.nav.profile} items={profileItems} />
            <a href="services.html" className="nav__link">{t.nav.services}</a>
            <a href="experience.html" className="nav__link">{t.nav.experience}</a>
            <a href="contact.html" className="nav__link">{t.nav.contact}</a>
            <NavDropdown label={t.nav.resources} items={resourceItems} />
          </div>

          <div className="nav__actions">
            <button
              className="lang"
              onClick={() => setLang(lang === "fr" ? "en" : "fr")}
              aria-label="Switch language"
            >
              <span className={lang === "fr" ? "lang__on" : ""}>FR</span>
              <span className="lang__sep">/</span>
              <span className={lang === "en" ? "lang__on" : ""}>EN</span>
            </button>
            <a href="https://www.linkedin.com/in/hugo-blasco" className="btn btn--primary btn--sm" target="_blank" rel="noopener">
              <Icon.LinkedIn size={12} />
              <span>{t.nav.cta}</span>
            </a>
            <button
              type="button"
              className={`nav__burger ${menuOpen ? "nav__burger--open" : ""}`}
              aria-label={menuOpen ? "Fermer le menu" : "Ouvrir le menu"}
              aria-expanded={menuOpen}
              onClick={() => setMenuOpen(o => !o)}
            >
              <span /><span /><span />
            </button>
          </div>
        </div>
      </nav>

      <div
        className={`nav__overlay ${menuOpen ? "nav__overlay--open" : ""}`}
        onClick={close}
        aria-hidden="true"
      />

      <div
        className={`nav__mobile ${menuOpen ? "nav__mobile--open" : ""}`}
        role="dialog"
        aria-modal="true"
        aria-label="Navigation"
      >
        <div className="nav__mobileHead">
          <a href="index.html" className="nav__brand" onClick={close}>
            <span className="nav__brandMark"><Icon.Logo size={24} /></span>
            <span className="nav__brandText">
              <span className="nav__brandName">BLASCOTECH</span>
              <span className="nav__brandRole">Hugo BLASCO</span>
            </span>
          </a>
          <button type="button" className="nav__mobileClose" onClick={close} aria-label="Fermer le menu">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M2 2l12 12M14 2L2 14" />
            </svg>
          </button>
        </div>

        <div className="nav__mobileLinks">
          <div className="nav__mobileGroup">
            <div className="nav__mobileGroupTitle">{t.nav.profile}</div>
            {profileItems.map((it, i) => (
              <a key={i} href={it.href} className="nav__mobileSubLink" onClick={close}>
                <span>{it.title}</span>
                <Icon.Arrow size={12} />
              </a>
            ))}
          </div>

          <a href="services.html" className="nav__mobileLink" onClick={close}>
            <span>{t.nav.services}</span>
            <Icon.Arrow size={14} />
          </a>

          <a href="experience.html" className="nav__mobileLink" onClick={close}>
            <span>{t.nav.experience}</span>
            <Icon.Arrow size={14} />
          </a>

          <a href="contact.html" className="nav__mobileLink" onClick={close}>
            <span>{t.nav.contact}</span>
            <Icon.Arrow size={14} />
          </a>

          <div className="nav__mobileGroup">
            <div className="nav__mobileGroupTitle">{t.nav.resources}</div>
            {resourceItems.map((it, i) => (
              <a key={i} href={it.href} className="nav__mobileSubLink" onClick={close}>
                <span>{it.title}</span>
                <Icon.Arrow size={12} />
              </a>
            ))}
          </div>
        </div>

        <div className="nav__mobileFooter">
          <div className="nav__mobileLang">
            <button
              className={`nav__mobileLangBtn ${lang === "fr" ? "nav__mobileLangBtn--active" : ""}`}
              onClick={() => setLang("fr")}
            >FR</button>
            <button
              className={`nav__mobileLangBtn ${lang === "en" ? "nav__mobileLangBtn--active" : ""}`}
              onClick={() => setLang("en")}
            >EN</button>
          </div>
          <a href="https://www.linkedin.com/in/hugo-blasco" className="btn btn--primary" target="_blank" rel="noopener" onClick={close}>
            <Icon.LinkedIn size={14} />
            <span>{t.nav.cta}</span>
            <Icon.Arrow />
          </a>
        </div>
      </div>
    </>
  );
}

// ============== HERO ==============
function Hero({ t, showClients = false }) {
  return (
    <section id="top" className="hero">
      <div className="hero__grid">
        <div className="hero__left">
          <div className="hero__tag">
            <span className="pulse"><span className="pulse__dot"></span></span>
            <span>{t.hero.tag}</span>
          </div>
          <h1 className="hero__title">
            {t.hero.title_pre}{" "}
            <em>{t.hero.title_em}</em>
            {t.hero.title_mid}{" "}
            <span className="hero__highlight">{t.hero.title_em2}</span>
            {t.hero.title_post}
          </h1>
          <p className="hero__lede">{t.hero.lede}</p>
          <div className="hero__ctas">
            <a href="https://www.linkedin.com/in/hugo-blasco" className="btn btn--primary" target="_blank" rel="noopener">
              <Icon.LinkedIn size={14} />
              <span>{t.hero.cta_primary}</span>
              <Icon.Arrow />
            </a>
            <a href="contact.html" className="btn btn--ghost">
              <span>{t.hero.cta_secondary}</span>
              <Icon.Diag />
            </a>
          </div>
          <div className="hero__meta">
            <div className="hero__metaItem hero__metaItem--live">
              <span className="hero__metaDot" aria-hidden="true"></span>
              <span className="hero__metaK">{t.hero.meta_avail_label}</span>
              <span className="hero__metaV">{t.hero.meta_avail}</span>
            </div>
          </div>
        </div>

        <div className="hero__right">
          <div className="portrait">
            <div className="portrait__frame">
              <svg className="portrait__placeholder" viewBox="0 0 320 400" preserveAspectRatio="xMidYMid slice">
                <defs>
                  <pattern id="stripes" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
                    <rect width="3" height="6" fill="rgba(0,0,0,.04)" />
                  </pattern>
                </defs>
                <rect width="320" height="400" fill="#F2F2EE" />
                <rect width="320" height="400" fill="url(#stripes)" />
              </svg>
              <div className="portrait__caption">
                <div className="portrait__captionK">portrait.jpg</div>
                <div className="portrait__captionV">à fournir · 4:5</div>
              </div>
            </div>
            <div className="portrait__badge">
              <div className="portrait__badgeTop">
                <span className="portrait__badgeRare">RARE</span>
                <span className="portrait__badgeDot">●</span>
              </div>
              <div className="portrait__badgeCode">PSM III</div>
              <div className="portrait__badgeMeta">&lt; 1 500 dans le monde</div>
            </div>
          </div>
        </div>
      </div>

      {showClients && <ClientLogos lang={t === window.SITE_CONTENT.fr ? "fr" : "en"} />}
    </section>
  );
}

// ============== CLIENT LOGOS (static) ==============
function ClientLogos({ lang }) {
  const label = lang === "fr" ? "Ils m'ont fait confiance" : "They trusted me";
  return (
    <div className="clients">
      <div className="clients__label">
        <Icon.Dot size={6} />
        <span>{label}</span>
      </div>
      <div className="clients__row">
        <div className="clients__logo clients__logo--airbus">
          <span className="clients__logoMark">Airbus</span>
        </div>
        <div className="clients__sep"></div>
        <div className="clients__logo clients__logo--capgemini">
          <span className="clients__logoMark">Capgemini</span>
        </div>
        <div className="clients__sep"></div>
        <div className="clients__logo clients__logo--alten">
          <span className="clients__logoMark">ALTEN</span>
        </div>
      </div>
    </div>
  );
}

// ============== SECTION HEADER ==============
function SectionHead({ n, eyebrow, title, lede }) {
  return (
    <header className="sec__head">
      <div className="sec__num">{n}</div>
      <div className="sec__headRight">
        <div className="sec__eyebrow"><Icon.Dot size={6} /> <span className="sec__eyebrowText">{eyebrow}</span></div>
        <h2 className="sec__title">{title}</h2>
        {lede && <p className="sec__lede">{lede}</p>}
      </div>
    </header>
  );
}

// ============== METRICS ==============
function Metrics({ t }) {
  return (
    <section className="metrics">
      <div className="metrics__inner">
        <h3 className="metrics__title">{t.metrics.title}</h3>
        <div className="metrics__grid">
          {t.metrics.items.map((m, i) => (
            <div key={i} className="metric">
              <div className="metric__num">
                <span>{m.num}</span>
                <span className="metric__suf">{m.suf}</span>
              </div>
              <div className="metric__rule"></div>
              <div className="metric__label">{m.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============== ABOUT ==============
function About({ t, n = "01" }) {
  return (
    <section id="about" className="sec sec--about">
      <SectionHead n={n} eyebrow={t.about.eyebrow} title={t.about.title} />
      <div className="about__body">
        <div className="about__col">
          {t.about.body.map((p, i) => <p key={i} className="about__p">{p}</p>)}
        </div>
        <aside className="about__side">
          <div className="card">
            <div className="card__k">Formation</div>
            <ul className="card__list">
              <li><strong>ESIEA</strong> · Ingénieur logiciel · 2020</li>
              <li><strong>IUT Montpellier</strong> · DUT Informatique · 2017</li>
              <li><strong>Metropolia Helsinki</strong> · Erasmus</li>
            </ul>
          </div>
          <div className="card">
            <div className="card__k">Frameworks</div>
            <div className="chips">
              <span className="chip">Scrum</span>
              <span className="chip">SAFe</span>
              <span className="chip">Kanban</span>
            </div>
          </div>
          <div className="card">
            <div className="card__k">Outils</div>
            <div className="chips">
              <span className="chip chip--mute">JIRA</span>
              <span className="chip chip--mute">Klaxoon</span>
              <span className="chip chip--mute">Draft.io</span>
              <span className="chip chip--mute">Miro</span>
              <span className="chip chip--mute">Teams</span>
            </div>
          </div>
        </aside>
      </div>
    </section>
  );
}

// ============== SERVICES ==============
function Services({ t, n = "02", noHead = false }) {
  return (
    <section id="services" className={`sec sec--services ${noHead ? "sec--flat" : ""}`}>
      {!noHead && <SectionHead n={n} eyebrow={t.services.eyebrow} title={t.services.title} lede={t.services.lede} />}
      <div className="services__grid">
        {t.services.items.map((s, i) => (
          <article key={i} className="svc">
            <div className="svc__top">
              <span className="svc__n">{s.n}</span>
              <span className="svc__arrow"><Icon.Diag /></span>
            </div>
            <h3 className="svc__title">{s.title}</h3>
            <p className="svc__desc">{s.desc}</p>
            <div className="svc__tags">
              {s.tags.map((tag, j) => <span key={j} className="chip chip--sm">{tag}</span>)}
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ============== APPROACH ==============
function Approach({ t, n = "03" }) {
  return (
    <section id="approach" className="sec sec--approach">
      <SectionHead n={n} eyebrow={t.approach.eyebrow} title={t.approach.title} />
      <div className="approach__grid">
        {t.approach.items.map((it, i) => (
          <div key={i} className="approach__item">
            <div className="approach__k">{String(i + 1).padStart(2, "0")} · {it.k}</div>
            <div className="approach__v">{it.v}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============== EXPERIENCE ==============
function Experience({ t, n = "04", noHead = false }) {
  return (
    <section id="experience" className={`sec sec--exp ${noHead ? "sec--flat" : ""}`}>
      {!noHead && <SectionHead n={n} eyebrow={t.experience.eyebrow} title={t.experience.title} />}
      <div className="exp__list">
        {t.experience.items.map((e, i) => (
          <article key={i} className="exp">
            <div className="exp__rail">
              <div className="exp__dot"></div>
              <div className="exp__line"></div>
            </div>
            <div className="exp__main">
              <div className="exp__head">
                <div className="exp__period">{e.period}</div>
                <div className="exp__framework">{e.framework}</div>
              </div>
              <div className="exp__client">{e.client}</div>
              <div className="exp__role">{e.role}</div>
              <p className="exp__summary">{e.summary}</p>
              <ul className="exp__highlights">
                {e.highlights.map((h, j) => (
                  <li key={j}><span className="exp__check"><Icon.Check /></span>{h}</li>
                ))}
              </ul>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ============== CERTIFICATIONS (timeline) ==============
function Certifications({ t, n = "05" }) {
  const timeline = t.certifications.timeline || [];
  // Year axis: 2022 → 2026
  const startYear = 2022;
  const endYear = 2026;
  const years = [];
  for (let y = startYear; y <= endYear; y++) years.push(y);

  // Group by year for stacking
  const byYear = {};
  timeline.forEach((c, i) => {
    if (!byYear[c.year]) byYear[c.year] = [];
    byYear[c.year].push({ ...c, _i: i });
  });

  return (
    <section id="certifications" className="sec sec--certs">
      <SectionHead n={n} eyebrow={t.certifications.eyebrow} title={t.certifications.title} />

      <div className="certs__callout">
        <div className="certs__calloutBadge">
          <span className="certs__calloutMark">★</span>
          <span>PSM III</span>
        </div>
        <p className="certs__calloutText">{t.certifications.psm3_callout}</p>
        <a href="https://www.scrum.org/user/726643" target="_blank" rel="noopener" className="certs__verify">
          {t.certifications.verify} <Icon.Diag size={12} />
        </a>
      </div>

      <div className="timeline">
        <div className="timeline__rail">
          <div className="timeline__line"></div>
          {years.map((y) => {
            const items = byYear[String(y)] || [];
            return (
              <div key={y} className="timeline__col">
                <div className="timeline__year">{y}</div>
                <div className="timeline__tick"></div>
                <div className="timeline__items">
                  {items.length === 0 ? (
                    <div className="timeline__empty"></div>
                  ) : (
                    items.map((c, i) => (
                      <div key={i} className={`tcert ${c.featured ? "tcert--featured" : ""}`}>
                        <div className="tcert__connector"></div>
                        <div className="tcert__head">
                          <span className="tcert__code">{c.code}</span>
                          {c.featured && <span className="tcert__star">★</span>}
                        </div>
                        <div className="tcert__label">{c.label}</div>
                      </div>
                    ))
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ============== AVAILABILITY ==============
function Availability({ t }) {
  return (
    <section className="sec sec--avail">
      <SectionHead n="06" eyebrow={t.availability.eyebrow} title={t.availability.title} />
      <div className="avail__grid">
        {t.availability.zones.map((z, i) => (
          <div key={i} className="avail">
            <div className="avail__num">{String(i + 1).padStart(2, "0")}</div>
            <div className="avail__z">{z.z}</div>
            <div className="avail__note">{z.note}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============== CONTACT ==============
function Contact({ t, n = "06", noHead = false }) {
  return (
    <section id="contact" className={`sec sec--contact ${noHead ? "sec--flat sec--contact-flat" : ""}`}>
      <div className="contact__inner">
        {!noHead && <div className="contact__num">{n}</div>}
        <div className="contact__body">
          {!noHead && <div className="sec__eyebrow"><Icon.Dot size={6} /> {t.contact.eyebrow}</div>}
          {!noHead && <h2 className="contact__title">{t.contact.title}</h2>}
          {!noHead && <p className="contact__lede" style={{ whiteSpace: "pre-line" }}>{t.contact.lede}</p>}
          <div className="contact__cta">
            <a href="https://www.linkedin.com/in/hugo-blasco" target="_blank" rel="noopener" className="btn btn--primary btn--lg">
              <Icon.LinkedIn />
              <span>{t.contact.cta}</span>
              <Icon.Arrow />
            </a>
          </div>
          <div className="contact__lines">
            <a href={`mailto:${t.contact.email}`} className="contact__line">
              <span className="contact__lineK">EMAIL</span>
              <span className="contact__lineV">{t.contact.email}</span>
              <Icon.Diag />
            </a>
            <a href={`tel:${t.contact.phone.replace(/\s+/g, "")}`} className="contact__line">
              <span className="contact__lineK">TÉL</span>
              <span className="contact__lineV">{t.contact.phone}</span>
              <Icon.Diag />
            </a>
            <a href="https://www.linkedin.com/in/hugo-blasco" target="_blank" rel="noopener" className="contact__line">
              <span className="contact__lineK">IN</span>
              <span className="contact__lineV">{t.contact.linkedin}</span>
              <Icon.Diag />
            </a>
          </div>

          <div className="contact__avail">
            <div className="contact__availTitle">{t.availability.title}</div>
            <div className="contact__availGrid">
              {t.availability.zones.map((z, i) => (
                <div key={i} className="contact__availItem">
                  <div className="contact__availZ">{z.z}</div>
                  <div className="contact__availNote">{z.note}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============== FOOTER ==============
function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="footer__inner">
        <div className="footer__left">
          <div className="footer__name">BLASCOTECH</div>
          <div className="footer__tag">Hugo BLASCO · {t.footer.tag}</div>
        </div>
        <div className="footer__copy">{t.footer.copy}</div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Hero, ClientLogos, Metrics, About, Services, Approach, Experience, Certifications, Availability, Contact, Footer, Icon, SectionHead,
});