// Hero.jsx — institutional billboard. Wordmark, Primary Statement, one defining line.
// Pearl ground. Centered editorial column. No CTA above the fold.
const Hero = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{
    position: 'relative',
    background: 'var(--ld-pearl-50)',
    paddingTop: isMobile ? 'clamp(48px, 10vw, 120px)' : 'clamp(80px, 12vw, 180px)',
    paddingBottom: isMobile ? 'clamp(48px, 10vw, 120px)' : 'clamp(80px, 12vw, 180px)',
    textAlign: 'center',
    overflow: 'hidden',
  }}>
    <div className="container-narrow">
      <img
        src="assets/crest-institutional.png"
        alt="The Art of Living Digitally — institutional crest"
        style={{
          height: isMobile ? 88 : 132,
          width: 'auto', margin: isMobile ? '0 auto 28px' : '0 auto 40px',
          filter: 'drop-shadow(0 4px 12px rgba(13,27,61,0.08))',
        }}
      />

      {/* Primary Statement — Cormorant Light, generous */}
      <h1 style={{
        fontFamily: 'Cormorant Garamond, serif',
        fontWeight: 300,
        fontSize: isMobile ? 'clamp(32px, 10vw, 56px)' : 'clamp(44px, 6.5vw, 96px)',
        lineHeight: 1.05,
        letterSpacing: '-0.015em',
        color: 'var(--ld-navy)',
        margin: '0 auto',
        maxWidth: isMobile ? '100%' : 920,
        textWrap: 'balance',
      }}>
        The Art of
        <br />
        <em style={{ fontStyle: 'italic', fontWeight: 300 }}>Living Digitally</em>
        <sup style={{
          fontSize: '0.22em', verticalAlign: 'super', marginLeft: 4,
          fontFamily: 'Montserrat, sans-serif', fontWeight: 500, letterSpacing: 0,
          color: 'var(--ld-gold)', top: '-1.6em', position: 'relative',
        }}>™</sup>
      </h1>

      <hr className="rule-gold" style={{ margin: isMobile ? '32px auto' : '48px auto' }} />

      {/* The single defining line */}
      <p style={{
        fontFamily: 'Cormorant Garamond, serif',
        fontStyle: 'italic',
        fontWeight: 400,
        fontSize: isMobile ? 'clamp(16px, 4.4vw, 20px)' : 'clamp(20px, 2.2vw, 28px)',
        lineHeight: 1.5,
        color: 'var(--ld-ink-2)',
        maxWidth: 720,
        margin: '0 auto',
        textWrap: 'balance',
      }}>
        A cultural institution at the intersection of digital literacy,
        lifestyle, and access.
      </p>
    </div>

    {/* Bottom hairline divider w/ small caps marker */}
    <div className="container" style={{
      marginTop: isMobile ? 'clamp(48px, 9vw, 80px)' : 'clamp(80px, 10vw, 140px)',
      display: 'flex', alignItems: 'center',
      gap: isMobile ? 14 : 32,
      justifyContent: 'center',
    }}>
      <hr style={{ flex: isMobile ? '1 1 auto' : '0 1 200px', border: 'none', borderTop: '2px solid var(--ld-navy)' }} />
      <span className="smallcap-display" style={{
        fontSize: isMobile ? 14 : 22,
        color: 'var(--ld-navy)',
        letterSpacing: isMobile ? '0.2em' : '0.28em',
        fontWeight: 500,
        whiteSpace: 'nowrap',
      }}>·  Founded 2026  ·</span>
      <hr style={{ flex: isMobile ? '1 1 auto' : '0 1 200px', border: 'none', borderTop: '2px solid var(--ld-navy)' }} />
    </div>
  </section>
  );
};

window.Hero = Hero;