// ───────── Canonical hero copy (Hero A is source of truth) ─────────
const HERO_COPY = {
  eyebrow: 'N.º 001 — INGENIERÍA DE IA',
  titleLineOne: 'Mi Laboratorio De',
  titleLineTwo: 'IA Agéntica',
  description: 'Pensar, prototipar, iterar. Este es mi portafolio y laboratorio personal: donde la teoría de modelos se convierte en código funcional y soluciones reales.',
  ctaPrimary: { label: 'Ver soluciones →', href: '#servicios' },
  ctaSecondary: { label: 'Explorar proyectos', href: '#trabajo' },
  stamps: [
    { text: 'EST. 2026', color: 'accent' },
    { text: 'MX/REMOTE', color: '#888' },
  ],
};

const Hero = ({ tweaks }) => {
  const heroStyle = tweaks.heroStyle || 'A';

  return (
    <section style={{
      minHeight: '100vh',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 'clamp(80px, 12vh, 140px) clamp(16px, 4vw, 48px) clamp(40px, 6vh, 80px)',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1280, width: '100%', position: 'relative', zIndex: 1 }}>
        {heroStyle === 'A' && <HeroVariantA tweaks={tweaks} />}
        {heroStyle === 'B' && <HeroVariantB tweaks={tweaks} />}
        {heroStyle === 'C' && <HeroVariantC tweaks={tweaks} />}
      </div>
    </section>
  );
};

// ───────── Typewriter for Hero A ─────────
const useTypewriter = (text, { speed = 55, startDelay = 250, enabled = true } = {}) => {
  const [shown, setShown] = React.useState(enabled ? '' : text);
  const [done, setDone] = React.useState(!enabled);

  React.useEffect(() => {
    if (!enabled) {
      setShown(text);
      setDone(true);
      return;
    }
    setShown('');
    setDone(false);
    let i = 0;
    let timer;
    const tick = () => {
      i++;
      setShown(text.slice(0, i));
      if (i < text.length) {
        timer = setTimeout(tick, speed);
      } else {
        setDone(true);
      }
    };
    timer = setTimeout(tick, startDelay);
    return () => clearTimeout(timer);
  }, [text, speed, startDelay, enabled]);

  return [shown, done];
};

// ───────── Variant A — Split (grid + OS window) ─────────
const HeroVariantA = ({ tweaks }) => {
  const tweaksOn = tweaks.tweaksOn !== false;
  const [ref, visible] = window.useReveal({ threshold: 0.05 });

  const fullTitle = `${HERO_COPY.titleLineOne}\n${HERO_COPY.titleLineTwo}`;
  const [typed] = useTypewriter(fullTitle, { enabled: tweaksOn, speed: 55, startDelay: 280 });
  const breakIdx = typed.indexOf('\n');
  const beforeBreak = breakIdx === -1 ? typed : typed.slice(0, breakIdx);
  const afterBreak = breakIdx === -1 ? '' : typed.slice(breakIdx + 1);

  return (
    <div ref={ref} className="hero-split" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
      <div>
        <div className={`reveal ${visible ? 'is-visible' : ''}`} style={{
          fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--accent)',
          marginBottom: 16, letterSpacing: '0.06em',
          '--reveal-delay': '0ms',
        }}>
          {HERO_COPY.eyebrow}
        </div>
        <h1 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(40px, 6vw, 80px)',
          fontWeight: 800, lineHeight: 1.05,
          color: '#111', margin: '0 0 24px',
          letterSpacing: '-0.03em',
          minHeight: '2.1em',
        }}>
          {beforeBreak}
          {breakIdx !== -1 && <br/>}
          <span style={{ color: 'var(--accent)' }}>{afterBreak}</span>
        </h1>
        <p className={`reveal ${visible ? 'is-visible' : ''}`} style={{
          fontFamily: 'var(--font-body)', fontSize: 18,
          lineHeight: 1.6, color: '#444', maxWidth: 460,
          margin: '0 0 32px',
          '--reveal-delay': '180ms',
        }}>
          {HERO_COPY.description}
        </p>
        <div className={`reveal ${visible ? 'is-visible' : ''}`} style={{
          display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap',
          '--reveal-delay': '270ms',
        }}>
          <a href={HERO_COPY.ctaPrimary.href} className="btn-primary" style={{
            fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600,
            background: 'var(--accent)', color: '#F4EFE6',
            padding: '14px 28px', border: '2px solid #111',
            textDecoration: 'none', boxShadow: '4px 4px 0 #111',
            display: 'inline-block',
          }}>{HERO_COPY.ctaPrimary.label}</a>
          <a href={HERO_COPY.ctaSecondary.href} style={{
            fontFamily: 'var(--font-mono)', fontSize: 14,
            color: '#111', textDecoration: 'none',
            borderBottom: '2px solid #111', paddingBottom: 2,
          }}>{HERO_COPY.ctaSecondary.label}</a>
        </div>
        <div className={`reveal ${visible ? 'is-visible' : ''}`} style={{
          marginTop: 32, display: 'flex', gap: 16,
          '--reveal-delay': '360ms',
        }}>
          {HERO_COPY.stamps.map((s, i) => (
            <Stamp key={i} text={s.text} color={s.color === 'accent' ? 'var(--accent)' : s.color} />
          ))}
        </div>
      </div>
      <div className={`reveal ${visible ? 'is-visible' : ''}`} style={{ '--reveal-delay': '150ms' }}>
        <OSWindow title="nn.live — v2.0">
          <div style={{ padding: 24, background: 'var(--paper-soft)' }}>
            <NeuralNetwork />
            <div style={{ marginTop: 20, fontFamily: 'var(--font-mono)', fontSize: 12, color: '#666', lineHeight: 1.8 }}>
              <div>nombre: <span style={{ color: '#111' }}>Mau</span></div>
              <div>rol: <span style={{ color: '#111' }}>AI Software Developer</span></div>
              <div>base: <span style={{ color: '#111' }}>México / Remote</span></div>
              <div>estado: <span style={{ color: 'var(--accent)' }}><span className="status-dot" />disponible para proyectos de automatización</span></div>
            </div>
          </div>
        </OSWindow>
      </div>
    </div>
  );
};

// ───────── Variant B — Centered typographic (same copy as A) ─────────
const HeroVariantB = ({ tweaks }) => {
  const [ref, visible] = window.useReveal({ threshold: 0.05 });

  return (
    <div ref={ref} style={{ textAlign: 'center', maxWidth: 900, margin: '0 auto' }}>
      <div className={`reveal ${visible ? 'is-visible' : ''}`} style={{
        fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--accent)',
        marginBottom: 20, letterSpacing: '0.08em',
        '--reveal-delay': '0ms',
      }}>
        {HERO_COPY.eyebrow}
      </div>
      <h1 className={`reveal ${visible ? 'is-visible' : ''}`} style={{
        fontFamily: 'var(--font-display)',
        fontSize: 'clamp(48px, 8vw, 110px)',
        fontWeight: 800, lineHeight: 0.95,
        color: '#111', margin: '0 0 32px',
        letterSpacing: '-0.04em',
        '--reveal-delay': '90ms',
      }}>
        {HERO_COPY.titleLineOne}<br/>
        <span style={{ color: 'var(--accent)' }}>{HERO_COPY.titleLineTwo}</span>
      </h1>
      <p className={`reveal ${visible ? 'is-visible' : ''}`} style={{
        fontFamily: 'var(--font-body)', fontSize: 20,
        lineHeight: 1.6, color: '#555', maxWidth: 640, margin: '0 auto 40px',
        '--reveal-delay': '180ms',
      }}>
        {HERO_COPY.description}
      </p>
      <div className={`reveal ${visible ? 'is-visible' : ''}`} style={{
        display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap',
        '--reveal-delay': '270ms',
      }}>
        <a href={HERO_COPY.ctaPrimary.href} className="btn-primary" style={{
          fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600,
          background: 'var(--accent)', color: '#F4EFE6',
          padding: '14px 28px', border: '2px solid #111',
          textDecoration: 'none', boxShadow: '4px 4px 0 #111',
        }}>{HERO_COPY.ctaPrimary.label}</a>
        <a href={HERO_COPY.ctaSecondary.href} className="btn-primary" style={{
          fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600,
          background: '#F4EFE6', color: '#111',
          padding: '14px 28px', border: '2px solid #111',
          textDecoration: 'none', boxShadow: '4px 4px 0 #111',
        }}>{HERO_COPY.ctaSecondary.label}</a>
      </div>
      <div className={`reveal ${visible ? 'is-visible' : ''}`} style={{
        marginTop: 48, display: 'flex', gap: 16, justifyContent: 'center',
        '--reveal-delay': '360ms',
      }}>
        {HERO_COPY.stamps.map((s, i) => (
          <Stamp key={i} text={s.text} color={s.color === 'accent' ? 'var(--accent)' : s.color} />
        ))}
      </div>
    </div>
  );
};

// ───────── Variant C — Terminal / console (same copy as A) ─────────
const HeroVariantC = ({ tweaks }) => {
  const [ref, visible] = window.useReveal({ threshold: 0.05 });

  return (
    <div ref={ref}>
      <OSWindow title="~/mau.dev" style={{ maxWidth: 760, margin: '0 auto' }}>
        <div style={{ padding: 'clamp(24px, 4vw, 48px)', background: 'var(--paper-soft)', fontFamily: 'var(--font-mono)' }}>
          <div className={`reveal ${visible ? 'is-visible' : ''}`} style={{
            fontSize: 12, color: 'var(--accent)', marginBottom: 8,
            '--reveal-delay': '0ms',
          }}>
            $ whoami
          </div>
          <div className={`reveal ${visible ? 'is-visible' : ''}`} style={{
            fontSize: 11, color: 'var(--accent)', marginBottom: 12, letterSpacing: '0.08em',
            '--reveal-delay': '60ms',
          }}>
            # {HERO_COPY.eyebrow}
          </div>
          <h1 className={`reveal ${visible ? 'is-visible' : ''}`} style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(36px, 5vw, 64px)',
            fontWeight: 800, lineHeight: 1.05,
            color: '#111', margin: '0 0 20px',
            letterSpacing: '-0.03em',
            '--reveal-delay': '120ms',
          }}>
            {HERO_COPY.titleLineOne}<br/>
            <span style={{ color: 'var(--accent)' }}>{HERO_COPY.titleLineTwo}</span>
          </h1>
          <p className={`reveal ${visible ? 'is-visible' : ''}`} style={{
            fontFamily: 'var(--font-body)', fontSize: 16,
            lineHeight: 1.65, color: '#444', margin: '0 0 24px',
            '--reveal-delay': '210ms',
          }}>
            {HERO_COPY.description}
          </p>
          <div className={`reveal ${visible ? 'is-visible' : ''}`} style={{
            fontSize: 14, color: '#666', lineHeight: 1.9, marginBottom: 24,
            '--reveal-delay': '300ms',
          }}>
            <div>→ Estado: <span style={{ color: 'var(--accent)' }}><span className="status-dot" />disponible para proyectos Q2 2026</span></div>
          </div>
          <div className={`reveal ${visible ? 'is-visible' : ''}`} style={{
            display: 'flex', gap: 12, flexWrap: 'wrap',
            '--reveal-delay': '380ms',
          }}>
            <a href={HERO_COPY.ctaPrimary.href} className="btn-primary" style={{
              fontSize: 13, fontWeight: 600,
              background: 'var(--accent)', color: '#F4EFE6',
              padding: '10px 20px', border: '2px solid #111',
              textDecoration: 'none', boxShadow: '3px 3px 0 #111',
              fontFamily: 'var(--font-mono)',
            }}>{HERO_COPY.ctaPrimary.label}</a>
            <a href={HERO_COPY.ctaSecondary.href} className="btn-primary" style={{
              fontSize: 13, fontWeight: 600,
              background: '#fff', color: '#111',
              padding: '10px 20px', border: '2px solid #111',
              textDecoration: 'none', boxShadow: '3px 3px 0 #111',
              fontFamily: 'var(--font-mono)',
            }}>{HERO_COPY.ctaSecondary.label}</a>
          </div>
          <div className={`reveal ${visible ? 'is-visible' : ''}`} style={{
            marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap',
            '--reveal-delay': '470ms',
          }}>
            {HERO_COPY.stamps.map((s, i) => (
              <Stamp key={i} text={s.text} color={s.color === 'accent' ? 'var(--accent)' : s.color} size={10} />
            ))}
          </div>
        </div>
      </OSWindow>
    </div>
  );
};

window.Hero = Hero;