// shared.jsx, tokens + reusable primitives across the three directions
// Loaded BEFORE direction files. Exports to window.

// ─── Brand tokens (single source of truth) ───────────────────────────
// Five brand-supplied hex codes plus a soft ink.
const PD = {
  pink:     '#FF6FD6',  // bubblegum · primary
  mint:     '#41EAD4',  // electric mint · primary
  softPink: '#FFC8E4',  // pale pink · surface
  softMint: '#81F7E5',  // pale mint · surface
  grey:     '#F7F7F7',  // off-white · resting surface
  ink:      '#1A0F2E',  // near-black · type
  // Legacy keys mapped so the older direction-1 + direction-3 still render
  // without a full rewrite. (Direction-2 uses the new keys directly.)
  magenta:  '#FF6FD6',
  cream:    '#F7F7F7',
  paper:    '#FFFFFF',
  peach:    '#FFC8E4',
  lilac:    '#FFC8E4',
};

// ─── Image placeholder ───────────────────────────────────────────────
// All client imagery is a placeholder right now; this component makes
// each slot obvious with its semantic id so the user knows what photo
// goes there. Styled by direction.
function IMG({ id, label, w, h, style = {}, tone = 'pink', children }) {
  const tones = {
    pink:  { bg: '#FFD1EF', stripe: PD.pink,   ink: PD.magenta },
    mint:  { bg: '#C2F5EE', stripe: PD.mint,   ink: '#0F6F66' },
    cream: { bg: PD.cream,  stripe: PD.peach,  ink: PD.ink },
    ink:   { bg: PD.ink,    stripe: PD.pink,   ink: PD.cream },
    lilac: { bg: PD.lilac,  stripe: PD.magenta,ink: PD.ink },
  };
  const t = tones[tone] || tones.pink;
  return (
    <div
      style={{
        position: 'relative',
        width: w, height: h,
        background: t.bg,
        // candy-stripe pattern at very low opacity so it reads as a
        // textured surface, not a flat block, keeps placeholders from
        // looking like dead grey rectangles
        backgroundImage:
          `repeating-linear-gradient(45deg, transparent 0 18px, ${t.stripe}22 18px 19px)`,
        color: t.ink,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        gap: 6, overflow: 'hidden',
        borderRadius: style.borderRadius ?? 0,
        ...style,
      }}
    >
      {children}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, opacity: 0.85 }}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.6"/>
          <circle cx="9" cy="10.5" r="1.6" fill="currentColor"/>
          <path d="M3 17l5-5 4 4 3-3 6 6" stroke="currentColor" strokeWidth="1.6" fill="none"/>
        </svg>
        <code style={{ fontFamily: 'ui-monospace,Menlo,monospace', fontSize: 11, letterSpacing: 0.4 }}>
          &lt;{id}&gt;
        </code>
      </div>
      {label && (
        <div style={{ fontSize: 12, fontWeight: 600, opacity: 0.75, padding: '0 12px', textAlign: 'center' }}>
          {label}
        </div>
      )}
    </div>
  );
}

// ─── Logo lockup (uses the PNG you supplied) ─────────────────────────
function Logo({ h = 44, white = false, style = {}, className }) {
  return <img src="assets/logo-trimmed.png" alt="The Pixie Dollhouse" className={className}
    style={{ height: h, width: 'auto', display: 'block', ...(white ? { filter: `brightness(0) invert(1) drop-shadow(1.5px 0 0 ${PD.ink}) drop-shadow(-1.5px 0 0 ${PD.ink}) drop-shadow(0 1.5px 0 ${PD.ink}) drop-shadow(0 -1.5px 0 ${PD.ink}) drop-shadow(4px 6px 0 rgba(26,15,46,0.16))` } : null), ...style }} />;
}

// ─── Scrolling marquee (auto loops, used as a section ribbon) ────────
function Marquee({ items, bg = PD.ink, color = PD.cream, height = 56, speed = 30, sep = '·' }) {
  // Duplicate the content twice so the keyframe can translateX(-50%) seamlessly
  const line = [...items, ...items, ...items, ...items];
  return (
    <div style={{
      background: bg, color, height,
      overflow: 'hidden', position: 'relative', display: 'flex', alignItems: 'center',
    }}>
      <div style={{
        display: 'flex', gap: 36, whiteSpace: 'nowrap',
        animation: `pd-marquee ${speed}s linear infinite`,
        fontSize: 18, fontWeight: 700, textTransform: 'lowercase', letterSpacing: 0.2,
      }}>
        {line.map((t, i) => (
          <span key={i} style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
            {t}
            <span style={{ color, opacity: 0.7 }}>{sep}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─── Sticker (decorative element: butterfly, sparkle, heart, etc.) ───
function Sticker({ kind, size = 48, color = PD.pink, style = {}, className }) {
  const w = size;
  const sw = { display: 'inline-block', width: w, height: w, className, ...style };
  delete sw.className;
  if (kind === 'butterfly') {
    // The real mark lifted from the logo, never a drawn stand-in.
    const mask = 'url("assets/butterfly.png") center / contain no-repeat';
    return (
      <span className={className} style={{
        display: 'inline-block', height: w, width: w * 0.52,
        background: color, WebkitMask: mask, mask,
        ...style,
      }} />
    );
  }
  if (kind === 'sparkle') {
    return (
      <svg viewBox="0 0 64 64" className={className} style={sw} fill={color}>
        <path d="M32 4 L37 27 L60 32 L37 37 L32 60 L27 37 L4 32 L27 27 Z"/>
      </svg>
    );
  }
  if (kind === 'heart') {
    return (
      <svg viewBox="0 0 64 64" className={className} style={sw} fill={color}>
        <path d="M32 56 C10 42 4 28 12 18 c6-8 16-6 20 2 c4-8 14-10 20-2 c8 10 2 24-20 38Z"/>
      </svg>
    );
  }
  if (kind === 'flower') {
    return (
      <svg viewBox="0 0 64 64" className={className} style={sw} fill={color}>
        <circle cx="32" cy="14" r="10"/>
        <circle cx="32" cy="50" r="10"/>
        <circle cx="14" cy="32" r="10"/>
        <circle cx="50" cy="32" r="10"/>
        <circle cx="32" cy="32" r="8" fill={PD.cream}/>
      </svg>
    );
  }
  if (kind === 'star') {
    return (
      <svg viewBox="0 0 64 64" className={className} style={sw} fill={color}>
        <path d="M32 4 L40 24 L62 26 L45 40 L51 60 L32 49 L13 60 L19 40 L2 26 L24 24 Z"/>
      </svg>
    );
  }
  if (kind === 'bow') {
    return (
      <svg viewBox="0 0 64 64" className={className} style={sw} fill={color}>
        <path d="M32 32 L8 18 L8 46 Z"/>
        <path d="M32 32 L56 18 L56 46 Z"/>
        <circle cx="32" cy="32" r="6" fill={PD.cream}/>
      </svg>
    );
  }
  return null;
}

// ─── Pill / button ───────────────────────────────────────────────────
function Pill({ children, bg = PD.pink, color = PD.cream, size = 'md', style = {}, outline = false, className }) {
  const sizes = {
    sm: { pad: '8px 16px', fs: 13 },
    md: { pad: '14px 28px', fs: 15 },
    lg: { pad: '20px 40px', fs: 18 },
    xl: { pad: '24px 52px', fs: 22 },
  };
  const s = sizes[size];
  return (
    <span className={className} style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      padding: s.pad, borderRadius: 999,
      background: outline ? 'transparent' : bg,
      color: outline ? bg : color,
      border: outline ? `2px solid ${bg}` : 'none',
      fontWeight: 700, fontSize: s.fs, lineHeight: 1,
      textTransform: 'lowercase', letterSpacing: 0.2,
      whiteSpace: 'nowrap',
      ...style,
    }}>{children}</span>
  );
}

// ─── Section frame for direction 2 (rounded "room" card) ─────────────
function Room({ title, color = PD.pink, ink = PD.cream, children, style = {} }) {
  return (
    <div style={{
      position: 'relative',
      background: color,
      borderRadius: 36,
      padding: '64px 56px',
      color: ink,
      boxShadow: '0 24px 60px -20px rgba(26,15,46,0.18)',
      ...style,
    }}>
      {title && (
        <div style={{
          position: 'absolute', top: -22, left: 56,
          background: PD.ink, color: PD.cream,
          padding: '10px 22px', borderRadius: 999,
          fontWeight: 800, fontSize: 14,
          textTransform: 'lowercase', letterSpacing: 1,
        }}>{title}</div>
      )}
      {children}
    </div>
  );
}

// ─── Netlify-backed email signup ─────────────────────────────────────
// Posts to Netlify Forms (form name: "newsletter"). The static detection
// stub lives in index.html, Netlify's build bot only parses plain HTML.
function SignupForm({ ink = PD.ink, accent = PD.pink, surface = PD.paper }) {
  const [state, setState] = React.useState('idle');
  const [email, setEmail] = React.useState('');
  function submit(e) {
    e.preventDefault();
    if (!email || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) { setState('invalid'); return; }
    setState('sent');
    const body = new URLSearchParams({ 'form-name': 'newsletter', email });
    fetch('/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body }).catch(() => {});
  }
  if (state === 'sent') {
    return (
      <div style={{
        marginTop: 28, maxWidth: 480, padding: '20px 24px', borderRadius: 24,
        background: surface, border: `2px solid ${ink}`, boxShadow: `4px 4px 0 ${accent}`,
      }}>
        <div style={{ fontWeight: 800, fontSize: 18, textTransform: 'lowercase' }}>you're on the list, doll.</div>
        <div style={{ marginTop: 6, fontSize: 14, color: '#5a4566' }}>check your inbox. First email lands next drop.</div>
      </div>
    );
  }
  return (
    <form name="newsletter" method="POST" data-netlify="true" netlify-honeypot="bot-field" onSubmit={submit} style={{ marginTop: 28, maxWidth: 480 }}>
      <input type="hidden" name="form-name" value="newsletter" />
      <p style={{ display: 'none' }}><label>don't fill this out: <input name="bot-field" /></label></p>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 6,
        background: surface, borderRadius: 999, padding: 6,
        border: `2px solid ${ink}`, boxShadow: `4px 4px 0 ${accent}`,
      }}>
        <input
          type="email" name="email" required placeholder="your email, doll"
          value={email}
          onChange={(e) => { setEmail(e.target.value); if (state === 'invalid') setState('idle'); }}
          style={{
            flex: 1, minWidth: 0, border: 'none', outline: 'none', background: 'transparent',
            padding: '12px 18px', fontFamily: 'inherit', fontSize: 15, fontWeight: 600, color: ink,
          }}
        />
        <button type="submit" style={{
          border: 'none', cursor: 'pointer', fontFamily: 'inherit',
          padding: '14px 28px', borderRadius: 999, background: ink, color: PD.cream,
          fontWeight: 700, fontSize: 15, lineHeight: 1, textTransform: 'lowercase', whiteSpace: 'nowrap',
        }}>join the list</button>
      </div>
      {state === 'invalid' && (
        <div style={{ marginTop: 10, fontSize: 13, fontWeight: 700, color: PD.magenta }}>that email looks off. Try again?</div>
      )}
    </form>
  );
}

Object.assign(window, { PD, IMG, Logo, Marquee, Sticker, Pill, Room, SignupForm });