// 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: '#FBF1EA', 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: '#C47060', accentSoft: '#EBBCB0', accentDeep: '#9E4A3D', accentInk: '#FFFFFF',
    rose: '#CC8B95', roseSoft: '#EFD3D4',
    sage: '#84A06F', sageSoft: '#D7E2C8', sageInk: '#3A4D2F', sageDark: '#33492C',
    butter: '#F0C45A', butterSoft: '#FBE6B0', lilac: '#D2BEDD', lilacSoft: '#EADFF0',
    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>);

}

// Scatter the two logo petals across the page from (cx,cy). Direct DOM so it
// works inside the babel-script setup without a React provider. Petals fall +
// fade via the `lpetal-fall` keyframe (defined in the page <style>).
const DD_PETAL_L = 'M65 122 C20 107, 8 62, 24 26 C34 5, 57 4, 65 122Z';
const DD_PETAL_R = 'M65 122 C110 107, 122 62, 106 26 C96 5, 73 4, 65 122Z';
function burstFlower(cx, cy, size = 48) {
  const ns = 'http://www.w3.org/2000/svg';
  for (let i = 0; i < 16; i++) {
    const angle = (i / 16) * Math.PI * 2 + Math.random() * 0.4;
    const dist = 200 + Math.random() * 460;
    const tx = Math.cos(angle) * dist;
    const ty = Math.sin(angle) * dist + 80; // gravity bias
    const tilt = Math.random() * 720 - 360;
    const ps = size * (0.34 + Math.random() * 0.18);
    const dur = 2200 + Math.random() * 1400;
    const which = i % 2;
    const svg = document.createElementNS(ns, 'svg');
    svg.setAttribute('viewBox', '0 0 130 140');
    svg.setAttribute('width', ps); svg.setAttribute('height', ps * 140 / 130);
    svg.style.cssText = `position:fixed;left:${cx - ps / 2}px;top:${cy - ps / 2}px;` +
      `pointer-events:none;z-index:120;will-change:transform,opacity;` +
      `--tx:${tx}px;--ty:${ty}px;--tilt:${tilt}deg;` +
      `animation:lpetal-fall ${dur}ms cubic-bezier(.22,.62,.4,1) forwards`;
    const path = document.createElementNS(ns, 'path');
    path.setAttribute('d', which === 0 ? DD_PETAL_L : DD_PETAL_R);
    path.setAttribute('fill', which === 0 ? '#EBBCB0' : '#C47060');
    svg.appendChild(path);
    document.body.appendChild(svg);
    setTimeout(() => svg.remove(), dur + 140);
  }
}

// A floating Daily Doula logo flower — one per section. Drifts gently; on hover
// its petals burst and scatter across the page (the v3 bloom-burst), then it
// re-blooms after a beat. Touch / reduced motion = no burst.
function FloatingMark({ size = 60, top, bottom, left, right, rotate = -8, opacity = 0.92, dur = 7, delay = 0, glow = true }) {
  const ref = React.useRef(null);
  const [gone, setGone] = React.useState(false);
  const onHover = () => {
    if (gone) return;
    const coarse = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(pointer: coarse)').matches;
    const el = ref.current; if (!el || coarse) return;
    const r = el.getBoundingClientRect();
    burstFlower(r.left + r.width / 2, r.top + r.height / 2, size);
    setGone(true);
    setTimeout(() => setGone(false), 4500);
  };
  return (
    <Floaty dur={dur} delay={delay} dist={16} style={{ position: 'absolute', top, bottom, left, right, zIndex: 1 }}>
      <div ref={ref} onMouseEnter={onHover} aria-hidden="true"
        style={{ position: 'relative', transform: `rotate(${rotate}deg)`, cursor: 'pointer',
          opacity: gone ? 0 : opacity, transition: 'opacity 240ms ease-out' }}>
        <DDMark size={size} />
      </div>
    </Floaty>);

}

// Background orbs removed for a flat cream backdrop (no gradients). Kept as a
// no-op so existing <Orb/> calls across the sections stay valid.
function Orb() { 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 } :
  { bg: 'rgba(232,118,90,0.14)', fg: p.accentDeep, dot: p.accent };
  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.accent;
  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.accent, color: p.accentInk, boxShadow: `0 16px 32px -12px ${p.accent}` },
    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, FloatingMark, burstFlower });