// Splash / landing hero — used at the very top of every direction.
// Full-bleed background of Dr. Bair at the microscope, slow ken-burns animation
// (zoom + pan), centered name + specialties, scroll cue. Variants tweak typography
// and treatment to match each direction's voice.

function SplashHero({ variant = 'editorial', palette }) {
  // Cinematic 21:9 crop applied via backgroundSize/position; the same source image
  // already used for "Apical microsurgery · Fig 06".
  const c = palette || {};
  const ink = c.ink || '#1f1a14';
  const bg = c.bg || '#f5f0e8';
  const accent = c.accent || '#9c5a3c';

  // Typography per variant
  const typography = {
    editorial: {
      family: '"Tiempos Headline", "Playfair Display", Georgia, serif',
      weight: 350,
      letter: '-.025em',
      italic: '"Tiempos Headline", Georgia, serif',
    },
    clinical: {
      family: '"Cormorant Garamond", "Times New Roman", serif',
      weight: 400,
      letter: '-.015em',
      italic: '"Cormorant Garamond", serif',
    },
    modern: {
      family: '"Instrument Serif", "Fraunces", Georgia, serif',
      weight: 400,
      letter: '-.02em',
      italic: '"Instrument Serif", serif',
    },
  };
  const t = typography[variant] || typography.editorial;

  return (
    <section
      data-anchor="splash"
      style={{
        position: 'relative',
        width: '100%',
        height: 900, // matches artboard height — fills the artboard for the splash
        overflow: 'hidden',
        background: '#1a1612',
      }}
    >
      <style>{`
        @keyframes splash-kenburns {
          0%   { transform: scale(1.06) translate(-1.2%, 0.5%); }
          50%  { transform: scale(1.14) translate(1.2%, -1.0%); }
          100% { transform: scale(1.06) translate(-1.2%, 0.5%); }
        }
        @keyframes splash-rise {
          0%   { opacity: 0; transform: translateY(24px); filter: blur(8px); }
          100% { opacity: 1; transform: translateY(0); filter: blur(0); }
        }
        @keyframes splash-rule {
          0%   { transform: scaleX(0); }
          100% { transform: scaleX(1); }
        }
        @keyframes splash-bounce {
          0%, 100% { transform: translateY(0); opacity: .55; }
          50%      { transform: translateY(8px); opacity: 1; }
        }
        .splash-bg {
          position: absolute;
          inset: -4%;
          background-image: url('assets/microscope.png');
          background-size: cover;
          background-position: 56% 38%;
          animation: splash-kenburns 22s ease-in-out infinite;
          will-change: transform;
        }
        .splash-grade {
          position: absolute; inset: 0;
          background:
            linear-gradient(180deg, rgba(10,8,6,.55) 0%, rgba(10,8,6,.15) 30%, rgba(10,8,6,.20) 60%, rgba(10,8,6,.85) 100%),
            radial-gradient(60% 50% at 50% 45%, rgba(10,8,6,0) 0%, rgba(10,8,6,.45) 100%);
        }
        .splash-rise-1 { animation: splash-rise 1.2s cubic-bezier(.2,.7,.2,1) .15s both; }
        .splash-rise-2 { animation: splash-rise 1.2s cubic-bezier(.2,.7,.2,1) .45s both; }
        .splash-rise-3 { animation: splash-rise 1.2s cubic-bezier(.2,.7,.2,1) .8s both; }
        .splash-rise-4 { animation: splash-rise 1.0s cubic-bezier(.2,.7,.2,1) 1.4s both; }
        .splash-rule {
          height: 1px; width: 96px; background: rgba(255,250,240,.7);
          transform-origin: center; animation: splash-rule 1.1s cubic-bezier(.2,.7,.2,1) .6s both;
        }
        .splash-cue { animation: splash-bounce 2.4s ease-in-out infinite; }
      `}</style>

      <div className="splash-bg" />
      <div className="splash-grade" />

      {/* Centered title block */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        textAlign: 'center', color: '#fff8ec',
        padding: '0 56px',
      }}>
        <div className="splash-rise-1" style={{
          fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
          fontSize: 11, letterSpacing: '.22em', textTransform: 'uppercase',
          color: 'rgba(255,250,240,.78)', marginBottom: 28,
        }}>
          Dual board-specialized · MMXXVI
        </div>

        <h1 className="splash-rise-2" style={{
          fontFamily: t.family,
          fontWeight: t.weight,
          letterSpacing: t.letter,
          fontSize: 132, lineHeight: 0.94, margin: 0,
          color: '#fff8ec',
          textShadow: '0 2px 30px rgba(0,0,0,.35)',
        }}>
          Julianna <span style={{ fontStyle: 'italic', fontFamily: t.italic }}>Bair</span>
          <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 28, fontStyle: 'normal', verticalAlign: 'super', marginLeft: 14, letterSpacing: '.06em' }}>DMD</span>
        </h1>

        <div className="splash-rule" style={{ marginTop: 36, marginBottom: 24 }} />

        <div className="splash-rise-3" style={{
          fontFamily: t.family,
          fontStyle: 'italic',
          fontSize: 26, letterSpacing: '-.005em',
          color: 'rgba(255,250,240,.92)',
          maxWidth: 720,
          lineHeight: 1.35,
        }}>
          Endodontics <span style={{ fontStyle: 'normal', opacity: .6, padding: '0 12px' }}>·</span> Pediatric Dentistry
        </div>
      </div>

      {/* Bottom bar — location + scroll cue */}
      <div className="splash-rise-4" style={{
        position: 'absolute', bottom: 32, left: 0, right: 0,
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        padding: '0 56px',
        color: 'rgba(255,250,240,.78)',
        fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
        fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase',
      }}>
        <span>Manhattan · Floral Park, NY</span>
        <div className="splash-cue" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
          <span style={{ letterSpacing: '.2em' }}>Scroll</span>
          <svg width="14" height="22" viewBox="0 0 14 22" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
            <path d="M7 4 V18" />
            <path d="M3 14 L7 18 L11 14" />
          </svg>
        </div>
        <span style={{ opacity: .65 }}>Portfolio · Vol. 01</span>
      </div>
    </section>
  );
}

Object.assign(window, { SplashHero });