/*
  about.jsx — sección "Sobre mí" con 3 variaciones:
    · editorial  → premium / magazine
    · kinetic    → movimiento, marquees, escala
    · dossier    → business-card data-rich

  Todos comparten el mismo data (i18n) — cambia el framing visual.
*/

// ───────── WhatsApp CTA shared ─────────
function WhatsAppCta({ t, variant = 'primary' }) {
  return (
    <a
      href={t.about.ctaUrl}
      target="_blank"
      rel="noopener noreferrer"
      className={`btn about-cta about-cta-${variant}`}>
      
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
        <path d="M8 1.5a6.5 6.5 0 0 0-5.5 10L1.5 14.5l3-1A6.5 6.5 0 1 0 8 1.5Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
        <path d="M5.8 6.4c.1 1.6 1.2 2.7 2.8 2.8.4 0 .9-.2 1-.6l.4-.7c.1-.2 0-.4-.2-.5l-.9-.4c-.2-.1-.4 0-.5.1l-.3.4c-.6-.2-1.1-.7-1.3-1.3l.4-.3c.1-.1.2-.3.1-.5l-.4-.9c-.1-.2-.3-.3-.5-.2l-.7.4c-.4.1-.6.6-.6 1 0 0 0 .4 0 .4Z" fill="currentColor" />
      </svg>
      {t.about.cta}
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
        <path d="M2 7h10m0 0L8 3m4 4L8 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      </svg>
    </a>);

}

// ───────── Stat shared ─────────
function StatItem({ num, label, big }) {
  return (
    <div className={big ? 'stat stat-big' : 'stat'}>
      <div className="stat-num"><CountUp value={num} /></div>
      <div className="stat-label">{label}</div>
    </div>);

}

// ───────── Mantra pull-quote ─────────
function Mantra({ t, size = 'md' }) {
  return (
    <blockquote className={`about-mantra about-mantra-${size}`}>
      <span className="about-mantra-mark" aria-hidden="true">“</span>
      <p>{t.about.mantra}</p>
      <cite>{t.about.mantraAttr}</cite>
    </blockquote>);

}

// ───────── PLATFORM ICONS ─────────
const PLATFORM_ICONS = {
  instagram:
  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.6" />
      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.6" />
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" />
    </svg>,

  tiktok:
  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M16 3v2.2A5 5 0 0 0 21 10v2.4a7.2 7.2 0 0 1-5-2v6.4a5.4 5.4 0 1 1-5.4-5.4c.3 0 .6 0 .9.1V14a3 3 0 1 0 2.1 2.9V3H16Z" fill="currentColor" />
    </svg>,

  youtube:
  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <rect x="2" y="5" width="20" height="14" rx="3.5" stroke="currentColor" strokeWidth="1.6" />
      <path d="M10.5 9.5v5l4.5-2.5-4.5-2.5Z" fill="currentColor" />
    </svg>

};

const PLATFORM_LABEL = { instagram: 'Instagram', tiktok: 'TikTok', youtube: 'YouTube' };

// ───────── ABOUT · SOCIAL ─────────
// 3 columnas (una por plataforma) con header (icono · handle · followers · link)
// y 2-3 thumbnails de posts. Click en cada uno → al post real.
function AboutSocial({ t, theme = 'light' }) {
  const ref = useReveal();
  return (
    <div className={`about-social about-social-${theme} reveal`} ref={ref}>
      <div className="about-social-head">
        <div>
          <div className="eyebrow about-social-eyebrow">{t.about.socialLabel}</div>
          <p className="about-social-lead">{t.about.socialLead}</p>
        </div>
      </div>
      <div className="about-social-grid">
        {t.about.social.map((p, i) =>
        <article className={`about-social-card about-social-${p.platform}`} key={i}>
            <header className="about-social-card-head">
              <a href={p.url} target="_blank" rel="noopener noreferrer" className="about-social-card-handle">
                <span className="about-social-icon" aria-hidden="true">{PLATFORM_ICONS[p.platform]}</span>
                <span className="about-social-card-handle-text">
                  <b>{p.handle}</b>
                  <small>{PLATFORM_LABEL[p.platform]} · {p.followers}</small>
                </span>
              </a>
            </header>
            <div className={`about-social-posts about-social-posts-${p.posts.length}`}>
              {p.posts.map((post, j) =>
            <a
              key={j}
              href={p.url}
              target="_blank"
              rel="noopener noreferrer"
              className={`about-social-post about-social-post-${post.type}`}
              aria-label={post.caption}>
              
                  <div className="about-social-post-thumb">
                    {post.thumb ?
                <img src={post.thumb} alt="" /> :
                <span className="about-social-post-placeholder">post · {post.meta.split(' · ')[0]}</span>
                }
                    {(post.type === 'video' || post.type === 'reel') &&
                <span className="about-social-post-play" aria-hidden="true">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                          <path d="M7 5l8 5-8 5V5Z" fill="currentColor" />
                        </svg>
                      </span>
                }
                  </div>
                  <div className="about-social-post-body">
                    <div className="about-social-post-caption">{post.caption}</div>
                    <div className="about-social-post-meta">{post.meta}</div>
                  </div>
                </a>
            )}
            </div>
            <a href={p.url} target="_blank" rel="noopener noreferrer" className="about-social-card-cta">
              Ver perfil
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                <path d="M3 9l6-6m0 0H4.5M9 3v4.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
              </svg>
            </a>
          </article>
        )}
      </div>
    </div>);

}


function AboutEditorial({ t }) {
  return (
    <section className="section about-section about-editorial" id="about" data-screen-label="03 About" style={{ padding: "64px 0px 10px" }}>
      <div className="container">
        {/* Banner de stats arriba — números grandes y limpios */}
        <div className="about-edit-banner reveal" ref={useReveal()}>
          {t.about.stats.map((s, i) =>
          <div className="about-edit-banner-stat" key={i}>
              <div className="about-edit-banner-num"><CountUp value={s.num} /></div>
              <div className="about-edit-banner-label">{s.label}</div>
            </div>
          )}
        </div>

        <div className="about-edit-grid">
          <div className="about-edit-portrait-col reveal" ref={useReveal()}>
            <div className="about-portrait">
              <img src="assets/emiliano.webp" alt="Emiliano Centenero" style={{ height: "450px" }} />
              <div className="about-portrait-mark">EC</div>
            </div>
            <WhatsAppCta t={t} variant="primary" />
          </div>

          <div className="about-edit-body reveal" ref={useReveal()}>
            <div className="eyebrow">{t.about.eyebrow}</div>
            <h2 className="about-title" style={{ fontSize: "38px" }}>
              {t.about.title} <em>{t.about.titleEm}</em> {t.about.title2}
            </h2>
            <p className="about-text">{t.about.p2}</p>

            <Mantra t={t} size="md" />
          </div>
        </div>
      </div>
    </section>);

}

// ───────── MODE 2: KINETIC / MOVIMIENTO ─────────
// Headline "Movimiento" gigante con kerning negativo. Marquee infinito de zonas.
// Mantra a escala. Portrait offset.
function AboutKinetic({ t }) {
  // Duplicamos las zonas para que el marquee loop sea seamless
  const zones = [...t.about.zones, ...t.about.zones];
  return (
    <section className="section about-section about-kinetic" id="about" data-screen-label="03 About">
      <div className="about-kin-head reveal" ref={useReveal()}>
        <div className="eyebrow about-kin-eyebrow">{t.about.eyebrow}</div>
        <h2 className="about-kin-title">
          <span className="about-kin-word">{t.about.kineticHead}</span>
          <span className="about-kin-sub">{t.about.kineticSub}</span>
        </h2>
      </div>

      <div className="container">
        <div className="about-kin-body">
          <div className="about-kin-portrait reveal" ref={useReveal()}>
            <img src="assets/emiliano.webp" alt="Emiliano Centenero" />
          </div>
          <div className="about-kin-text reveal" ref={useReveal()}>
            <p className="about-text">{t.about.p1}</p>
            <p className="about-text">{t.about.p2}</p>
            <p className="about-personal">{t.about.personal}</p>
            <WhatsAppCta t={t} variant="accent" />
          </div>
        </div>
      </div>

      <div className="about-kin-stats reveal" ref={useReveal()}>
        {t.about.stats.map((s, i) =>
        <div className="about-kin-stat" key={i}>
            <div className="about-kin-stat-num"><CountUp value={s.num} /></div>
            <div className="about-kin-stat-label">{s.label}</div>
          </div>
        )}
      </div>

      <div className="about-kin-mantra-wrap reveal" ref={useReveal()}>
        <p className="about-kin-mantra">{t.about.mantra}</p>
        <cite className="about-kin-mantra-attr">{t.about.mantraAttr}</cite>
      </div>

      <div className="about-kin-zones" aria-label={t.about.zonesLabel}>
        <div className="about-kin-zones-label">
          <span>{t.about.zonesLabel}</span>
          <span className="about-kin-zones-count">{t.about.zones.length}+</span>
        </div>
        <div className="about-kin-marquee">
          <div className="about-kin-marquee-track">
            {zones.map((z, i) =>
            <span className="about-kin-zone" key={i}>
                {z}
                <span className="about-kin-zone-dot" aria-hidden="true">·</span>
              </span>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ───────── MODE 3: DOSSIER ─────────
// Layout tipo "ficha técnica": retrato + grid de datos estructurados.
function AboutDossier({ t }) {
  return (
    <section className="section about-section about-dossier" id="about" data-screen-label="03 About">
      <div className="container">
        <div className="about-dos-head reveal" ref={useReveal()}>
          <div className="eyebrow">{t.about.eyebrow}</div>
          <h2 className="about-title about-dos-title">
            {t.about.title} <em>{t.about.titleEm}</em> {t.about.title2}
          </h2>
        </div>

        <div className="about-dos-grid">
          <div className="about-dos-portrait reveal" ref={useReveal()}>
            <img src="assets/emiliano.webp" alt="Emiliano Centenero" />
            <div className="about-dos-id">
              <div className="about-dos-name">Emiliano Centenero</div>
              <div className="about-dos-role">{t.about.dossierRole}</div>
              <div className="about-dos-badges">
                {t.about.badges.map((b, i) => <span className="about-dos-badge" key={i}>{b}</span>)}
              </div>
            </div>
          </div>

          <div className="about-dos-info reveal" ref={useReveal()}>
            <div className="about-dos-card about-dos-card-text">
              <p className="about-text">{t.about.p1}</p>
              <p className="about-text">{t.about.p2}</p>
            </div>

            <div className="about-dos-card about-dos-card-stats">
              <div className="about-dos-card-label">Track record</div>
              <div className="about-dos-stats">
                {t.about.stats.map((s, i) =>
                <div className="about-dos-stat" key={i}>
                    <div className="about-dos-stat-num"><CountUp value={s.num} /></div>
                    <div className="about-dos-stat-label">{s.label}</div>
                  </div>
                )}
              </div>
            </div>

            <div className="about-dos-card about-dos-card-mantra">
              <Mantra t={t} size="sm" />
            </div>

            <div className="about-dos-card about-dos-card-alliances">
              <div className="about-dos-card-label">{t.about.alliancesLabel}</div>
              <div className="about-dos-alliances">
                {t.about.alliances.map((a, i) => <a className="about-dos-alliance" key={i} href={a.url || '#'} target="_blank" rel="noopener noreferrer">{a.name}</a>)}
              </div>
            </div>

            <div className="about-dos-card about-dos-card-personal">
              <div className="about-dos-card-label">Fuera del trabajo</div>
              <p className="about-personal">{t.about.personal}</p>
            </div>

            <div className="about-dos-cta-wrap">
              <WhatsAppCta t={t} variant="primary" />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ───────── About switcher ─────────
function About({ t, mode = 'editorial' }) {
  if (mode === 'kinetic') return <AboutKinetic t={t} />;
  if (mode === 'dossier') return <AboutDossier t={t} />;
  return <AboutEditorial t={t} />;
}

Object.assign(window, { About, AboutEditorial, AboutKinetic, AboutDossier });