/* Sections A: Hero, About, Skills — i18n-aware */

const HeroSection = ({ lang }) => {
  const t = (k) => window.__t(lang, k);
  const html = (k) => ({ __html: window.__t(lang, k) });
  return (
    <section className="hero" id="top">
      <div className="hero__top">
        <div>
          <span className="label">{t('hero.portfolio')}</span>
          <span>{t('hero.location')}</span>
        </div>
        <div className="hero__top-r">
          <span className="label">{t('hero.role')}</span>
          <span>{t('hero.tags')}</span>
        </div>
      </div>

      <h1 className="hero__title" key={lang}>
        <span className="line"><span>{t('hero.title1')}</span></span>
        <span className="line"><span>{t('hero.title2')}<span className="accent">.</span></span></span>
        <span className="line"><span><span className="accent">{t('hero.title3a')}</span> {t('hero.title3b')}</span></span>
      </h1>

      <div className="hero__bottom">
        <p className="hero__lede" dangerouslySetInnerHTML={html('hero.lede.html')} />
        <div className="hero__meta">
          <span dangerouslySetInnerHTML={html('hero.meta1.html')} />
          <span dangerouslySetInnerHTML={html('hero.meta2.html')} />
          <span dangerouslySetInnerHTML={html('hero.meta3.html')} />
        </div>
        <div className="hero__scroll">
          <span>{t('hero.scroll')}</span>
          <span className="arrow"></span>
        </div>
      </div>
    </section>
  );
};

const AboutSection = ({ lang }) => {
  const t = (k) => window.__t(lang, k);
  const html = (k) => ({ __html: window.__t(lang, k) });
  return (
    <section className="about section-pad" id="about">
      <div className="section-head reveal">
        <span className="section-num">{t('about.num')}</span>
        <h2 className="section-title" dangerouslySetInnerHTML={html('about.title.html')} />
        <span className="section-kicker">{t('about.kicker')}</span>
      </div>

      <div className="about__grid">
        <p className="about__lede reveal" dangerouslySetInnerHTML={html('about.lede.html')} />
        <div className="about__body reveal d2">
          <p dangerouslySetInnerHTML={html('about.p1.html')} />
          <p dangerouslySetInnerHTML={html('about.p2.html')} />
        </div>
      </div>

      <div className="about__stats">
        <div className="stat reveal">
          <div className="stat__num">10<span className="plus">+</span></div>
          <div className="stat__label">{t('about.stat1.label')}</div>
        </div>
        <div className="stat reveal d1">
          <div className="stat__num">25<span className="plus">+</span></div>
          <div className="stat__label">{t('about.stat2.label')}</div>
        </div>
        <div className="stat reveal d2">
          <div className="stat__num">17<span className="plus">+</span></div>
          <div className="stat__label">{t('about.stat3.label')}</div>
        </div>
        <div className="stat reveal d3">
          <div className="stat__num">6<span className="plus">×</span></div>
          <div className="stat__label">{t('about.stat4.label')}</div>
        </div>
      </div>
    </section>
  );
};

/* ── Skills ── */
const SKILL_ICONS = {
  webdev: <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M8 18 L4 28 L8 38" /><path d="M48 18 L52 28 L48 38" /><path d="M32 14 L24 42" /></svg>,
  design: <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="20" cy="20" r="12" /><rect x="28" y="28" width="20" height="20" /></svg>,
  marketing: <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M6 44 L18 30 L28 38 L46 14" /><path d="M38 14 L46 14 L46 22" /></svg>,
  event: <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="8" y="14" width="40" height="34" rx="2" /><path d="M8 24 L48 24" /><path d="M18 10 L18 18" /><path d="M38 10 L38 18" /></svg>,
  ecom: <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M8 12 L14 12 L18 36 L46 36 L50 18 L18 18" /><circle cx="22" cy="46" r="3" /><circle cx="42" cy="46" r="3" /></svg>,
  video: <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="6" y="16" width="34" height="24" rx="2" /><path d="M40 24 L52 18 L52 38 L40 32" /></svg>,
};

const SKILL_KEYS = ['webdev', 'design', 'marketing', 'event', 'ecom', 'video'];

const TECH_DEV = [
  'React', 'Next.js', 'TypeScript', 'Node.js', 'React Native',
  'Flutter', 'Expo', 'PHP', 'Laravel', 'Firebase', 'Supabase',
  'MySQL', 'Tailwind', 'Framer Motion', 'Figma', 'Adobe Suite',
  'Premiere Pro', 'After Effects', 'Stripe', 'Google Ads',
  'Meta Ads', 'Notion', 'Cordova', 'Python', 'Solidity',
];

const TECH_AI = [
  'Claude', 'GPT-4 / OpenAI', 'Gemini API', 'AI Direction',
  'LangChain', 'Cursor', 'Vector DBs', 'Pinecone', 'Hugging Face',
  'Stable Diffusion', 'Midjourney', 'ElevenLabs', 'RunwayML',
  'AI Content Moderation', 'Custom ML Models', 'Workflow Automation',
  'n8n / Make', 'Prompt Engineering',
];

const SkillsSection = ({ lang }) => {
  const t = (k) => window.__t(lang, k);
  const html = (k) => ({ __html: window.__t(lang, k) });
  return (
    <section className="skills section-pad" id="skills">
      <div className="section-head reveal">
        <span className="section-num">{t('skills.num')}</span>
        <h2 className="section-title" dangerouslySetInnerHTML={html('skills.title.html')} />
        <span className="section-kicker">{t('skills.kicker')}</span>
      </div>

      <div className="skills__grid">
        {SKILL_KEYS.map((key, i) => (
          <div className="skill reveal" style={{ transitionDelay: (i*0.05)+'s' }} key={key} data-hover>
            <span className="skill__num">{String(i+1).padStart(2, '0')} / 06</span>
            <div className="skill__title">{t('skill.'+key+'.title')}</div>
            <div className="skill__desc">{t('skill.'+key+'.desc')}</div>
            <div className="skill__icon">{SKILL_ICONS[key]}</div>
          </div>
        ))}
      </div>

      <div className="skills__tech reveal">
        <div className="skills__tech-label">{t('skills.tech.dev')}</div>
        <div className="skills__tech-list">
          {TECH_DEV.map(x => <span className="chip hoverable" key={x} data-hover>{x}</span>)}
        </div>
      </div>

      <div className="skills__tech reveal skills__tech--ai">
        <div className="skills__tech-label">{t('skills.tech.ai')}</div>
        <div className="skills__tech-list">
          {TECH_AI.map(x => <span className="chip chip--ai hoverable" key={x} data-hover>{x}</span>)}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HeroSection, AboutSection, SkillsSection });