// Landing v5 — symbolic scene kit.
// People are rendered abstractly as soft avatar discs (never faked faces),
// paired with thought-clouds, a connecting thread of light, floating stickers,
// and a real product phone-frame. Together these build the hero + emotional
// scenes with warmth and honesty.

// A soft person-disc: gradient orb + ring, optional glyph + caption beneath.
function AvatarDisc({ size = 92, from, to, ring, glyph, caption, p, captionColor }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
      <div style={{
        width: size, height: size, borderRadius: '50%',
        background: `radial-gradient(circle at 36% 30%, ${from}, ${to})`,
        boxShadow: `0 16px 34px -14px ${to}, inset 0 -6px 14px -6px rgba(0,0,0,0.18)`,
        border: `3px solid ${ring}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: size * 0.42, position: 'relative', flexShrink: 0,
      }}>
        {glyph}
        <span style={{
          position: 'absolute', top: '22%', left: '24%', width: size * 0.22, height: size * 0.16,
          borderRadius: '50%', background: 'rgba(255,255,255,0.45)', filter: 'blur(2px)',
        }} />
      </div>
      {caption && (
        <span style={{
          fontFamily: fontsV5.mono, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
          color: captionColor || (p ? p.inkMute : '#9B8670'),
        }}>{caption}</span>
      )}
    </div>
  );
}

// A worry/thought cloud — soft blob holding little chips that stagger in.
function ThoughtCloud({ items, p, tone = 'mute', shown = true, side = 'left', delay = 0 }) {
  const reduced = useReducedMotion();
  const bg = tone === 'coral' ? '#FBE6DE' : tone === 'sage' ? '#E4EBDA' : p.card;
  return (
    <div style={{ position: 'relative', maxWidth: 230 }}>
      <div style={{
        background: bg, border: `1px solid ${p.rule}`, borderRadius: 20,
        padding: '14px 16px', boxShadow: '0 14px 30px -18px rgba(42,27,20,0.35)',
        display: 'flex', flexWrap: 'wrap', gap: 7,
      }}>
        {items.map((it, i) => (
          <span key={i} style={{
            fontFamily: fontsV5.body, fontSize: 12.5, color: p.inkSoft,
            background: p.card, border: `1px solid ${p.rule}`, borderRadius: 999,
            padding: '5px 11px', whiteSpace: 'nowrap',
            opacity: shown ? 1 : 0,
            transform: shown ? 'translateY(0) scale(1)' : 'translateY(6px) scale(0.96)',
            transition: reduced ? 'none' : `opacity 460ms ease ${delay + i * 130}ms, transform 460ms cubic-bezier(.2,.8,.2,1) ${delay + i * 130}ms`,
          }}>{it}</span>
        ))}
      </div>
      {/* trailing cloud bubbles toward the head */}
      <div style={{ display: 'flex', gap: 5, marginTop: 6,
        justifyContent: side === 'left' ? 'flex-start' : 'flex-end', paddingLeft: side === 'left' ? 18 : 0, paddingRight: side === 'right' ? 18 : 0 }}>
        <span style={{ width: 11, height: 11, borderRadius: '50%', background: bg, border: `1px solid ${p.rule}` }} />
        <span style={{ width: 7, height: 7, borderRadius: '50%', background: bg, border: `1px solid ${p.rule}`, marginTop: 5 }} />
      </div>
    </div>
  );
}

// A thread of warm light connecting two points — draws itself in on `shown`.
// width/height define the SVG box; it draws a gentle S-curve left→right.
function ThreadOfLight({ width = 260, height = 80, shown = true, dur = 1600 }) {
  const reduced = useReducedMotion();
  const d = `M 6 ${height/2 + 12} C ${width*0.32} ${height*0.05}, ${width*0.6} ${height*0.95}, ${width-6} ${height/2 - 12}`;
  const ref = React.useRef(null);
  const [len, setLen] = React.useState(400);
  React.useEffect(() => { if (ref.current) setLen(ref.current.getTotalLength()); }, []);
  const off = reduced ? 0 : (shown ? 0 : len);
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ overflow: 'visible' }} aria-hidden="true">
      <defs>
        <linearGradient id="v5thread" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#F4A88F" />
          <stop offset="0.5" stopColor="#EDB94C" />
          <stop offset="1" stopColor="#7C9569" />
        </linearGradient>
        <filter id="v5threadglow"><feGaussianBlur stdDeviation="3" /></filter>
      </defs>
      <path d={d} fill="none" stroke="url(#v5thread)" strokeWidth="7" strokeLinecap="round"
        opacity="0.35" filter="url(#v5threadglow)"
        strokeDasharray={len} strokeDashoffset={off}
        style={{ transition: reduced ? 'none' : `stroke-dashoffset ${dur}ms ease` }} />
      <path ref={ref} d={d} fill="none" stroke="url(#v5thread)" strokeWidth="3" strokeLinecap="round"
        strokeDasharray={len} strokeDashoffset={off}
        style={{ transition: reduced ? 'none' : `stroke-dashoffset ${dur}ms ease` }} />
    </svg>
  );
}

// A product phone-frame showing Della messages. `messages` = [{who,text,at,note}].
// `typing` shows a typing indicator as the last row. Pulsing notification dot.
function PhoneFrame({ p, width = 268, header = 'Della', children, tilt = 0, glow = true, style = {} }) {
  const BASE = 268;
  const scale = width / BASE;
  const baseH = Math.round(BASE * 1.98);
  const h = Math.round(width * 1.98);
  return (
    <div style={{ width, height: h, flexShrink: 0, transform: `rotate(${tilt}deg)`, position: 'relative', ...style }}>
    <div style={{
      width: BASE, height: baseH, background: '#1C140E', borderRadius: 40, padding: 7,
      boxShadow: `0 50px 90px -38px rgba(42,27,20,0.5), 0 18px 40px -14px rgba(42,27,20,0.28)`,
      transform: `scale(${scale})`, transformOrigin: 'top left', position: 'relative',
    }}>
      {glow && <div aria-hidden="true" style={{ position: 'absolute', inset: -34, borderRadius: 70,
        background: 'radial-gradient(circle at 50% 42%, rgba(244,168,143,0.42), rgba(226,234,214,0.18) 55%, transparent 72%)', filter: 'blur(16px)', zIndex: -1 }} />}
      <div style={{ width: '100%', height: '100%', borderRadius: 33, overflow: 'hidden',
        background: p.bg, position: 'relative', display: 'flex', flexDirection: 'column' }}>
        {/* status / app bar */}
        <div style={{ background: p.card, borderBottom: `1px solid ${p.rule}`, padding: '14px 16px 12px',
          display: 'flex', alignItems: 'center', gap: 10, position: 'relative' }}>
          <div style={{ position: 'absolute', top: 7, left: '50%', transform: 'translateX(-50%)',
            width: 64, height: 5, borderRadius: 3, background: 'rgba(42,27,20,0.18)' }} />
          <DellaAvatar size={32} bg={p.accentSoft} fg={p.accentDeep} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: fontsV5.display, fontStyle: 'italic', fontSize: 15, fontWeight: 500, color: p.accentDeep }}>{header}</div>
            <div style={{ fontFamily: fontsV5.mono, fontSize: 8.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: p.sage }}>online · always</div>
          </div>
          <span className="v5-pulse-dot" style={{ width: 9, height: 9, borderRadius: '50%', background: p.sage }} />
        </div>
        <div style={{ flex: 1, padding: '16px 14px', display: 'flex', flexDirection: 'column', gap: 11, overflow: 'hidden' }}>
          {children}
        </div>
      </div>
    </div>
    </div>
  );
}

// A single chat bubble for inside PhoneFrame. who: 'della' | 'me' | 'partner'.
function Bubble({ who, p, children, at, shown = true, delay = 0 }) {
  const reduced = useReducedMotion();
  const isDella = who === 'della';
  const isPartner = who === 'partner';
  const align = isDella ? 'flex-start' : 'flex-end';
  const bg = isDella ? p.card : isPartner ? '#E1EEFB' : p.accent;
  const fg = isDella ? p.ink : isPartner ? '#143A66' : p.accentInk;
  const radius = isDella ? '16px 16px 16px 5px' : '16px 16px 5px 16px';
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: align,
      opacity: shown ? 1 : 0, transform: shown ? 'translateY(0)' : 'translateY(8px)',
      transition: reduced ? 'none' : `opacity 460ms ease ${delay}ms, transform 460ms cubic-bezier(.2,.8,.2,1) ${delay}ms`,
    }}>
      {isPartner && <span style={{ fontFamily: fontsV5.mono, fontSize: 7.5, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: '#3B6FB8', marginBottom: 3 }}>Sam · WhatsApp</span>}
      <div style={{ maxWidth: '86%', background: bg, color: fg, borderRadius: radius,
        padding: '9px 12px', fontSize: 13, lineHeight: 1.45, fontFamily: fontsV5.body,
        boxShadow: isDella ? `0 4px 12px -8px rgba(42,27,20,0.4)` : 'none',
        border: isDella ? `1px solid ${p.rule}` : 'none' }}>
        {children}
      </div>
      {at && <span style={{ fontFamily: fontsV5.mono, fontSize: 7.5, letterSpacing: '0.12em',
        color: p.inkMute, marginTop: 3 }}>{at}</span>}
    </div>
  );
}

function TypingBubble({ p }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
      <div style={{ background: p.card, border: `1px solid ${p.rule}`, borderRadius: '16px 16px 16px 5px',
        padding: '11px 14px', display: 'inline-flex', gap: 4 }}>
        {[0,1,2].map(i => <span key={i} style={{ width: 6, height: 6, borderRadius: '50%',
          background: p.accentSoft, animation: `v5blink 1.4s ${i*0.2}s ease-in-out infinite` }} />)}
      </div>
    </div>
  );
}

Object.assign(window, { AvatarDisc, ThoughtCloud, ThreadOfLight, PhoneFrame, Bubble, TypingBubble });