/* eslint-disable */
// Section 02 — Hero. 100vh. Full-bleed process photo placeholder.
// Centered acid-yellow logo with tagline. Bottom-corner micro labels.

// Per-character delays for the entry animations. Keys map to logoAnim values.
const HERO_LOGO_DELAYS = {
  settle: { brL: 200, brR: 200, ch: (i) => 420 + i * 80 },
  build:  { brL: 0,   brR: 820, ch: (i) => 120 + i * 90 },
  none:   null,
};

const HERO_LOGO_ROWS = [
  [{ k: 'brL', ch: '[' }, { k: 'ch', ch: 'u' }, { k: 'ch', ch: 'n' }, { k: 'ch', ch: 'i' }],
  [{ k: 'ch',  ch: 'c' }, { k: 'ch', ch: 'r' }, { k: 'ch', ch: 'a' }, { k: 'ch', ch: 'f' }, { k: 'ch', ch: 't' }, { k: 'brR', ch: ']' }],
];

const HeroLogo = ({ anim = 'settle' }) => {
  const delays = HERO_LOGO_DELAYS[anim];
  let chIdx = 0;
  const renderPiece = (p, i) => {
    let cls = 'uc-hero-logo__ch';
    let delay = 0;
    if (p.k === 'brL') { cls = 'uc-hero-logo__br uc-hero-logo__br--l'; delay = delays?.brL ?? 0; }
    else if (p.k === 'brR') { cls = 'uc-hero-logo__br uc-hero-logo__br--r'; delay = delays?.brR ?? 0; }
    else { delay = delays ? delays.ch(chIdx) : 0; chIdx += 1; }
    return (
      <span key={i} className={cls} style={{ animationDelay: `${delay}ms` }}>{p.ch}</span>
    );
  };
  return (
    <div
      className="uc-hero-logo"
      data-anim={anim}
      style={{ fontSize: 'clamp(96px, 14vw, 200px)', alignItems: 'center' }}
    >
      {HERO_LOGO_ROWS.map((row, r) => (
        <div key={r} className="uc-hero-logo__row">{row.map(renderPiece)}</div>
      ))}
    </div>
  );
};

const Hero = ({ tone = 'raking', showCue = true, logoAnim = 'settle' }) => (
  <section
    id="top"
    data-screen-label="01 hero"
    style={{
      position: 'relative',
      minHeight: 'min(100vh, 940px)',
      height: '100vh',
      width: '100%',
      overflow: 'hidden',
      color: '#FDFE78',
    }}
  >
    <img
      src={(window.__resources && window.__resources['assets/uc-hero-leather.jpeg']) || "assets/uc-hero-leather.jpeg"}
      alt="Detail of a bespoke leather and timber lounge chair"
      style={{
        position: 'absolute', inset: 0, zIndex: 1,
        width: '100%', height: '100%',
        objectFit: 'cover', objectPosition: 'center',
        display: 'block',
      }}
    />

    {/* dark overlay per spec */}
    <div style={{
      position: 'absolute', inset: 0, zIndex: 2,
      background: 'linear-gradient(to bottom, rgba(59,34,25,0.32) 0%, rgba(59,34,25,0.62) 100%)',
      pointerEvents: 'none',
    }} />

    {/* centred logo + tagline */}
    <div style={{
      position: 'absolute', inset: 0, zIndex: 3,
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      padding: '0 24px',
    }}>
      <HeroLogo key={logoAnim} anim={logoAnim} />
      <div style={{
        marginTop: 42,
        fontFamily: 'var(--font-body)',
        fontSize: 14,
        letterSpacing: '0.32em',
        color: '#FDFE78',
        opacity: 0.88,
        animation: logoAnim === 'none' ? 'none' : 'ucHeroTagline 700ms var(--ease-craft) 1400ms both',
      }}>Form through process</div>

      {/* call to action */}
      <div style={{
        marginTop: 44,
        display: 'flex', flexWrap: 'wrap', gap: 16, justifyContent: 'center',
        animation: logoAnim === 'none' ? 'none' : 'ucHeroTagline 700ms var(--ease-craft) 1700ms both',
      }}>
        <a href="#contact" onClick={(e) => { e.preventDefault(); const el = document.getElementById('contact'); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }} style={{
          fontFamily: 'var(--font-body)', fontSize: 14, letterSpacing: '0.04em',
          padding: '15px 30px', textDecoration: 'none',
          background: 'var(--color-acid-yellow)', color: 'var(--color-deep-brown)',
          fontWeight: 600, cursor: 'pointer',
          transition: 'transform 240ms var(--ease-craft), filter 240ms var(--ease-craft)',
        }}
          onMouseEnter={(e) => { e.currentTarget.style.filter = 'brightness(1.05)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.filter = 'none'; e.currentTarget.style.transform = 'none'; }}
        >Book a consultation</a>
        <a href="#projects" onClick={(e) => { e.preventDefault(); const el = document.getElementById('projects'); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }} style={{
          fontFamily: 'var(--font-body)', fontSize: 14, letterSpacing: '0.04em',
          padding: '15px 30px', textDecoration: 'none',
          background: 'transparent', color: 'var(--color-acid-yellow)',
          border: '1px solid rgba(253,254,120,0.6)', fontWeight: 500, cursor: 'pointer',
          transition: 'background 240ms var(--ease-craft), color 240ms var(--ease-craft)',
        }}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(253,254,120,0.12)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
        >See projects</a>
      </div>
    </div>

    {/* bottom rule + micro labels */}
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 32, zIndex: 3,
    }}>
      <div className="uc-shell" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        gap: 16,
      }}>
        <div style={{
          fontFamily: 'var(--font-body)', fontSize: 11,
          letterSpacing: '0.22em',
          color: 'rgba(253, 254, 120, 0.7)',
        }}>Riyadh, Saudi Arabia</div>
      </div>
    </div>

    {/* scroll cue removed — was overlapping the CTA */}
    <style>{`
      @keyframes ucHeroCue {
        0%, 100% { transform: translateX(-50%) scaleY(0.2); transform-origin: top; opacity: 0.2; }
        50%      { transform: translateX(-50%) scaleY(1);   transform-origin: top; opacity: 0.9; }
      }
      @keyframes ucHeroTagline {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 0.88; transform: none; }
      }
    `}</style>
  </section>
);

Object.assign(window, { Hero });