/* global React, CS, EmailForm, Socials, StarSticker */

const LOGO = 'assets/music-fairy-logo.png';

const stickerText = {
  color: '#fff',
  textShadow: '0 4px 0 rgba(40,30,60,0.22), 0 6px 16px rgba(20,40,60,0.22)',
  WebkitTextStroke: '0px',
};

function Eyebrow({ children, color = '#D6219E' }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      fontFamily: CS.display, fontWeight: 600, fontSize: 17, letterSpacing: 1,
      textTransform: 'uppercase', color: '#fff', background: color,
      padding: '8px 20px', borderRadius: 50, border: '3px solid #fff',
      boxShadow: '0 5px 0 rgba(20,40,60,0.16)', whiteSpace: 'nowrap',
    }}>
      <span>✦</span>{children}<span>✦</span>
    </span>
  );
}

/* ============ DIRECTION 1 — banner hero, centered ============ */
function Direction1({ headline = 'Something magical is on the way!' }) {
  return (
    <main style={{
      position: 'relative', zIndex: 2, minHeight: '100vh',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      textAlign: 'center', padding: '64px 24px 48px', gap: 26,
    }}>
      <img src={LOGO} alt="The Music Fairy and Friends" className="cs-bob" style={{
        width: 'min(560px, 86vw)', borderRadius: 30, display: 'block',
        boxShadow: '0 16px 0 rgba(20,40,60,0.10), 0 34px 54px rgba(20,40,60,0.28)',
      }} />

      <Eyebrow>Coming Soon</Eyebrow>

      <h1 style={{
        fontFamily: CS.display, fontWeight: 700, fontSize: 'clamp(38px, 6.4vw, 76px)',
        lineHeight: 1.02, margin: 0, maxWidth: 900, ...stickerText,
      }}>{headline}</h1>

      <p style={{
        fontFamily: CS.body, fontWeight: 500, fontSize: 'clamp(18px, 2.2vw, 23px)',
        lineHeight: 1.4, color: '#fff', maxWidth: 620, margin: 0,
        textShadow: '0 2px 6px rgba(20,40,60,0.25)',
      }}>
        We're putting the finishing sparkles on a brand-new world of songs, stories
        and friends. Pop your email in and we'll let you know the moment it's ready!
      </p>

      <div style={{ marginTop: 6 }}>
        <EmailForm accent={CS.pink} />
      </div>

      <div style={{ marginTop: 18 }}>
        <p style={{ fontFamily: CS.display, fontWeight: 600, fontSize: 18, color: '#fff', margin: '0 0 14px', textShadow: '0 2px 6px rgba(20,40,60,0.25)' }}>
          Sing along with us already ↓
        </p>
        <Socials />
      </div>

      <p style={{ fontFamily: CS.body, fontWeight: 500, fontSize: 15, color: 'rgba(255,255,255,0.92)', marginTop: 16, textShadow: '0 1px 4px rgba(20,40,60,0.3)' }}>
        Safe, kind &amp; ad-free fun for the whole family · © The Music Fairy &amp; Friends
      </p>
    </main>
  );
}

/* ============ DIRECTION 2 — logo + white cloud card ============ */
function Direction2({ headline = 'Something magical is on the way!' }) {
  return (
    <main style={{
      position: 'relative', zIndex: 2, minHeight: '100vh',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      padding: '56px 24px', gap: 0,
    }}>
      <img src={LOGO} alt="The Music Fairy and Friends" className="cs-bob" style={{
        width: 'min(440px, 80vw)', borderRadius: 26, display: 'block',
        boxShadow: '0 14px 0 rgba(20,40,60,0.10), 0 28px 44px rgba(20,40,60,0.28)',
        position: 'relative', zIndex: 3, marginBottom: -42,
      }} />

      <div style={{
        position: 'relative', background: '#fff', borderRadius: 40,
        padding: '70px 48px 44px', maxWidth: 620, width: '100%', textAlign: 'center',
        boxShadow: '0 22px 0 rgba(20,40,60,0.08), 0 40px 70px rgba(20,40,60,0.30)',
      }}>
        {/* decorative corner stars */}
        <span style={{ position: 'absolute', top: -22, left: -20 }}><StarSticker size={56} color={CS.orange} rot={-18} /></span>
        <span style={{ position: 'absolute', bottom: -18, right: -16 }}><StarSticker size={48} color={CS.pink} rot={20} /></span>

        <div style={{ marginBottom: 16 }}><Eyebrow color={CS.blue}>Launching Soon</Eyebrow></div>

        <h1 style={{
          fontFamily: CS.display, fontWeight: 700, fontSize: 'clamp(32px, 4.6vw, 50px)',
          lineHeight: 1.04, margin: '0 0 14px', color: CS.magenta,
        }}>{headline}</h1>

        <p style={{
          fontFamily: CS.body, fontWeight: 500, fontSize: 'clamp(17px, 2vw, 20px)',
          lineHeight: 1.45, color: '#5b5470', margin: '0 0 26px',
        }}>
          A brand-new world of songs, stories and friends is almost here. Be the first
          to know when the magic begins!
        </p>

        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 30 }}>
          <EmailForm accent={CS.pink} stacked />
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14, margin: '0 0 22px' }}>
          <span style={{ flex: 1, height: 3, background: '#efe7f2', borderRadius: 3 }} />
          <span style={{ fontFamily: CS.display, fontWeight: 600, fontSize: 16, color: '#b8aec6', whiteSpace: 'nowrap' }}>follow along</span>
          <span style={{ flex: 1, height: 3, background: '#efe7f2', borderRadius: 3 }} />
        </div>

        <CardSocials />
      </div>

      <p style={{ fontFamily: CS.body, fontWeight: 500, fontSize: 15, color: 'rgba(255,255,255,0.95)', marginTop: 26, textShadow: '0 1px 5px rgba(20,40,60,0.35)', textAlign: 'center' }}>
        Safe, kind &amp; ad-free fun for the whole family · © The Music Fairy &amp; Friends
      </p>
    </main>
  );
}

/* socials styled for the white card (colored ring, no labels) */
function CardSocials() {
  return (
    <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
      <Socials size={54} gap={16} labels={false} />
    </div>
  );
}

Object.assign(window, { Direction1, Direction2 });