// Variation heroes — v2 Datasheet, v3 Blueprint

function HeroDatasheet({ theme, onToggleTheme, time, dark }) {
  const D = window.DATA;
  return (
    <section style={{ padding: '12px 48px 14px', maxWidth: 1200, margin: '0 auto' }}>
      {/* Top nav */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingBottom: 8, marginBottom: 12,
        borderBottom: '1px solid var(--line)',
      }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-muted)', display: 'flex', gap: 16 }}>
          <span>DOC · EC-PORTFOLIO-REV-C</span>
          <span>{time}</span>
        </div>
        <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
          <nav className="main-nav" style={{ display: 'flex', gap: 14, fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--ink-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
            <a href="#experience" data-nav="experience">Experience</a>
            <a href="#skills" data-nav="skills">Skills</a>
            <a href="#projects" data-nav="projects">Projects</a>
            <a href="#contact" data-nav="contact">Contact</a>
          </nav>
          <ThemeToggle theme={theme} onToggle={onToggleTheme} />
        </div>
      </div>

      {/* Datasheet header — spec-sheet layout */}
      <div style={{
        border: '1px solid var(--line-strong)',
        background: 'var(--paper-tint)',
      }}>
        {/* Title bar */}
        <div style={{
          padding: '8px 14px',
          background: 'var(--ink)',
          color: 'var(--paper-tint)',
          display: 'flex',
          justifyContent: 'space-between',
          fontFamily: 'var(--font-mono)',
          fontSize: 10,
          letterSpacing: '0.12em',
          textTransform: 'uppercase',
        }}>
          <span>PERSONNEL SPEC SHEET / DESIGN × ESTIMATION ENGINEER</span>
          <span style={{ color: 'var(--accent-soft)' }}>● AVAILABLE</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 0 }}>
          {/* Left: photo cell */}
          <div style={{
            padding: 14,
            borderRight: '1px solid var(--line)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start',
            gap: 8,
          }}>
            <Avatar dark={dark} size={110} />
            <div className="mono faint" style={{ fontSize: 8.5, letterSpacing: '0.1em', textAlign: 'center' }}>
              FIG-01<br/>OPERATOR
            </div>
          </div>

          {/* Right: identity + specs */}
          <div style={{ padding: '14px 18px' }}>
            <h1 className="serif" style={{
              fontSize: 'clamp(28px, 3.8vw, 46px)',
              lineHeight: 1, letterSpacing: '-0.02em', marginBottom: 2,
            }}>
              Edanuele <em style={{ color: 'var(--accent)' }}>Corleto</em>
            </h1>
            <p className="serif" style={{ fontSize: 16, lineHeight: 1.35, color: 'var(--ink)', marginTop: 10, marginBottom: 12, maxWidth: 640 }}>
              I design and estimate <em>low-voltage security systems</em> — so the install team gets handed something they can actually <em>build</em>.
            </p>

            {/* Spec table */}
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(4, 1fr)',
              borderTop: '1px solid var(--line)',
              borderLeft: '1px solid var(--line)',
              fontFamily: 'var(--font-mono)',
              fontSize: 10,
              marginBottom: 12,
            }}>
              {[
                ['LOCATION', 'RIZAL, PH'],
                ['EMPLOYER', 'CALIDAD SERVICES'],
                ['TIMEZONE', 'PHT (UTC+8)'],
                ['AVAILABILITY', 'U.S. REMOTE'],
                ['EXP', '6 YRS'],
                ['BID WIN', '35%'],
                ['PROJECTS', '300+'],
                ['LICENSES', 'PRC REE · CAPM'],
              ].map(([k, v], i) => (
                <div key={i} style={{
                  padding: '6px 10px',
                  borderRight: '1px solid var(--line)',
                  borderBottom: '1px solid var(--line)',
                }}>
                  <div style={{ color: 'var(--ink-faint)', fontSize: 8.5, marginBottom: 1, letterSpacing: '0.08em' }}>{k}</div>
                  <div style={{ color: 'var(--ink)' }}>{v}</div>
                </div>
              ))}
            </div>

            {/* Specialties */}
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '3px 5px', marginBottom: 12 }}>
              {D.specialties.map((s) => (
                <span key={s} style={{
                  fontFamily: 'var(--font-mono)',
                  fontSize: 9, color: 'var(--ink-muted)',
                  padding: '2px 7px',
                  border: '1px solid var(--line)',
                  borderRadius: 2,
                  letterSpacing: '0.03em',
                }}>{s}</span>
              ))}
            </div>

            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              <a href={`mailto:${D.email}`} className="btn">Request a bid review →</a>
              <a href={`https://${D.calendly}`} className="btn secondary">Schedule a call</a>
              <a href={`https://${D.linkedin}`} className="btn secondary">LinkedIn</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroBlueprint({ theme, onToggleTheme, time, dark }) {
  const D = window.DATA;
  return (
    <section style={{ padding: '12px 48px 14px', maxWidth: 1200, margin: '0 auto' }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingBottom: 10, marginBottom: 14,
      }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--ink-muted)', letterSpacing: '0.1em' }}>{time}</div>
        <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
          <nav className="main-nav" style={{ display: 'flex', gap: 16, fontSize: 12, color: 'var(--ink-muted)' }}>
            <a href="#experience" data-nav="experience">Experience</a>
            <a href="#skills" data-nav="skills">Skills</a>
            <a href="#projects" data-nav="projects">Projects</a>
            <a href="#contact" data-nav="contact">Contact</a>
          </nav>
          <ThemeToggle theme={theme} onToggle={onToggleTheme} />
        </div>
      </div>

      {/* Blueprint card with dimension marks */}
      <div style={{
        position: 'relative',
        padding: '20px 28px 22px',
        background: `
          linear-gradient(var(--bg-elevated) 0 0),
          repeating-linear-gradient(0deg, transparent 0 19px, var(--line) 19px 20px),
          repeating-linear-gradient(90deg, transparent 0 19px, var(--line) 19px 20px)
        `,
        backgroundBlendMode: 'normal, multiply, multiply',
        border: '1px solid var(--line-strong)',
      }}>
        {/* dimension tick on top */}
        <div style={{
          position: 'absolute',
          top: -1, left: 24, right: 24,
          height: 14,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          fontFamily: 'var(--font-mono)', fontSize: 9,
          color: 'var(--ink-faint)',
        }}>
          <span style={{ background: 'var(--bg)', padding: '0 6px' }}>A</span>
          <span style={{ background: 'var(--bg)', padding: '0 6px' }}>│ 1200 UNITS │</span>
          <span style={{ background: 'var(--bg)', padding: '0 6px' }}>B</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 28, alignItems: 'center' }} className="grid-2">
          <div style={{ textAlign: 'center' }}>
            <Avatar dark={dark} size={104} />
            <div className="mono" style={{ fontSize: 9, color: 'var(--accent)', marginTop: 8, letterSpacing: '0.1em', display: 'flex', alignItems: 'center', gap: 4, justifyContent: 'center' }}>
              <span className="avail-dot">●</span> ACTIVE
            </div>
          </div>

          <div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.15em', marginBottom: 6 }}>
              SHEET 01 · PERSONNEL
            </div>
            <h1 className="serif" style={{
              fontSize: 'clamp(30px, 4.2vw, 56px)',
              lineHeight: 0.95, letterSpacing: '-0.02em',
              marginBottom: 4,
            }}>
              Edanuele <em style={{ color: 'var(--accent)' }}>Corleto</em>
            </h1>
            <div className="mono" style={{ fontSize: 10, marginBottom: 8, letterSpacing: '0.08em', color: 'var(--ink-muted)' }}>
              DESIGN × ESTIMATION ENGINEER · LOW VOLTAGE & SECURITY
            </div>
            <p className="serif" style={{ fontSize: 15, lineHeight: 1.35, maxWidth: 560, marginBottom: 10 }}>
              I design and estimate <em>low-voltage security systems</em> — so the install team gets handed something they can actually <em>build</em>.
            </p>

            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              <a href={`mailto:${D.email}`} className="btn">Request bid review →</a>
              <a href={`https://${D.calendly}`} className="btn secondary">Schedule call</a>
            </div>
          </div>

          {/* Right: revision block like a title block */}
          <div style={{
            border: '1px solid var(--line-strong)',
            background: 'var(--bg)',
            fontFamily: 'var(--font-mono)',
            fontSize: 9.5,
            minWidth: 170,
          }}>
            {[
              ['REV', 'C'],
              ['DATE', 'APR 2026'],
              ['LOC', 'RIZAL, PH'],
              ['AVAIL', 'U.S. REMOTE'],
              ['BID', '35% WIN'],
              ['PROJ', '300+'],
              ['LIC', 'PRC·CAPM'],
            ].map(([k, v], i) => (
              <div key={i} style={{
                display: 'flex', justifyContent: 'space-between',
                padding: '5px 9px',
                borderBottom: i < 6 ? '1px solid var(--line)' : 'none',
              }}>
                <span style={{ color: 'var(--ink-faint)' }}>{k}</span>
                <span style={{ color: 'var(--ink)' }}>{v}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Specialties row */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '3px 5px', marginTop: 14, paddingTop: 12, borderTop: '1px dashed var(--line)' }}>
          {D.specialties.map((s) => (
            <span key={s} style={{
              fontFamily: 'var(--font-mono)',
              fontSize: 9.5, color: 'var(--ink-muted)',
              padding: '3px 8px',
              background: 'var(--bg)',
              border: '1px solid var(--line)',
              borderRadius: 3,
              letterSpacing: '0.03em',
            }}>{s}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HeroDatasheet, HeroBlueprint });