// v8 "Bloom Dream" — core palette + dreamy wellness primitives.
// Soft flowing gradients, frosted glass cards, levitating orbs, rounded bubbly
// type (Quicksand) with Fraunces italic accents. Premium, calm, instantly soothing.

function getDreamPalette() {
  return {
    bg: '#F6EDDE', card: '#FFFFFF',
    glass: 'rgba(255,255,255,0.62)', glassEdge: 'rgba(255,255,255,0.85)', glassMute: 'rgba(255,255,255,0.42)',
    ink: '#3A2A22', inkSoft: '#6E5346', inkMute: '#A8917F', inkOnDark: '#F6E9DD',
    accent: '#BD6E82', accentSoft: '#E7C3CE', accentDeep: '#934F66', accentInk: '#FFFFFF',
    rose: '#CC8B95', roseSoft: '#EFD3D4',
    sage: '#84A06F', sageSoft: '#D7E2C8', sageInk: '#3A4D2F', sageDark: '#33492C', sageDeep: '#5E7A48',
    butter: '#F0C45A', butterSoft: '#FBE6B0', butterDeep: '#C99A2E', lilac: '#D2BEDD', lilacSoft: '#EADFF0',
    plum: '#94668C', plumDeep: '#6E4C68', plumSoft: '#E3D2E1', roseDeep: '#B85C6B',
    terra: '#C2694A', terraDeep: '#A1502F', terraSoft: '#EAC9B9',
    action: '#BD6E82', actionInk: '#FFFFFF',
    rule: 'rgba(58,42,34,0.08)', ruleStrong: 'rgba(58,42,34,0.16)',
    btnR: 999, rCard: 30,
    shadow: '0 30px 64px -34px rgba(120,80,60,0.42)',
    shadowSoft: '0 18px 40px -26px rgba(120,80,60,0.34)'
  };
}
const dreamFonts = {
  display: "'Quicksand', system-ui, sans-serif",
  body: "'Nunito', system-ui, sans-serif",
  serif: "'Fraunces', Georgia, serif",
  mono: "'JetBrains Mono', ui-monospace, monospace"
};

// Levitating wrapper — gentle vertical bob. Reduced motion = still.
function Floaty({ children, dur = 6, delay = 0, dist = 10, style = {} }) {
  const reduced = useReducedMotion();
  return (
    <div style={{ animation: reduced ? 'none' : `dmfloat ${dur}s ${delay}s ease-in-out infinite`,
      '--d': `${dist}px`, ...style }}>{children}</div>);

}

// A floating, softly-bursting Daily Doula logo mark — decorative accent, one per section.
function FloatingMark({ size = 60, top, bottom, left, right, rotate = -8, opacity = 0.5, dur = 7, delay = 0, glow = true }) {
  return (
    <Floaty dur={dur} delay={delay} dist={16} style={{ position: 'absolute', top, bottom, left, right, zIndex: 1, pointerEvents: 'none' }}>
      <div aria-hidden="true" style={{ position: 'relative', transform: `rotate(${rotate}deg)`, opacity }}>
        {glow && <div style={{ position: 'absolute', inset: '-45%', borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(235,188,176,0.55), transparent 68%)', filter: 'blur(7px)', zIndex: -1 }} />}
        <DDMark size={size} />
      </div>
    </Floaty>);

}

// Big blurred gradient orb for the flowing background.
function Orb() {
  // Background orbs removed — the page now uses a plain, calm backdrop.
  return null;
}

// Frosted glass card.
function Glass({ children, p, style = {}, pad = 28, hover = false, radius }) {
  return (
    <div style={{ background: p.glass, backdropFilter: 'blur(16px) saturate(1.3)', WebkitBackdropFilter: 'blur(16px) saturate(1.3)',
      border: `1px solid ${p.glassEdge}`, borderRadius: radius || p.rCard, padding: pad,
      boxShadow: p.shadowSoft, ...style }}>{children}</div>);

}

// Soft eyebrow — rounded translucent pill with a colored dot.
function SoftEyebrow({ children, p, tone = 'coral' }) {
  const c = tone === 'sage' ? { bg: 'rgba(132,160,111,0.16)', fg: p.sageInk, dot: p.sage } :
  tone === 'butter' ? { bg: 'rgba(240,196,90,0.2)', fg: '#8A6014', dot: p.butter } :
  tone === 'lilac' ? { bg: 'rgba(210,190,221,0.28)', fg: '#6E5680', dot: p.lilac } :
  tone === 'plum' ? { bg: 'rgba(138,90,126,0.16)', fg: p.plumDeep, dot: p.plum } :
  { bg: 'rgba(194,105,74,0.15)', fg: p.terraDeep, dot: p.terra };
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '9px 18px', borderRadius: 999,
      background: c.bg, color: c.fg, fontFamily: dreamFonts.display, fontSize: 12.5, fontWeight: 700,
      letterSpacing: '0.04em' }}>
      <span style={{ width: 7, height: 7, borderRadius: '50%', background: c.dot }} />
      {children}
    </div>);

}

// Rounded headline — Quicksand bold; emphasis words in Fraunces italic accent.
function DreamH({ children, p, size = 58, color, style = {} }) {
  return (
    <h2 style={{ ...{ fontFamily: dreamFonts.display, fontWeight: 700, fontSize: size, lineHeight: 1.05,
        letterSpacing: '-0.02em', color: color || p.ink, margin: 0, textWrap: 'balance', ...style }, fontFamily: "Fraunces" }}>{children}</h2>);

}
function DEm({ children, p, color, underline = true }) {
  const c = color || p.plum;
  return (
    <span style={{ position: 'relative', display: 'inline-block', whiteSpace: 'nowrap' }}>
      <em style={{ fontFamily: dreamFonts.serif, fontStyle: 'italic', fontWeight: 500, color: c }}>{children}</em>
      {underline &&
        <svg viewBox="0 0 120 14" preserveAspectRatio="none" aria-hidden="true"
          style={{ position: 'absolute', left: 0, right: 0, bottom: '-0.18em', width: '100%', height: '0.34em', overflow: 'visible' }}>
          <path d="M3 8 C28 3, 52 12, 78 6 C95 2.5, 108 7, 117 5" fill="none" stroke={c} strokeWidth="3" strokeLinecap="round" />
        </svg>
      }
    </span>);
}

// Big soft pill button.
function PillBtn({ children, href, p, kind = 'solid', pulse, onClick, style = {} }) {
  const base = { display: 'inline-flex', alignItems: 'center', gap: 9, padding: '15px 30px', borderRadius: 999,
    fontFamily: dreamFonts.display, fontSize: 15.5, fontWeight: 700, cursor: 'pointer', textDecoration: 'none',
    border: 'none', transition: 'transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease', whiteSpace: 'nowrap' };
  const kinds = {
    solid: { background: p.action, color: p.actionInk, boxShadow: `0 16px 32px -12px ${p.action}` },
    glass: { background: p.glass, color: p.ink, border: `1px solid ${p.glassEdge}`, backdropFilter: 'blur(12px)' },
    white: { background: '#fff', color: p.ink, boxShadow: p.shadowSoft },
    dark: { background: p.sageDark, color: p.inkOnDark, boxShadow: '0 16px 32px -14px rgba(51,73,44,0.7)' }
  };
  const s = { ...base, ...(kinds[kind] || kinds.solid), ...style };
  const props = { style: s, className: pulse ? 'dm-pulse' : undefined, onClick,
    onMouseEnter: (e) => {e.currentTarget.style.transform = 'translateY(-3px) scale(1.02)';},
    onMouseLeave: (e) => {e.currentTarget.style.transform = 'translateY(0) scale(1)';} };
  return href ? <a href={href} {...props}>{children}</a> : <button {...props}>{children}</button>;
}

// Soft sticker bubble.
function Puff({ emoji, bg, size = 54, rotate = 0, style = {} }) {
  return (
    <div style={{ width: size, height: size, borderRadius: '50%', background: bg, display: 'flex',
      alignItems: 'center', justifyContent: 'center', fontSize: size * 0.5, transform: `rotate(${rotate}deg)`,
      boxShadow: '0 10px 22px -8px rgba(120,80,60,0.3)', flexShrink: 0, ...style }}>{emoji}</div>);

}

// Phone palette mapper for the shared PhoneFrame/Bubble kit.
function dreamPhone(p) {
  return { ...p, bg: '#FFF7F2', card: '#FFFFFF', accent: p.accent, accentSoft: p.accentSoft,
    accentDeep: p.accentDeep, accentInk: p.accentInk, sage: p.sage, ink: p.ink, inkMute: p.inkMute, rule: p.rule };
}

Object.assign(window, { getDreamPalette, dreamFonts, Floaty, Orb, Glass, SoftEyebrow, DreamH, DEm, PillBtn, Puff, dreamPhone });