// portfolio-sections.jsx — building blocks + EN/DE i18n
const { useEffect, useRef, useState } = React;
const PHOTO = 'images/dario.png';

/* ================= TRANSLATIONS ================= */
const I18N = {
  en: {
    navAbout: 'About', navWork: 'Work', navContact: 'Contact',
    role: 'Electronics Apprentice · Personal Projects · Glider Pilot',
    tagPre: 'Electronics apprentice in R&D at ABB, developing hardware for industrial systems — alongside ',
    tagHl: 'personal hardware and software projects, and gliding',
    tagPost: '.',
    btnWork: 'View selected work', btnContact: 'Get in touch',
    contactMe: 'Contact me', learnMore: 'Learn more ↓',
    introEyebrow: 'Introduction',
    profRole: ['Electronics apprentice, ', 'personal projects', ' & glider pilot'],
    profDesc: 'I am an electronics apprentice in ABB\'s R&D department, developing hardware for industrial systems. Alongside my training I build my own hardware and software projects and hold a glider pilot licence. This portfolio brings the three together.',
    metaRole: 'Role', metaLocation: 'Location', metaFocus: 'Focus', metaEmployer: 'Employer',
    roleVal: 'Electronics Apprentice', focusVal: 'Embedded · Web · Gliding',
    interests: ['Glider Flying', 'Flight Radio Communication', 'Aviation Meteorology', 'Cross-Country Soaring'],
    aboutTitle: 'About',
    aboutLead: 'Electronics apprentice in R&D at ABB, with parallel interests in personal projects and aviation.',
    aboutP1: 'In ABB\'s R&D department I work on hardware for industrial systems: mixed-signal boards, power stages and embedded firmware, taking designs from concept schematic through layout, bring-up and qualification.',
    aboutP2: 'Beyond my apprenticeship I build my own hardware and software projects and hold a glider pilot licence. The work below reflects all three areas.',
    experience: [
      { co: 'ABB', role: 'Electronics apprentice (EFZ), R&D', years: '2026 — Present', now: true },
      { co: 'Vocational school\u00a0/ baccalaureate', role: 'Electronics EFZ / BM1 Technik @BBBaden', years: '2024 — 2028' },
      { co: 'AFG', role: 'Glider pilot', years: '2023 — Present', url: 'https://www.afg.ethz.ch/' },
    ],
    workTitle: 'Selected work',
    wip: 'Work in Progress',
    projects: [
      { cat: 'Aviation · Web', t: 'ThermalScope', d: 'A pre-flight and in-flight planning tool for glider pilots, visualising thermal quality, convection and wind on an interactive map.', thumbClass: 'thumb-thermalscope', url: 'https://thermalscope.kueffer.tech', wip: true },
      { cat: 'Aviation · Hardware', t: 'F/A-18C Cockpit', d: 'A full-scale 1:1 replica cockpit of the F/A-18C Hornet, built to the open-source OpenHornet design — custom airframe, real flight controls and home-grown avionics.', thumbClass: 'thumb-cockpit', url: 'cockpit.html', wip: true },
    ],
    contactL1: "Let's work", contactL2: 'together',
    contactSub: 'Open to conversations about electronics, web projects, or aviation. Feel free to get in touch.',
    resume: 'Résumé (PDF)',
    footRight: 'Designed & built in Switzerland',
    impressum: 'Legal notice',
    impressumTitle: 'Information pursuant to Swiss law',
    impressumRows: [
      { k: 'Responsible', v: 'Dario Küffer' },
      { k: 'Address', v: 'Parkweg 1, 8112 Otelfingen, Switzerland' },
      { k: 'Email', v: 'dario@kueffer.tech' },
      { k: 'Phone', v: '+41 78 215 01 19' },
    ],
    impressumNote: 'This website is a personal portfolio. All content is provided for informational purposes; no liability is assumed for its accuracy or completeness.',
  },
  de: {
    navAbout: 'Über mich', navWork: 'Projekte', navContact: 'Kontakt',
    role: 'Lernender Elektroniker · Eigene Projekte · Segelflugpilot',
    tagPre: 'Lernender Elektroniker in der Forschung und Entwicklung bei ABB, mit Fokus auf Hardware für industrielle Systeme — daneben ',
    tagHl: 'eigene Hardware- und Softwareprojekte und Segelflug',
    tagPost: '.',
    btnWork: 'Projekte ansehen', btnContact: 'Kontakt aufnehmen',
    contactMe: 'Kontakt', learnMore: 'Mehr erfahren ↓',
    introEyebrow: 'Kurzporträt',
    profRole: ['Lernender Elektroniker, ', 'eigene Projekte', ' & Segelflug'],
    profDesc: 'Ich absolviere bei ABB in der Forschung und Entwicklung eine Lehre als Elektroniker und arbeite an Hardware für industrielle Systeme. Daneben entwickle ich eigene Hardware- und Softwareprojekte und besitze eine Segelfluglizenz. Dieses Portfolio führt die drei Bereiche zusammen.',
    metaRole: 'Rolle', metaLocation: 'Standort', metaFocus: 'Fokus', metaEmployer: 'Arbeitgeber',
    roleVal: 'Lernender Elektroniker', focusVal: 'Embedded · Web · Segelflug',
    interests: ['Segelfliegen', 'Sprechfunk (Luftfahrt)', 'Flugmeteorologie', 'Streckenflug'],
    aboutTitle: 'Über mich',
    aboutLead: 'Lernender Elektroniker in der Forschung und Entwicklung bei ABB, mit parallelen Interessen an eigenen Projekten und der Fliegerei.',
    aboutP1: 'In der Forschung und Entwicklung bei ABB arbeite ich an Hardware für industrielle Systeme — Mixed-Signal-Platinen, Leistungsstufen und Embedded-Firmware, vom Schaltplan über das Layout bis zur Inbetriebnahme.',
    aboutP2: 'Über die Lehre hinaus entwickle ich eigene Hardware- und Softwareprojekte und besitze eine Segelfluglizenz. Die folgenden Arbeiten decken alle drei Bereiche ab.',
    experience: [
      { co: 'ABB', role: 'Lernender Elektroniker EFZ, F&E', years: '2026 — Heute', now: true },
      { co: 'Berufsschule\u00a0/ Berufsmaturität', role: 'Elektroniker EFZ / BM1 Technik @BBBaden', years: '2024 — 2028' },
      { co: 'AFG', role: 'Segelflugpilot', years: '2023 — Heute', url: 'https://www.afg.ethz.ch/' },
    ],
    workTitle: 'Ausgewählte Arbeiten',
    wip: 'In Arbeit',
    projects: [
      { cat: 'Luftfahrt · Web', t: 'ThermalScope', d: 'Ein Planungstool für Segelflugpiloten — visualisiert Thermikqualität, Konvektion und Wind auf einer interaktiven Karte, vor und während des Flugs.', thumbClass: 'thumb-thermalscope', url: 'https://thermalscope.kueffer.tech', wip: true },
      { cat: 'Luftfahrt · Hardware', t: 'F/A-18C Cockpit', d: 'Ein massstabsgetreues 1:1-Nachbau-Cockpit der F/A-18C Hornet, gebaut nach dem Open-Source-Entwurf von OpenHornet — eigener Rahmen, echte Flugsteuerungen und selbst entwickelte Avionik.', thumbClass: 'thumb-cockpit', url: 'cockpit.html', wip: true },
    ],
    contactL1: 'Lass uns', contactL2: 'zusammenarbeiten',
    contactSub: 'Offen für Gespräche über Elektronik, Webprojekte oder die Fliegerei. Ich freue mich über eine Nachricht.',
    resume: 'Lebenslauf (PDF)',
    footRight: 'Entworfen und gebaut in der Schweiz',
    impressum: 'Impressum',
    impressumTitle: 'Angaben gemäss schweizerischem Recht',
    impressumRows: [
      { k: 'Verantwortlich', v: 'Dario Küffer' },
      { k: 'Adresse', v: 'Parkweg 1, 8112 Otelfingen, Schweiz' },
      { k: 'E-Mail', v: 'dario@kueffer.tech' },
      { k: 'Telefon', v: '+41 78 215 01 19' },
    ],
    impressumNote: 'Diese Website ist ein persönliches Portfolio. Alle Inhalte dienen zu Informationszwecken; für ihre Richtigkeit und Vollständigkeit wird keine Haftung übernommen.',
  },
};

/* ---- scroll reveal hook ---- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

function Traces() { return null; }

/* ---- striped placeholder ---- */
function Ph({ label, className, style }) {
  return (
    <div className={'ph ' + (className||'')} style={style}>
      <span className="lbl">{label}</span>
    </div>
  );
}

/* ---- DARIO / KÜFFER logotype ---- */
function Logotype({ size, fx }) {
  const letters = ['K', 'ü', 'f', 'f', 'e', 'r'];
  return (
    <h1 className="logotype" style={size ? { fontSize: size } : null}>
      <span className="lt-line lt-dario">Dario</span>
      <span className={'lt-line lt-kuffer kfx-' + (fx || 'none')} data-text="Küffer" key={fx}>
        {letters.map((c, i) => (
          <span className="lt-ch" style={{ '--i': i }} key={i}>{c}</span>
        ))}
      </span>
    </h1>
  );
}

/* ---- project title with a Küffer-style highlighted word ---- */

/* ================= NAV ================= */
function Nav({ L, lang, setLang, navLabel }) {
  const val = navLabel || 'Hide it';
  let cta = null;
  if (val === 'Hide it') cta = null;
  else if (val === 'Say hello →') cta = <a href="#contact" className="nav-cta nav-cta-link">Say hello →</a>;
  else cta = <span className="nav-cta"><span className="pulse"></span>{val}</span>;
  return (
    <nav>
      <div className="wrap nav-inner">
        <a href="#top" className="brand">DK</a>
        <div className="nav-links">
          <a href="#about">{L.navAbout}</a>
          <a href="#work">{L.navWork}</a>
          <a href="#contact">{L.navContact}</a>
        </div>
        <div className="nav-right">
          {cta}
          <div className="lang-switch" role="group" aria-label="Language">
            <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
            <span className="sep">/</span>
            <button className={lang === 'de' ? 'on' : ''} onClick={() => setLang('de')}>DE</button>
          </div>
        </div>
      </div>
    </nav>
  );
}

/* ================= HERO VARIANTS ================= */
function Tagline({ L, style }) {
  return (
    <p className="hero-tag reveal in" style={style}>
      {L.tagPre}<span className="hl">{L.tagHl}</span>{L.tagPost}
    </p>
  );
}
function HeroActions({ L }) {
  return (
    <div className="hero-actions reveal in">
      <a href="#work" className="btn btn-primary">{L.btnWork}</a>
      <a href="#contact" className="btn btn-ghost">{L.btnContact}</a>
    </div>
  );
}

function MorphPortrait({ L }) {
  return (
    <div className="morph-portrait reveal in">
      <span className="mp-glow" aria-hidden="true"></span>
      <img className="mp-layer mp-silhouette" src="images/me-morph.png" alt="" aria-hidden="true" draggable="false" />
      <img className="mp-layer mp-photo" src="images/me-photo.png" alt="Dario Küffer" draggable="false" />
    </div>
  );
}

function HeroCentered({ L, fx }) {
  return (
    <header className="hero" id="top">
      <div className="wrap hero-centered" style={{ position: 'relative', zIndex: 1 }}>
        <div className="hero-left hc-text">
          <div className="role reveal in"><span className="line"></span><span>{L.role}</span></div>
          <Logotype fx={fx} />
          <Tagline L={L} />
          <HeroActions L={L} />
        </div>
        <MorphPortrait L={L} />
      </div>
    </header>
  );
}

function HeroSplit({ L, fx }) {
  return (
    <header className="hero" id="top">
      <div className="wrap hero-split" style={{ position: 'relative', zIndex: 1 }}>
        <div>
          <div className="role reveal in"><span className="line"></span><span>{L.role}</span></div>
          <Logotype size="clamp(40px, 7vw, 100px)" fx={fx} />
          <Tagline L={L} />
          <HeroActions L={L} />
        </div>
        <div className="portrait reveal in">
          <Ph label="PORTRAIT / 4:5" style={{ position:'absolute', inset:0, border:0 }} />
          <div className="portrait-img" role="img" aria-label="Dario Küffer"></div>
          <span className="corner"></span><span className="corner bl"></span>
          <span className="spec">REV. 2026 · CH</span>
        </div>
      </div>
    </header>
  );
}

function HeroIndex({ L, fx }) {
  return (
    <header className="hero hero-index" id="top">
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="meta-row reveal in">
          <div className="cell"><div className="k">{L.metaRole}</div><div className="v">{L.roleVal}</div></div>
          <div className="cell"><div className="k">{L.metaLocation}</div><div className="v">Zürich, CH</div></div>
          <div className="cell"><div className="k">{L.metaFocus}</div><div className="v">{L.focusVal}</div></div>
          <div className="cell"><div className="k">{L.metaEmployer}</div><div className="v">ABB <span className="accent">●</span></div></div>
        </div>
        <Logotype fx={fx} />
        <div className="index-bar reveal in">
          <span className="num">[ 00 — INDEX ]</span>
          <span className="rule"></span>
        </div>
        <Tagline L={L} style={{ maxWidth: 620 }} />
        <HeroActions L={L} />
      </div>
    </header>
  );
}

function HeroProfile({ L, fx }) {
  return (
    <header className="hero" id="top">
      <div className="wrap hero-profile" style={{ position: 'relative', zIndex: 1 }}>
        <div className="hp-left reveal in">
          <Logotype size="clamp(30px, 3.6vw, 56px)" fx={fx} />
          <div className="hp-socials">
            <span className="line"></span>
            <div className="hp-soc-links">
              <a href="https://www.linkedin.com/in/dariok%C3%BCffer/" target="_blank" rel="noopener noreferrer">LinkedIn</a> · <a href="#contact">Email</a>
            </div>
          </div>
          <a href="#contact" className="btn btn-ghost">{L.contactMe}</a>
        </div>

        <div className="hp-center reveal in">
          <div className="avatar">
            <div className="avatar-img" role="img" aria-label="Dario Küffer"></div>
          </div>
        </div>

        <div className="hp-right reveal in">
          <div className="eyebrow">{L.introEyebrow}</div>
          <h2 className="hp-role">{L.profRole[0]}<span className="accent">{L.profRole[1]}</span>{L.profRole[2]}</h2>
          <p className="hp-desc">{L.profDesc}</p>
          <a href="#about" className="hp-more">{L.learnMore}</a>
        </div>
      </div>
    </header>
  );
}

function Hero({ layout, L, fx }) {
  if (layout === 'profile') return <HeroProfile L={L} fx={fx} />;
  if (layout === 'split') return <HeroSplit L={L} fx={fx} />;
  if (layout === 'index') return <HeroIndex L={L} fx={fx} />;
  return <HeroCentered L={L} fx={fx} />;
}

/* ================= ABOUT ================= */
function About({ L }) {
  const chips = ['STM32','ESP32','KiCad','C / C++','Python','Fusion 360','3D Printing','CNC'];
  return (
    <section id="about" className="sec-pad">
      <div className="wrap">
        <div className="sec-head reveal"><span className="idx">[ 01 ]</span><h2>{L.aboutTitle}</h2></div>
        <div className="about-grid">
          <div className="reveal">
            <p style={{ color: 'var(--ink)', fontSize: 19 }}>{L.aboutLead}</p>
            <div className="chips">{chips.map((c,i)=><span key={i} className="chip">{c}</span>)}</div>
            <div className="chips-rule"></div>
            <div className="chips">{L.interests.map((c,i)=><span key={i} className="chip chip-soft">{c}</span>)}</div>
          </div>
          <div className="reveal">
            <p>{L.aboutP1}</p>
            <p>{L.aboutP2}</p>
            <div className="xp">
              {L.experience.map((e,i)=>(
                <div className="xp-row" key={i}>
                  <div className="xp-co">
                    {e.url ? <a href={e.url} target="_blank" rel="noopener noreferrer" className="xp-co-link">{e.co}<span className="xp-co-arrow">↗</span></a> : e.co}
                  </div>
                  <div className="xp-role">{e.role}</div>
                  <div className="xp-years mono">{e.years}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================= WORK ================= */
function Work({ L }) {
  return (
    <section id="work" className="sec-pad" style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div className="wrap">
        <div className="sec-head reveal"><span className="idx">[ 02 ]</span><h2>{L.workTitle}</h2></div>
        <div className="work-grid">
          {L.projects.map((p,i)=>{
            const inner = (
              <React.Fragment>
                {p.thumbClass ? <div className={'thumb thumb-img ' + p.thumbClass} role="img" aria-label={p.t}></div>
                  : p.thumb ? <img className="thumb thumb-img" src={p.thumb} alt={p.t} />
                  : <Ph className="thumb" label={p.img} />}
                <div className="body">
                  <div className="top"><span className="cat-row"><span className="cat">{p.cat}</span>{p.wip && <React.Fragment><span className="cat-sep">·</span><span className="wip-badge">{L.wip}</span></React.Fragment>}</span><span className="arrow">↗</span></div>
                  <h3 className="display">{p.t}</h3>
                  <p className="desc">{p.d}</p>
                </div>
              </React.Fragment>
            );
            return p.url
              ? <a className="card reveal" key={i} href={p.url} {...(/^https?:/.test(p.url) ? { target:'_blank', rel:'noopener noreferrer' } : {})}>{inner}</a>
              : <article className="card reveal" key={i}>{inner}</article>;
          })}
        </div>
      </div>
    </section>
  );
}

/* ================= CONTACT ================= */
function Contact({ L }) {
  return (
    <section id="contact" className="sec-pad contact">
      <div className="wrap" style={{ position:'relative', zIndex:1 }}>
        <div className="sec-head reveal" style={{ justifyContent:'center' }}><span className="idx">[ 03 ]</span></div>
        <h2 className="reveal contact-head">
          <span className="sway sway-l">{L.contactL1}</span>
          <span className="sway sway-r">{L.contactL2}<span className="accent">.</span></span>
        </h2>
        <p className="sub reveal">{L.contactSub}</p>
        <div className="reveal" style={{ display:'flex', justifyContent:'center' }}>
          <a href="mailto:dario@kueffer.tech" className="btn btn-primary">dario@kueffer.tech</a>
        </div>
        <div className="socials reveal">
          <a href="https://www.linkedin.com/in/dariok%C3%BCffer/" target="_blank" rel="noopener noreferrer">↗ LinkedIn</a>
        </div>
      </div>
    </section>
  );
}

function Footer({ L }) {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  return (
    <footer>
      <div className="wrap foot-inner">
        <span>© 2026 Dario Küffer</span>
        <button className="foot-link" onClick={() => setOpen(true)}>{L.impressum}</button>
      </div>
      {open && (
        <div className="modal-overlay" onClick={() => setOpen(false)}>
          <div className="modal" role="dialog" aria-modal="true" aria-label={L.impressum} onClick={(e) => e.stopPropagation()}>
            <button className="modal-close" onClick={() => setOpen(false)} aria-label="Close">×</button>
            <div className="eyebrow">{L.impressum}</div>
            <h2 className="modal-title">{L.impressumTitle}</h2>
            <div className="imp-grid">
              {L.impressumRows.map((r, i) => (
                <div className="imp-row" key={i}>
                  <div className="imp-k mono">{r.k}</div>
                  <div className="imp-v">{r.v}</div>
                </div>
              ))}
            </div>
            <p className="imp-note">{L.impressumNote}</p>
          </div>
        </div>
      )}
    </footer>
  );
}

Object.assign(window, { I18N, useReveal, Nav, Hero, About, Work, Contact, Footer });