// karm.dev — Hero variants
// Three variants exposed via the Tweaks panel:
//  1. 'centered'  — classic centered hero (default)
//  2. 'terminal'  — centered w/ a terminal code snippet below
//  3. 'minimal'   — left-aligned editorial, oversized type

function HeroMeta({ t }) {
  return (
    <div className="hero__meta">
      <span><strong>5+</strong> {t('hero.meta.years')}</span>
      <span className="hero__dot" />
      <span><strong>15+</strong> {t('hero.meta.projects')}</span>
      <span className="hero__dot" />
      <span className="avail-pill">
        <span className="avail-pill__dot" /> {t('hero.meta.status')}
      </span>
    </div>
  );
}

function HeroActions({ t, onPrimary, onSecondary, onCV }) {
  return (
    <div className="hero__actions">
      <Button variant="accent" size="lg" onClick={onPrimary}>{t('hero.primary')}</Button>
      <Button variant="secondary" size="lg" onClick={onSecondary}>{t('hero.secondary')}</Button>
      <Button variant="ghost" size="lg" onClick={onCV}>↓ {t('hero.tertiary')}</Button>
    </div>
  );
}

function HeroTerminal({ lang }) {
  const codeEs = {
    a: 'const kevin = {',
    b: '  rol:',
    c: "'AI Engineer + Full Stack',",
    d: '  foco:',
    e: "['LLMs', 'APIs', 'ETL'],",
    f: '  disponible:',
    g: 'true',
    h: '};',
    i: '// respondo en <24h',
  };
  const codeEn = {
    a: 'const kevin = {',
    b: '  role:',
    c: "'AI Engineer + Full Stack',",
    d: '  focus:',
    e: "['LLMs', 'APIs', 'ETL'],",
    f: '  available:',
    g: 'true',
    h: '};',
    i: '// replies in <24h',
  };
  const c = lang === 'en' ? codeEn : codeEs;
  return (
    <div className="hero__terminal">
      <div className="hero__terminal-bar">
        <span /><span /><span />
        <span className="hero__terminal-bar-title">~/karm.dev — zsh</span>
      </div>
      <div className="hero__terminal-body">
        <div><span className="prompt">$</span> <span className="comment">// snapshot</span></div>
        <div>{c.a}</div>
        <div>  <span className="key">{c.b.trim()}</span> <span className="str">{c.c}</span></div>
        <div>  <span className="key">{c.d.trim()}</span> <span className="punc">{c.e}</span></div>
        <div>  <span className="key">{c.f.trim()}</span> <span className="str">{c.g}</span><span className="punc">,</span></div>
        <div>{c.h}</div>
        <div><span className="comment">{c.i}</span><span className="cursor-blink" /></div>
      </div>
    </div>
  );
}

function Hero({ variant = 'centered', lang, t, onPrimary, onSecondary, onCV }) {
  const title = (
    <h1 className="hero__title">
      {t('hero.title.a')}<em>{t('hero.title.em')}</em>{t('hero.title.b')}
    </h1>
  );

  if (variant === 'minimal') {
    return (
      <section className="hero hero--minimal">
        <div className="hero__inner">
          <p className="hero__eyebrow" style={{background:'transparent', padding: 0, color:'var(--accent)'}}>{t('hero.minimal.kicker')}</p>
          {title}
          <div className="hero__divider" />
          <p className="hero__lead">{t('hero.lead')}</p>
          <HeroActions t={t} onPrimary={onPrimary} onSecondary={onSecondary} onCV={onCV} />
          <div style={{marginTop: 48}}>
            <HeroMeta t={t} />
          </div>
        </div>
      </section>
    );
  }

  if (variant === 'terminal') {
    return (
      <section className="hero hero--split">
        <div className="hero__inner">
          <div>
            <p className="hero__eyebrow">{t('hero.eyebrow')}</p>
            {title}
            <p className="hero__lead">{t('hero.lead')}</p>
            <HeroActions t={t} onPrimary={onPrimary} onSecondary={onSecondary} onCV={onCV} />
            <div style={{marginTop: 32}}><HeroMeta t={t} /></div>
          </div>
          <HeroTerminal lang={lang} />
        </div>
      </section>
    );
  }

  // default centered
  return (
    <section className="hero">
      <div className="hero__inner">
        <p className="hero__eyebrow">{t('hero.eyebrow')}</p>
        {title}
        <p className="hero__lead">{t('hero.lead')}</p>
        <HeroActions t={t} onPrimary={onPrimary} onSecondary={onSecondary} onCV={onCV} />
        <HeroMeta t={t} />
      </div>
    </section>
  );
}

window.Hero = Hero;