// Landing — quiet, atmospheric. Uses real product photography.
function Landing({ onScrollHint, scrollProgress }) {
  const fade = Math.max(0, 1 - scrollProgress * 1.4);
  const slide = scrollProgress * -60;

  return (
    <section id="landing" data-screen-label="01 Landing" style={landingStyles.section}>
      <div style={landingStyles.glow} aria-hidden/>
      <div style={landingStyles.grain} aria-hidden/>

      <div style={{...landingStyles.inner, opacity: fade, transform: `translateY(${slide}px)`}}>
        <div style={landingStyles.left}>
          <div className="micro" style={{color:'var(--gold)', marginBottom: 28}}>
            Intimate Wellness, Elevated.
          </div>
          <h1 className="serif" style={landingStyles.h1}>
            Designed<br/>
            <em style={{fontStyle:'italic', color:'var(--gold)'}}>for you.</em>
          </h1>
          <p style={landingStyles.lede}>
            Quiet luxury, made for the most personal moments.<br/>
            Private. Personal. Elevated.
          </p>
          <div style={landingStyles.ctas}>
            <button className="mini" style={landingStyles.primaryCta}
                    onClick={() => onScrollHint && onScrollHint()}>
              <span>Enter your private collection</span>
              <Icon.arrow/>
            </button>
          </div>
        </div>

        <div style={landingStyles.right}>
          <BoxTeaser/>
        </div>
      </div>

    </section>
  );
}

function BoxTeaser() {
  // Real closed-box photograph, hovering with a gold halo.
  return (
    <div style={teaserStyles.frame}>
      <div style={teaserStyles.halo}/>
      <div style={teaserStyles.shadow}/>
      <img src="assets/box-closed-hero.jpg" alt="Discrete Pleasures closed box"
           style={teaserStyles.box}/>
    </div>
  );
}

const landingStyles = {
  section: {
    position: 'relative',
    minHeight: '100vh',
    padding: '140px 56px 80px',
    overflow: 'hidden',
  },
  glow: {
    position: 'absolute', inset: 0,
    background: 'radial-gradient(ellipse at 70% 40%, color-mix(in oklab, var(--gold) 14%, transparent), transparent 60%)',
    pointerEvents: 'none',
  },
  grain: {
    position: 'absolute', inset: 0, opacity: 0.04, pointerEvents: 'none',
    backgroundImage: 'radial-gradient(circle at 1px 1px, var(--ink) 1px, transparent 0)',
    backgroundSize: '3px 3px',
  },
  inner: {
    position: 'relative', maxWidth: 1480, margin: '0 auto',
    display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 80, alignItems: 'center',
    minHeight: 'calc(100vh - 220px)',
    transition: 'opacity 200ms linear',
  },
  left: { maxWidth: 560 },
  h1: {
    fontSize: 'clamp(72px, 9vw, 132px)',
    lineHeight: 0.92,
    letterSpacing: '-0.02em',
    fontWeight: 300,
    marginBottom: 36,
  },
  lede: {
    fontSize: 17, lineHeight: 1.7, color: 'var(--ink-soft)',
    fontWeight: 300, marginBottom: 48, maxWidth: 420,
  },
  ctas: {
    display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'flex-start',
  },
  primaryCta: {
    display: 'inline-flex', alignItems: 'center', gap: 14,
    padding: '20px 32px',
    border: '1px solid var(--hairline-strong)',
    borderRadius: 0,
    color: 'var(--gold)',
    background: 'transparent',
    transition: 'all 400ms',
  },
  right: {
    display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative',
  },
  scrollCue: {
    position: 'absolute', bottom: 40, left: '50%', transform: 'translateX(-50%)',
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
    transition: 'opacity 200ms',
  },
  scrollLine: {
    width: 1, height: 60, background: 'var(--hairline-strong)', position: 'relative', overflow: 'hidden',
  },
  scrollDot: {
    position: 'absolute', top: 0, left: 0, width: 1, height: 20, background: 'var(--gold)',
    animation: 'scrollDot 2.4s cubic-bezier(.65,.05,.36,1) infinite',
  },
};

const teaserStyles = {
  frame: { position: 'relative', display:'flex', flexDirection:'column', alignItems:'center' },
  halo: {
    position: 'absolute', width: 520, height: 520, top: -80,
    background: 'radial-gradient(circle, color-mix(in oklab, var(--gold) 18%, transparent), transparent 60%)',
    pointerEvents: 'none', zIndex: 0,
  },
  shadow: {
    position: 'absolute',
    width: 380, height: 60,
    borderRadius: '50%',
    background: 'radial-gradient(ellipse, rgba(0,0,0,0.7), transparent 70%)',
    filter: 'blur(20px)',
    transform: 'translateY(330px)',
  },
  box: {
    width: 460, height: 'auto',
    objectFit: 'contain',
    position: 'relative', zIndex: 1,
    animation: 'float 6s ease-in-out infinite',
    filter: 'drop-shadow(0 30px 60px rgba(0,0,0,0.6))',
  },
};

if (!document.getElementById('landing-kf')) {
  const s = document.createElement('style'); s.id = 'landing-kf';
  s.textContent = `
    @keyframes float {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }
    @keyframes scrollDot {
      0% { top: -20px; }
      100% { top: 60px; }
    }
  `;
  document.head.appendChild(s);
}

window.Landing = Landing;