// Shared components for the Tellings video.

const TPALETTE = {
  cream: '#F5F0E8',
  paper: '#EFE8DC',
  ink: '#1A1612',
  inkSoft: '#2B231C',
  muted: '#6B4C3B',
  mutedSoft: '#8B7363',
  terracotta: '#C4613A',
  terracottaDeep: '#A14E2C',
  hair: 'rgba(26,22,18,0.10)',
};

const SERIF = "'Newsreader', Georgia, 'Times New Roman', serif";
const SANS = "'Geist', system-ui, sans-serif";
const MONO = "'Geist Mono', ui-monospace, monospace";

// Paper grain overlay
function PaperGrain({ opacity = 0.06 }) {
  // For GIF/video export the grain is disabled: it's per-pixel noise that
  // bloats frame-based compression and adds speckle. Cleaner + smaller without.
  if (typeof window !== 'undefined' && window.__NOGRAIN) return null;
  return (
    <svg style={{
      position: 'absolute', inset: 0, width: '100%', height: '100%',
      pointerEvents: 'none', mixBlendMode: 'multiply', opacity,
    }} aria-hidden="true">
      <filter id="paperNoise">
        <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/>
        <feColorMatrix values="0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 1 0"/>
      </filter>
      <rect width="100%" height="100%" filter="url(#paperNoise)"/>
    </svg>
  );
}

// Phone bezel
function Phone({ x, y, width = 460, scale = 1, rotate = 0, children, screenBg = TPALETTE.cream }) {
  const height = Math.round(width * 2.05);
  const radius = Math.round(width * 0.11);
  const innerR = radius - 8;
  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      width, height,
      transform: `scale(${scale}) rotate(${rotate}deg)`,
      transformOrigin: 'center center',
      borderRadius: radius,
      background: '#0c0a08',
      padding: 8,
      boxShadow: '0 30px 80px rgba(26,22,18,0.35), 0 6px 14px rgba(26,22,18,0.2), inset 0 0 0 1.5px #2b2722',
    }}>
      <div style={{
        position: 'relative',
        width: '100%', height: '100%',
        borderRadius: innerR,
        background: screenBg,
        overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute',
          top: 14, left: '50%', transform: 'translateX(-50%)',
          width: Math.round(width * 0.28), height: 26,
          borderRadius: 14, background: '#0c0a08',
          zIndex: 50,
        }}/>
        <div style={{
          position: 'absolute', top: 16, left: 0, right: 0,
          display: 'flex', justifyContent: 'space-between',
          padding: '0 28px',
          fontFamily: SANS, fontSize: 13, fontWeight: 600,
          color: TPALETTE.ink, zIndex: 40,
        }}>
          <span>9:41</span>
          <span style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
            <span style={{ display: 'inline-block', width: 18, height: 10, borderRadius: 2, border: `1.4px solid ${TPALETTE.ink}`, position: 'relative' }}>
              <span style={{ position: 'absolute', inset: 1.4, background: TPALETTE.ink, borderRadius: 1 }}/>
            </span>
          </span>
        </div>
        <div style={{ position: 'absolute', inset: 0 }}>
          {children}
        </div>
      </div>
    </div>
  );
}

function Wordmark({ size = 32, color = TPALETTE.ink, letterSpacing = '-0.02em' }) {
  return (
    <span style={{
      fontFamily: SERIF,
      fontWeight: 500,
      fontStyle: 'italic',
      fontSize: size,
      color,
      letterSpacing,
      lineHeight: 1,
      display: 'inline-block',
    }}>
      tellings
    </span>
  );
}

// Live waveform
function Waveform({ width = 320, height = 60, color = TPALETTE.terracotta, bars = 36, t = 0, active = true }) {
  const arr = React.useMemo(() => Array.from({ length: bars }), [bars]);
  return (
    <div style={{
      width, height,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 2,
    }}>
      {arr.map((_, i) => {
        const seed = (i * 0.37) + Math.sin(i * 1.7) * 0.6;
        const base = active
          ? 0.18 + 0.5 * Math.abs(Math.sin(t * 6 + seed * 2.1))
                + 0.32 * Math.abs(Math.sin(t * 14 + seed * 4.4))
          : 0.08 + 0.04 * Math.abs(Math.sin(i * 1.3));
        const h = Math.max(3, Math.min(height, base * height));
        return (
          <div key={i} style={{
            width: Math.max(2, (width - bars * 2) / bars),
            height: h,
            background: color,
            borderRadius: 2,
            transition: 'height 80ms linear',
          }}/>
        );
      })}
    </div>
  );
}

// Polaroid-style photo card — holds a hand-drawn illustration + handwritten caption
function PhotoCard({ width = 120, height = 150, caption = '', illo = null }) {
  const imgH = height - 34;
  return (
    <div style={{
      width, height,
      background: '#fdfaf2',
      padding: '7px 7px 0 7px',
      boxShadow: '0 7px 20px rgba(26,22,18,0.24), 0 1px 0 rgba(26,22,18,0.08)',
      borderRadius: 3,
      position: 'relative',
    }}>
      {/* illustration window */}
      <div style={{
        width: '100%', height: imgH,
        position: 'relative',
        overflow: 'hidden',
        borderRadius: 1,
      }}>
        {illo}
      </div>
      {/* handwritten caption */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: SERIF, fontStyle: 'italic', fontSize: 14,
        color: '#5B4636', letterSpacing: '0.01em',
      }}>{caption}</div>
    </div>
  );
}

// Natural-linen keepsake — oatmeal cloth, ink-stamped title, terracotta
// foil rule. Believable thickness + clean product-photo lighting.
function BookMock({ width = 300 }) {
  const h = Math.round(width * 1.42);
  const pagePeek = 8;

  const linen = '#D8CBB2';
  const linenDk = '#C7B898';
  const ink = '#2E2419';
  const accent = '#B45A33';
  // debossed-into-cloth: dark text pressed in, with a faint highlight below
  const deboss = '0 1px 0 rgba(255,250,238,0.55), 0 -0.5px 0 rgba(46,36,25,0.20)';

  return (
    <div style={{ position: 'relative', width: width + pagePeek, height: h + pagePeek }}>
      {/* soft cast shadow */}
      <div style={{
        position: 'absolute', left: 14, top: 30,
        width, height: h, borderRadius: 8,
        background: '#2e2419', filter: 'blur(30px)', opacity: 0.24,
      }}/>

      {/* PAGE BLOCK — pages peeking on right + bottom = thickness */}
      <div style={{
        position: 'absolute', left: pagePeek, top: pagePeek,
        width, height: h,
        borderRadius: '2px 5px 6px 2px',
        background: '#f4eedd',
        backgroundImage: 'repeating-linear-gradient(180deg, #e3d8bd 0 1px, #f6f0e0 1px 3px)',
        boxShadow: 'inset 0 0 12px rgba(120,100,60,0.18)',
      }}/>

      {/* COVER */}
      <div style={{
        position: 'absolute', left: 0, top: 0,
        width, height: h,
        borderRadius: '3px 6px 6px 3px',
        background: linen,
        boxShadow: '0 16px 36px -10px rgba(46,36,25,0.38)',
        overflow: 'hidden',
      }}>
        {/* woven linen grain */}
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.22, mixBlendMode: 'multiply', pointerEvents: 'none' }} aria-hidden="true">
          <filter id="bookLinen">
            <feTurbulence type="fractalNoise" baseFrequency="0.04 0.22" numOctaves="3" seed="11" stitchTiles="stitch"/>
            <feColorMatrix values="0 0 0 0 0.36  0 0 0 0 0.30  0 0 0 0 0.18  0 0 0 1 0"/>
          </filter>
          <rect width="100%" height="100%" filter="url(#bookLinen)"/>
        </svg>

        {/* gentle product lighting */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: `
            radial-gradient(130% 80% at 16% 6%, rgba(255,252,244,0.55), transparent 44%),
            radial-gradient(120% 95% at 90% 102%, rgba(70,55,30,0.20), transparent 58%)
          `,
        }}/>

        {/* spine hinge groove near the left edge */}
        <div style={{
          position: 'absolute', top: 0, bottom: 0, left: 15, width: 9,
          background: 'linear-gradient(90deg, rgba(70,55,30,0.16), rgba(70,55,30,0) 75%)',
          pointerEvents: 'none',
        }}/>

        {/* blind-debossed frame */}
        <div style={{
          position: 'absolute', inset: 22,
          border: `1px solid ${ink}`, opacity: 0.22,
          borderRadius: 2, pointerEvents: 'none',
        }}/>

        {/* CONTENT */}
        <div style={{
          position: 'absolute', inset: 0,
          padding: '62px 40px 50px 46px',
          display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'space-between',
        }}>
          {/* imprint */}
          <div style={{
            fontFamily: MONO, fontSize: 11, letterSpacing: '0.46em',
            textTransform: 'uppercase', color: ink,
            textShadow: deboss, opacity: 0.72, paddingLeft: '0.46em',
          }}>
            Tellings
          </div>

          {/* title */}
          <div style={{ alignSelf: 'stretch', textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 22 }}>
            <div style={{ height: 2, background: accent, opacity: 0.9, width: 40, alignSelf: 'center', borderRadius: 1 }}/>
            <div style={{
              fontFamily: SERIF, fontStyle: 'italic',
              fontSize: Math.round(width * 0.15),
              lineHeight: 1.04, fontWeight: 500,
              letterSpacing: '-0.02em',
              color: ink, textShadow: deboss,
            }}>
              For Lila,<br/>before she<br/>could ask.
            </div>
            <div style={{ height: 2, background: accent, opacity: 0.9, width: 40, alignSelf: 'center', borderRadius: 1 }}/>
          </div>

          {/* year */}
          <div style={{
            fontFamily: MONO, fontSize: 10, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: ink, whiteSpace: 'nowrap',
            textShadow: deboss, opacity: 0.62, paddingLeft: '0.3em',
          }}>
            mmxxiv — mmxxvi
          </div>
        </div>
      </div>
    </div>
  );
}

// Paw print — 5 basic ellipses, nothing fancy
function PawPrint({ size = 22, color = TPALETTE.terracotta, rotate = 0 }) {
  return (
    <svg
      width={size * 1.1}
      height={size * 1.3}
      viewBox="0 0 24 28"
      style={{ transform: `rotate(${rotate}deg)`, display: 'block' }}
    >
      {/* main pad */}
      <ellipse cx="12" cy="20.5" rx="7" ry="6" fill={color}/>
      {/* four toes */}
      <ellipse cx="3.6" cy="11.5" rx="2.5" ry="3.6" fill={color}/>
      <ellipse cx="8.8" cy="5.8" rx="2.6" ry="3.7" fill={color}/>
      <ellipse cx="15.2" cy="5.8" rx="2.6" ry="3.7" fill={color}/>
      <ellipse cx="20.4" cy="11.5" rx="2.5" ry="3.6" fill={color}/>
    </svg>
  );
}

// Recording card (feed row)
function FeedRow({ title, dur, mono = MONO, serif = SERIF }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '14px 16px',
      background: '#fff8ec',
      border: `1px solid ${TPALETTE.hair}`,
      borderRadius: 14,
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 18,
        background: TPALETTE.terracotta,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 4 L3 10 L8 10 L11 13 L11 1 L8 4 Z" fill={TPALETTE.cream}/></svg>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: serif, fontSize: 15, color: TPALETTE.ink,
          fontStyle: 'italic', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        }}>{title}</div>
        <div style={{ fontFamily: mono, fontSize: 10, color: TPALETTE.mutedSoft, marginTop: 2, letterSpacing: '0.05em' }}>{dur}</div>
      </div>
    </div>
  );
}

Object.assign(window, {
  TPALETTE, SERIF, SANS, MONO,
  PaperGrain, Phone, Wordmark, Waveform, PhotoCard, BookMock, FeedRow, PawPrint,
});