// Landing v5 — shared palette, primitives, brand mark.
// Canonical My Daily Doula palette (from the brand brief): cream paper,
// coral primary, sage secondary, dark-sage band, butter + rose supporting.

function getV5Palette() {
  return {
    bg:        '#FAF6EC',  // cream paper
    bgAlt:     '#F1E9D5',  // deeper cream (alt bands)
    bgWarm:    '#F7E9DC',  // warm blush band
    card:      '#FFFDF6',  // card paper
    ink:       '#2A1B14',  // near-black warm
    inkSoft:   '#5B3E2E',  // soft brown body
    inkMute:   '#9B8670',  // muted label
    inkOnDark: '#F1E5D2',  // text on dark sage

    accent:     '#E36A4F', // coral — primary
    accentSoft: '#F4A88F', // soft coral
    accentDeep: '#C2503A', // deep coral (small text on cream)
    accentInk:  '#FFFDF6', // text on coral

    sage:      '#7C9569',  // sage — secondary
    sageSoft:  '#D6DDC7',  // soft sage (eyebrow pills)
    sageInk:   '#3A4D31',  // deep sage text
    sageDark:  '#2D4435',  // dark sage band

    butter:    '#EDB94C',  // honey/butter
    butterSoft:'#F6DDA0',
    rose:      '#E89AA1',  // rose
    roseSoft:  '#F4CBCF',

    rule:       'rgba(42,27,20,0.09)',
    ruleStrong: 'rgba(42,27,20,0.18)',
  };
}

const fontsV5 = {
  display: "'Fraunces', 'Times New Roman', serif",
  body:    "'Instrument Sans', system-ui, sans-serif",
  mono:    "'JetBrains Mono', ui-monospace, monospace",
  hand:    "'Caveat', cursive",
};

// Three distinct design languages. getTheme(version) returns an extended palette
// `p` carrying not just colors but the type system, shape language, eyebrow style,
// button radius and decoration flag — so every section restyles from one object.
function getTheme(version) {
  const base = getV5Palette();
  if (version === 'bloom') {
    // Ollie-style: warm, rounded, friendly. Geometric sans display, saturated
    // color blocks, big pills, soft deep shadows.
    return {
      ...base,
      bg:'#FBF1E4', bgAlt:'#F6E2CE', bgWarm:'#FBE6D6', card:'#FFFFFF',
      ink:'#2B1A12', inkSoft:'#6A4A38', inkMute:'#A78B76',
      accent:'#E85C36', accentSoft:'#F7B49B', accentDeep:'#C5481F', accentInk:'#FFFFFF',
      sage:'#6F9462', sageSoft:'#D3E0C4', sageInk:'#33492A', sageDark:'#274034',
      butter:'#F2B33C', butterSoft:'#FBE2A8', rose:'#EE8E8A', roseSoft:'#F8CFCB',
      rule:'rgba(43,26,18,0.08)', ruleStrong:'rgba(43,26,18,0.16)',
      dispFont: "'Poppins', system-ui, sans-serif", dispWeight: 700, dispTrack: '-0.02em', dispLine: 1.04, dispTransform: 'none',
      r: 26, rCard: 28, rPill: 999, btnR: 999,
      shadowCard: '0 26px 56px -34px rgba(43,26,18,0.4)',
      eyebrowKind: 'pill', decor: 'blob', theme: 'bloom',
    };
  }
  if (version === 'storybook') {
    // Cozy, hand-crafted: serif + Caveat, pastel, taped cards, stickers.
    return {
      ...base,
      bg:'#FAF4E8', bgAlt:'#F1E7D2', bgWarm:'#F8EADD', card:'#FFFDF6',
      accent:'#DE7059', accentSoft:'#F2B6A4', accentDeep:'#BF513B',
      sage:'#7FA06C', sageSoft:'#DCE6CC',
      dispFont: fontsV5.display, dispWeight: 500, dispTrack: '-0.03em', dispLine: 1.0, dispTransform: 'none',
      r: 20, rCard: 22, rPill: 999, btnR: 999,
      shadowCard: '0 18px 42px -28px rgba(42,27,20,0.32)',
      eyebrowKind: 'hand', decor: 'paper', theme: 'storybook',
    };
  }
  // editorial (default): refined magazine. Big serif, hairline rules, flat paper.
  return {
    ...base,
    bg:'#FAF6EC', bgAlt:'#F1E9D5', card:'#FFFCF4',
    accent:'#C2503A', accentSoft:'#E59A86', accentDeep:'#A8412E',
    rule:'rgba(42,27,20,0.13)', ruleStrong:'rgba(42,27,20,0.22)',
    dispFont: fontsV5.display, dispWeight: 400, dispTrack: '-0.04em', dispLine: 0.96, dispTransform: 'none',
    r: 8, rCard: 12, rPill: 999, btnR: 8,
    shadowCard: 'none',
    eyebrowKind: 'rule', decor: 'minimal', theme: 'editorial',
  };
}

// The Della flower head — 6 soft petals + terracotta core, drawn from the brand
// flower. `open` (0..1) controls how far the petals have unfurled from a bud.
// Used by the scroll-bloom companion AND for static brand moments (open=1).
function DellaFlower({ size = 48, open = 1, petalScale = 1, glow = false }) {
  const r = 20;
  const cx = 24, cy = 24;
  const petals = [];
  const jitter = [-4, 3, -2, 4, -3, 2];
  const tints = ['#EBBCB0', '#CC8B95', '#EDB94C', '#EBBCB0', '#CC8B95', '#EDB94C'];
  const tintsDeep = ['#C47060', '#C07A82', '#E0A437', '#C47060', '#C07A82', '#E0A437'];
  for (let i = 0; i < 6; i++) {
    const a = (i * 60 - 90 + jitter[i]) * Math.PI / 180;
    // When closed (open=0) petals tuck toward the centre and shrink.
    const reach = (0.30 + 0.50 * open) * petalScale;
    const pcx = cx + Math.cos(a) * r * reach;
    const pcy = cy + Math.sin(a) * r * reach;
    const rot = i * 60 + jitter[i];
    const sx = (0.36 + 0.10 * open) * petalScale;
    const sy = (0.34 + 0.32 * open) * petalScale;
    petals.push(
      <g key={i} transform={`translate(${pcx} ${pcy}) rotate(${rot})`}>
        <ellipse cx="0" cy="0" rx={r * sx} ry={r * sy} fill={tints[i]} />
        <ellipse cx={-r * 0.06} cy={-r * 0.16} rx={r * sx * 0.5} ry={r * sy * 0.5}
          fill="#FBE3D0" opacity={0.5 * open} />
        <ellipse cx="0" cy={r * sy * 0.6} rx={r * sx * 0.7} ry={r * sy * 0.3}
          fill={tintsDeep[i]} opacity="0.28" />
      </g>
    );
  }
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" style={{ display: 'block', overflow: 'visible' }}>
      {glow && <circle cx={cx} cy={cy} r={22} fill="#EDB94C" opacity={0.22 * open} style={{ filter: 'blur(8px)' }} />}
      {petals}
      <circle cx={cx} cy={cy} r={r * (0.30 + 0.12 * open)} fill="#C2503A" />
      <circle cx={cx - 1} cy={cy - 1.4} r={r * (0.18 + 0.06 * open)} fill="#9C3A28" opacity="0.55" />
      <circle cx={cx - 1.6} cy={cy - 2} r={r * 0.07} fill="#FBE3D0" opacity="0.8" />
    </svg>
  );
}

// The lockup mark — the two-petal heart logo (matches the live mydailydoula.com).
function DDMark({ size = 34 }) {
  const w = size, h = size * (140 / 130);
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 140" width={w} height={h} style={{ display: 'block' }}>
      <path d="M65 122 C20 107, 8 62, 24 26 C34 5, 57 4, 65 122Z" fill="#EBBCB0" />
      <path d="M65 122 C110 107, 122 62, 106 26 C96 5, 73 4, 65 122Z" fill="#C47060" />
      <path d="M65 127 C62 123, 53 119, 53 112.5 C53 108, 56.2 106, 59.2 107.5 C61.2 108.6, 65 111.5, 65 111.5 C65 111.5, 68.8 108.6, 70.8 107.5 C73.8 106, 77 108, 77 112.5 C77 119, 68 123, 65 127Z" fill="#8C3030" />
      <circle cx="65" cy="114" r="2.8" fill="#5A1515" />
    </svg>
  );
}

// Della chat avatar — italic d on a soft coral disc.
function DellaAvatar({ size = 32, bg = '#F4A88F', fg = '#C2503A' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 44 44" style={{ flexShrink: 0, display: 'block' }}>
      <circle cx="22" cy="22" r="21" fill={bg} />
      <text x="22.5" y="30" textAnchor="middle"
        fontFamily="Fraunces, Georgia, serif" fontSize="24" fontWeight="500"
        fontStyle="italic" fill={fg}>d</text>
    </svg>
  );
}

// ---- Layout primitives ----

function LContainer({ children, style = {}, max = 1200 }) {
  return (
    <div style={{ maxWidth: max, margin: '0 auto', padding: '0 40px', ...style }}>{children}</div>
  );
}

function LEyebrow({ children, p, tone = 'sage' }) {
  const map = {
    sage:  { bg: p.sageSoft, fg: p.sageInk, dot: p.sage, line: p.sage },
    coral: { bg: '#FBE0D6', fg: p.accentDeep, dot: p.accent, line: p.accent },
    butter:{ bg: p.butterSoft, fg: '#7A5410', dot: p.butter, line: p.butter },
    onDark:{ bg: 'rgba(241,229,210,0.12)', fg: p.inkOnDark, dot: p.butter, line: p.butter },
  };
  const c = map[tone] || map.sage;
  const kind = p.eyebrowKind || 'pill';

  // Hairline-rule editorial label.
  if (kind === 'rule') {
    return (
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
        <span style={{ height: 1, width: 38, background: c.line }} />
        <span style={{ fontFamily: fontsV5.mono, fontSize: 10.5, fontWeight: 500,
          letterSpacing: '0.26em', textTransform: 'uppercase', color: p.inkMute }}>{children}</span>
      </div>
    );
  }
  // Hand-lettered cozy label.
  if (kind === 'hand') {
    return (
      <div style={{ fontFamily: fontsV5.hand, fontSize: 26, fontWeight: 600, color: c.fg,
        transform: 'rotate(-2deg)', display: 'inline-block', lineHeight: 1 }}>
        {children} <span style={{ color: c.dot }}>✿</span>
      </div>
    );
  }
  // Default: filled pill.
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 9,
      padding: '7px 15px', borderRadius: 999, background: c.bg, color: c.fg,
      fontFamily: fontsV5.mono, fontSize: 10.5, fontWeight: 500,
      letterSpacing: '0.22em', textTransform: 'uppercase',
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: c.dot, flexShrink: 0 }} />
      {children}
    </div>
  );
}

function LHeadline({ children, p, size = 64, color, style = {} }) {
  return (
    <h2 style={{
      fontFamily: p.dispFont || fontsV5.display, fontWeight: p.dispWeight || 500, fontSize: size,
      lineHeight: p.dispLine || 1.0, letterSpacing: p.dispTrack || '-0.035em',
      textTransform: p.dispTransform || 'none', color: color || p.ink,
      margin: 0, textWrap: 'balance', ...style,
    }}>{children}</h2>
  );
}

function LEm({ children, color, p }) {
  return <em style={{ fontStyle: 'italic', color: color || p.accent, fontWeight: 500 }}>{children}</em>;
}

function LButton({ children, href, p, kind = 'primary', onClick, pulse = false, style = {} }) {
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 9,
    padding: '15px 28px', borderRadius: (p && p.btnR != null) ? p.btnR : 999,
    fontFamily: fontsV5.body, fontSize: 15.5, fontWeight: 600,
    letterSpacing: '-0.005em', cursor: 'pointer', border: 'none',
    textDecoration: 'none', transition: 'transform 180ms ease, box-shadow 180ms ease',
    position: 'relative', whiteSpace: 'nowrap',
  };
  const kinds = {
    primary: { background: p.accent, color: p.accentInk, boxShadow: `0 12px 26px -10px ${p.accent}` },
    ghost:   { background: 'transparent', color: p.ink, border: `1.5px solid ${p.ruleStrong}` },
    cream:   { background: p.card, color: p.ink, boxShadow: '0 10px 26px -12px rgba(42,27,20,0.3)' },
    onDark:  { background: p.accent, color: p.accentInk, boxShadow: `0 14px 30px -10px rgba(0,0,0,0.45)` },
  };
  const s = { ...base, ...(kinds[kind] || kinds.primary), ...style };
  const props = {
    style: s,
    className: pulse ? 'v5-pulse' : undefined,
    onMouseEnter: (e) => { e.currentTarget.style.transform = 'translateY(-2px)'; },
    onMouseLeave: (e) => { e.currentTarget.style.transform = 'translateY(0)'; },
    onClick,
  };
  return href ? <a href={href} {...props}>{children}</a> : <button {...props}>{children}</button>;
}

// Soft sticker — emoji on a colored disc, with a gentle drift.
function LSticker({ emoji, bg, size = 52, rotate = 0, drift = false, delay = 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)`, flexShrink: 0,
      boxShadow: '0 8px 18px -6px rgba(42,27,20,0.28)',
      animation: drift ? `v5drift 7s ${delay}s ease-in-out infinite` : 'none',
      ...style,
    }}>{emoji}</div>
  );
}

// The brand mark, blooming. Same two-petal Daily Doula logo as DDMark, but the
// petals unfurl from a tucked bud (open=0) to the full lockup (open=1) — used by
// the stage row so the logo itself grows across the journey.
function DDBloom({ size = 44, open = 1, glow = false }) {
  const w = size, h = size * (140 / 130);
  const o = Math.max(0, Math.min(1, open));
  const s = 0.46 + 0.54 * o;            // bud → full size
  const swing = (1 - o) * 34;           // petals tuck toward centre when closed
  const petal = (rot) => `rotate(${rot} 65 122) translate(65 122) scale(${s}) translate(-65 -122)`;
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 140" width={w} height={h} style={{ display: 'block', overflow: 'visible' }}>
      {glow && <ellipse cx="65" cy="58" rx="58" ry="62" fill="#EDB94C" opacity={0.22 * o} style={{ filter: 'blur(8px)' }} />}
      <g transform={petal(swing)}>
        <path d="M65 122 C20 107, 8 62, 24 26 C34 5, 57 4, 65 122Z" fill="#EBBCB0" />
      </g>
      <g transform={petal(-swing)}>
        <path d="M65 122 C110 107, 122 62, 106 26 C96 5, 73 4, 65 122Z" fill="#C47060" />
      </g>
      <path d="M65 127 C62 123, 53 119, 53 112.5 C53 108, 56.2 106, 59.2 107.5 C61.2 108.6, 65 111.5, 65 111.5 C65 111.5, 68.8 108.6, 70.8 107.5 C73.8 106, 77 108, 77 112.5 C77 119, 68 123, 65 127Z" fill="#8C3030" />
      <circle cx="65" cy="114" r="2.8" fill="#5A1515" />
    </svg>
  );
}

Object.assign(window, {
  getV5Palette, getTheme, fontsV5, DellaFlower, DDMark, DDBloom, DellaAvatar,
  LContainer, LEyebrow, LHeadline, LEm, LButton, LSticker,
});