/* global React */
const { Button, Tab, MonoLabel, ImageFrame } = window.AlessandroMerliPortfolioDesignSystem_251cec;

const LOGO = 'assets/am-mark.png';

/**
 * HomeHero — three explorable directions for the home opener.
 *  A · Statement   — full-bleed declaration, mark floating behind
 *  B · Name-first  — monumental name, role spec column, mark anchor right
 *  C · Split gallery — big type left, featured project media right
 */
function HomeHero({ variant = 'A', onContact, onWork }) {
  const role = 'Industrial Design Engineer';
  const place = 'Milan, IT';

  const ctas = (
    <div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap' }}>
      <Button variant="primary" size="lg" trailingArrow onClick={onWork}>View work</Button>
      <Button variant="secondary" size="lg" onClick={onContact}>Get in touch</Button>
    </div>
  );

  /* ── A · STATEMENT ───────────────────────────────────────── */
  if (variant === 'A') {
    return (
      <section style={{
        position: 'relative', minHeight: 'clamp(560px, 86vh, 880px)', display: 'flex',
        alignItems: 'center', overflow: 'hidden',
        padding: 'clamp(60px,10vh,140px) var(--gutter) clamp(48px,8vh,96px)',
      }}>
        <img src={LOGO} alt="" aria-hidden="true" style={{
          position: 'absolute', right: '-4%', top: '50%', transform: 'translateY(-50%)',
          height: 'min(78vh, 760px)', width: 'auto', opacity: 0.19, filter: 'grayscale(1)',
          pointerEvents: 'none',
        }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container)', margin: '0 auto', width: '100%' }}>
          <div style={{ marginBottom: '34px' }}>
            <MonoLabel tone="muted">{role} · {place}</MonoLabel>
          </div>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--type-mega)',
            lineHeight: 0.98, letterSpacing: 'var(--ls-mega)', color: 'var(--fg-0)', margin: 0,
            maxWidth: '16ch',
          }}>
            Form, force, and the parts that move people.
          </h1>
          <p style={{
            fontFamily: 'var(--font-body)', fontSize: 'var(--type-lead)', lineHeight: 1.5,
            color: 'var(--fg-2)', margin: '32px 0 40px', maxWidth: '52ch', letterSpacing: '-0.005em',
          }}>
            I design performance bicycles and hardware — bridging creative intent with
            engineering rigor, from first sketch to tooling-ready part.
          </p>
          {ctas}
        </div>
      </section>
    );
  }

  /* ── B · NAME-FIRST ──────────────────────────────────────── */
  if (variant === 'B') {
    return (
      <section style={{
        position: 'relative', minHeight: 'clamp(560px, 86vh, 880px)', display: 'flex',
        alignItems: 'center', padding: 'clamp(60px,10vh,140px) var(--gutter)',
      }}>
        <div style={{
          maxWidth: 'var(--container)', margin: '0 auto', width: '100%',
          display: 'grid', gridTemplateColumns: 'minmax(0,1fr) auto', gap: 'clamp(28px,5vw,72px)',
          alignItems: 'center',
        }} className="am-hero-b">
          <div>
            <div style={{ marginBottom: '28px' }}><MonoLabel tone="muted">{role}</MonoLabel></div>
            <h1 style={{
              fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--type-mega)',
              lineHeight: 0.92, letterSpacing: 'var(--ls-mega)', color: 'var(--fg-0)', margin: 0,
            }}>
              Alessandro<br />Merli
            </h1>
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 'var(--type-lead)', lineHeight: 1.5,
              color: 'var(--fg-2)', margin: '30px 0 38px', maxWidth: '42ch',
            }}>
              Performance bicycles and hardware, designed where strategy, engineering,
              and manufacturing meet.
            </p>
            {ctas}
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }} className="am-hero-b-mark">
            <img src={LOGO} alt="AM" style={{
              height: 'min(54vh, 460px)', width: 'auto',
              filter: 'drop-shadow(0 30px 70px rgba(0,0,0,0.6))',
            }} />
          </div>
        </div>
      </section>
    );
  }

  /* ── C · SPLIT GALLERY ───────────────────────────────────── */
  return (
    <section style={{
      position: 'relative', minHeight: 'clamp(560px, 86vh, 880px)', display: 'flex',
      alignItems: 'center', padding: 'clamp(56px,9vh,120px) var(--gutter)',
    }}>
      <div style={{
        maxWidth: 'var(--container-wide)', margin: '0 auto', width: '100%',
        display: 'grid', gridTemplateColumns: 'minmax(0,1.05fr) minmax(0,0.95fr)',
        gap: 'clamp(28px,5vw,64px)', alignItems: 'center',
      }} className="am-hero-c">
        <div>
          <div style={{ marginBottom: '28px' }}><MonoLabel tone="muted">{role} · {place}</MonoLabel></div>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--type-display)',
            lineHeight: 1.0, letterSpacing: 'var(--ls-display)', color: 'var(--fg-0)', margin: 0,
          }}>
            Designing fast bicycles, engineered to be made.
          </h1>
          <p style={{
            fontFamily: 'var(--font-body)', fontSize: 'var(--type-lead)', lineHeight: 1.5,
            color: 'var(--fg-2)', margin: '28px 0 36px', maxWidth: '46ch',
          }}>
            Eight full-cycle launches at Cinelli, two granted patents, and an iF Design Award.
          </p>
          {ctas}
        </div>
        <div>
          <ImageFrame src={window.AM_DATA.projects[0].hero} label="Aeroscoop — Cinelli, 2025" ratio="4 / 5" radius="lg"
            caption="Flagship aero road frame · iF Design Award 2026" />
        </div>
      </div>
    </section>
  );
}

window.HomeHero = HomeHero;