// Hero — 3 variations toggleable via Tweaks
const Hero = ({ variant = 'fullbleed' }) => {
  if (variant === 'editorial') return <HeroEditorial />;
  if (variant === 'typographic') return <HeroTypographic />;
  return <HeroFullbleed />;
};

// Variant 1: Full-bleed photo + overlay text (default per user request)
const HeroFullbleed = () => {
  const [scrollY, setScrollY] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section
      id="top"
      style={{
        position: 'relative',
        minHeight: '100vh',
        color: 'var(--bone-100)',
        overflow: 'hidden',
        background: 'var(--navy-900)',
      }}
    >
      {/* Full-bleed image placeholder */}
      <div
        style={{
          position: 'absolute',
          inset: 0,
          transform: `translateY(${scrollY * 0.3}px) scale(1.05)`,
          transition: 'transform 0.05s linear',
        }}
      >
        <Placeholder
          id="hero-01"
          label="HERO — BOUTIQUE RESORT AT DUSK"
          desc="Twilight exterior of a coastal boutique hotel; architectural lighting visible through louvered facade; palmetto silhouettes foreground; ocean horizon line visible; moody blue hour; cinematic 16:9."
          style={{ width: '100%', height: '100%' }}
        />
      </div>

      {/* Gradient scrim for legibility */}
      <div
        style={{
          position: 'absolute',
          inset: 0,
          background:
            'linear-gradient(180deg, rgba(10,22,40,0.65) 0%, rgba(10,22,40,0.35) 35%, rgba(10,22,40,0.15) 55%, rgba(10,22,40,0.85) 100%)',
        }}
      />

      {/* Corner mono marks */}
      <div className="hero-corner-marks" style={{ position: 'absolute', top: 130, left: 'var(--page-pad-x)', right: 'var(--page-pad-x)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.7 }}>
        <span>N 32°04′ · W 81°05′</span>
        <span>Est. Savannah, 2006</span>
      </div>

      {/* Content */}
      <div
        className="hero-content"
        style={{
          position: 'relative',
          minHeight: '100vh',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-end',
          padding: '140px var(--page-pad-x) var(--sp-8)',
          maxWidth: 'var(--container-max)',
          margin: '0 auto',
        }}
      >
        <div className="eyebrow eyebrow--light reveal" style={{ marginBottom: 32 }}>
          ── Hospitality Construction · Southeast Coastal Corridor
        </div>
        <h1
          className="reveal hero-h1"
          style={{
            fontSize: '85px',
            lineHeight: 1,
            letterSpacing: '-0.02em',
            maxWidth: '16ch',
            marginBottom: 32,
            '--reveal-delay': '120ms',
          }}
        >
          Building the places<br />
          where <em style={{ fontStyle: 'italic', color: 'var(--brass-400)' }}>coastal hospitality</em><br />
          is made.
        </h1>

        <div
          className="reveal hero-meta-row"
          style={{
            display: 'grid',
            gridTemplateColumns: '1.2fr 1fr auto',
            gap: 48,
            alignItems: 'end',
            paddingTop: 32,
            borderTop: '1px solid rgba(242, 237, 228, 0.22)',
            '--reveal-delay': '240ms',
          }}
        >
          <p style={{ fontSize: 'var(--fs-lg)', maxWidth: '52ch', opacity: 0.9, lineHeight: 1.45 }}>
            A general contractor built exclusively around hotels, resorts, and the rooms that make coastal travel worth the trip. Ground-up, renovation, live-hotel — from Naples to Charleston.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div className="mono" style={{ opacity: 0.65, fontSize: 10 }}>Currently on-site</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-2xl)', letterSpacing: '-0.01em' }}>
              11 projects<span style={{ color: 'var(--brass-400)' }}>.</span>
            </div>
            <div style={{ fontSize: 13, opacity: 0.7 }}>FL · GA · SC · 2026 season</div>
          </div>
          <a
            href="#projects"
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 10,
              padding: '16px 24px',
              background: 'var(--bone-100)',
              color: 'var(--navy-900)',
              fontSize: 12,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              borderRadius: 2,
              transition: 'all 0.3s',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = 'var(--brass-500)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'var(--bone-100)'; }}
          >
            See the work
            <span style={{ fontSize: 16 }}>→</span>
          </a>
        </div>
      </div>

      {/* Scroll indicator */}
      <div
        style={{
          position: 'absolute',
          bottom: 24,
          left: '50%',
          transform: 'translateX(-50%)',
          fontFamily: 'var(--font-mono)',
          fontSize: 10,
          letterSpacing: '0.22em',
          opacity: 0.5,
          textTransform: 'uppercase',
        }}
      >
        Scroll ↓
      </div>
    </section>
  );
};

// Variant 2: Editorial split
const HeroEditorial = () => (
  <section
    id="top"
    style={{
      position: 'relative',
      minHeight: '100vh',
      background: 'var(--bone-100)',
      color: 'var(--navy-900)',
      paddingTop: 112,
    }}
  >
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 'calc(100vh - 112px)' }}>
      <div style={{ padding: '64px var(--page-pad-x)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div>
          <div className="eyebrow reveal" style={{ marginBottom: 48 }}>
            ── Est. Savannah, 2006 · Naples · Hilton Head
          </div>
          <h1 className="reveal" style={{ fontSize: 'var(--fs-5xl)', lineHeight: 0.95, letterSpacing: '-0.025em', '--reveal-delay': '100ms' }}>
            We build<br />hotels.<br /><em style={{ fontStyle: 'italic', color: 'var(--brass-500)' }}>Only</em> hotels.
          </h1>
          <p className="reveal" style={{ marginTop: 40, fontSize: 'var(--fs-lg)', maxWidth: '42ch', color: 'var(--ink-700)', '--reveal-delay': '200ms' }}>
            For eighteen years, one trade: coastal hospitality construction. Ground-up resorts, live-hotel PIPs, F&amp;B buildouts across Florida, Georgia, and South Carolina.
          </p>
        </div>

        <div className="reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, marginTop: 64, paddingTop: 32, borderTop: '1px solid rgba(10,22,40,0.15)', '--reveal-delay': '320ms' }}>
          {[
            { k: '18+', v: 'Years exclusively hospitality' },
            { k: '140+', v: 'Keys delivered since 2006' },
            { k: '$1.2B', v: 'Construction value managed' },
          ].map(s => (
            <div key={s.k}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-3xl)', lineHeight: 1 }}>{s.k}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-500)', marginTop: 8, letterSpacing: '0.02em' }}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ position: 'relative' }}>
        <Placeholder
          id="hero-02"
          label="HERO — ARCHITECTURAL DETAIL"
          desc="Mid-afternoon light on a coastal resort lobby: coffered ceiling, terrazzo floor, shell-white walls, single bellhop in frame; shot through wide double doors."
          style={{ width: '100%', height: '100%', minHeight: 600 }}
        />
      </div>
    </div>
  </section>
);

// Variant 3: Typographic dominant (minimal imagery)
const HeroTypographic = () => (
  <section
    id="top"
    style={{
      position: 'relative',
      minHeight: '100vh',
      background: 'var(--navy-900)',
      color: 'var(--bone-100)',
      display: 'flex',
      flexDirection: 'column',
      paddingTop: 112,
    }}
  >
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 var(--page-pad-x)', maxWidth: 'var(--container-max)', margin: '0 auto', width: '100%' }}>
      <div className="eyebrow eyebrow--light reveal" style={{ marginBottom: 48 }}>
        ── (01) — Palmetto Build Group · Index / 2026
      </div>
      <h1 className="reveal" style={{ fontSize: 'var(--fs-6xl)', lineHeight: 0.88, letterSpacing: '-0.035em', '--reveal-delay': '100ms' }}>
        Hotels,<br />
        resorts,<br />
        <em style={{ fontStyle: 'italic', color: 'var(--brass-400)' }}>rooms with a</em><br />
        view.
      </h1>
    </div>

    <div style={{ borderTop: '1px solid rgba(242,237,228,0.18)', padding: '32px var(--page-pad-x)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, maxWidth: 'var(--container-max)', margin: '0 auto', width: '100%' }}>
      {[
        ['Focus', 'Hospitality only'],
        ['Territory', 'FL · GA · SC'],
        ['Founded', 'Savannah, 2006'],
        ['Minimum', 'Projects $500K+'],
      ].map(([k, v]) => (
        <div key={k}>
          <div className="mono" style={{ opacity: 0.55, fontSize: 10, marginBottom: 8 }}>{k}</div>
          <div style={{ fontSize: 'var(--fs-lg)' }}>{v}</div>
        </div>
      ))}
    </div>
  </section>
);

window.Hero = Hero;