// pagebird — brand tokens, mascot SVG, decorative shapes
// Pulled directly from the prototype so the landing page matches.

const PB_LIGHT = {
  green: "#1F5345", greenDeep: "#173E34", greenDark: "#0F2A23", greenLight: "#2D6A58",
  gold: "#D9B45C", goldLight: "#E9C77A",
  pink: "#F5DCD0", pinkDeep: "#E8C4B4", coral: "#E8856B", cream: "#FAF1E8",
  cobalt: "#1F2D8A", ink: "#2A2422",
  bg: "#FAF1E8", bgAlt: "#F5DCD0", surface: "#FFFFFF", surfaceAlt: "#F5DCD0",
  text: "#2A2422", textMuted: "#9b8e8a", textSubtle: "#7a6f6a",
  border: "#E8D4C8",
  headerStart: "#1F5345", headerEnd: "#173E34",
};

const PB_DARK = {
  green: "#1F5345", greenDeep: "#0F2A23", greenDark: "#081914", greenLight: "#2D6A58",
  gold: "#E9C77A", goldLight: "#F4D898",
  pink: "#3A2A26", pinkDeep: "#4A332D", coral: "#F09478", cream: "#1A1614",
  cobalt: "#3F4FB5", ink: "#F5DCD0",
  bg: "#0F2A23", bgAlt: "#0A1F1A", surface: "#1A3830", surfaceAlt: "#15302A",
  text: "#F5DCD0", textMuted: "#9bA89D", textSubtle: "#B5C2B7",
  border: "#244840",
  headerStart: "#0F2A23", headerEnd: "#08191A",
};

const Wordmark = ({ size = 48, color = "white" }) => (
  <span style={{
    fontFamily: "'Roboto Slab', 'Fraunces', Georgia, serif",
    fontWeight: 700, fontSize: size, letterSpacing: "-0.025em",
    color, lineHeight: 1, display: "inline-block",
  }}>pagebird</span>
);

const GoldLinework = ({ opacity = 0.6, color = "#D9B45C" }) => (
  <svg viewBox="0 0 600 600"
    style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity, pointerEvents: "none" }}
    preserveAspectRatio="xMidYMid slice" aria-hidden="true">
    <g fill="none" stroke={color} strokeWidth="3" strokeLinecap="round">
      <ellipse cx="180" cy="280" rx="220" ry="240" transform="rotate(-18 180 280)" />
      <ellipse cx="380" cy="320" rx="180" ry="210" transform="rotate(22 380 320)" />
      <ellipse cx="280" cy="240" rx="140" ry="170" transform="rotate(-8 280 240)" />
      <path d="M 60 420 Q 200 300 360 480 T 580 380" strokeWidth="2.5" />
      <path d="M 120 120 Q 280 60 420 200 T 540 100" strokeWidth="2" opacity="0.7" />
    </g>
  </svg>
);

const CoralSquiggle = ({ color = "#E8856B", style = {} }) => (
  <svg viewBox="0 0 200 80" style={style} aria-hidden="true">
    <path d="M 5 40 Q 20 15, 40 40 T 80 40 Q 100 65, 120 40 T 160 40 Q 180 15, 195 40"
      fill="none" stroke={color} strokeWidth="3.5" strokeLinecap="round" opacity="0.85" />
    <path d="M 10 55 Q 30 35, 55 55 T 100 55 Q 125 75, 150 55 T 190 55"
      fill="none" stroke={color} strokeWidth="3" strokeLinecap="round" opacity="0.6" />
  </svg>
);

// Compact chick mark — for app icons & nav
const PageBirdMark = ({ size = 64 }) => (
  <svg viewBox="0 0 100 100" width={size} height={size} style={{ display: "block" }} aria-hidden="true">
    <ellipse cx="50" cy="62" rx="28" ry="24" fill="#F2C14E" stroke="#2A2422" strokeWidth="2.4" />
    <circle cx="56" cy="38" r="18" fill="#F2C14E" stroke="#2A2422" strokeWidth="2.4" />
    <path d="M 36 58 Q 30 70 42 78 Q 50 70 46 56 Z" fill="#D9B45C" stroke="#2A2422" strokeWidth="1.8" strokeLinejoin="round" />
    <circle cx="62" cy="36" r="2.2" fill="#2A2422" />
    <polygon points="72,40 84,42 73,45" fill="#E8856B" stroke="#2A2422" strokeWidth="1.5" strokeLinejoin="round" />
    <line x1="44" y1="84" x2="44" y2="92" stroke="#2A2422" strokeWidth="2.2" strokeLinecap="round" />
    <line x1="56" y1="84" x2="56" y2="92" stroke="#2A2422" strokeWidth="2.2" strokeLinecap="round" />
  </svg>
);

// Hero composition: chick + book — used in the headline
const PageBirdHero = ({ size = 280, accentColor = "#E8856B", greenColor = "#1F5345", greenLightColor = "#2D6A58" }) => (
  <svg viewBox="0 0 220 160" width={size} height={size * (160/220)} style={{ display: "block" }} aria-hidden="true">
    <ellipse cx="110" cy="148" rx="78" ry="4" fill="#2A2422" opacity="0.12" />
    <path d="M 30 110 L 30 138 L 138 138 L 138 116 Z" fill="#F4E8D6" stroke="#2A2422" strokeWidth="2" strokeLinejoin="round" />
    <g stroke="#2A2422" strokeWidth="0.6" opacity="0.35">
      <line x1="34" y1="118" x2="134" y2="120" />
      <line x1="34" y1="124" x2="134" y2="126" />
      <line x1="34" y1="130" x2="134" y2="132" />
    </g>
    <path d="M 26 96 L 26 122 L 134 122 L 142 110 L 142 84 L 34 84 Z" fill={greenColor} stroke="#2A2422" strokeWidth="2.2" strokeLinejoin="round" />
    <path d="M 26 96 L 34 84 L 142 84 L 134 96 Z" fill={greenLightColor} stroke="#2A2422" strokeWidth="2.2" strokeLinejoin="round" />
    <line x1="26" y1="96" x2="134" y2="96" stroke="#0F2A23" strokeWidth="1" opacity="0.6" />
    <path d="M 70 122 L 70 158 L 78 150 L 86 158 L 86 122 Z" fill={accentColor} stroke="#2A2422" strokeWidth="1.8" strokeLinejoin="round" />
    <line x1="78" y1="125" x2="78" y2="148" stroke="#2A2422" strokeWidth="0.8" opacity="0.4" />
    <ellipse cx="172" cy="118" rx="22" ry="20" fill="#F2C14E" stroke="#2A2422" strokeWidth="2" />
    <circle cx="178" cy="98" r="14" fill="#F2C14E" stroke="#2A2422" strokeWidth="2" />
    <path d="M 162 114 Q 158 124 168 130 Q 174 122 170 112 Z" fill="#D9B45C" stroke="#2A2422" strokeWidth="1.4" strokeLinejoin="round" />
    <circle cx="183" cy="96" r="1.8" fill="#2A2422" />
    <polygon points="190,99 198,100 191,103" fill={accentColor} stroke="#2A2422" strokeWidth="1.2" strokeLinejoin="round" />
    <line x1="166" y1="138" x2="166" y2="146" stroke="#2A2422" strokeWidth="2" strokeLinecap="round" />
    <line x1="178" y1="138" x2="178" y2="146" stroke="#2A2422" strokeWidth="2" strokeLinecap="round" />
    <line x1="162" y1="146" x2="170" y2="146" stroke="#2A2422" strokeWidth="2" strokeLinecap="round" />
    <line x1="174" y1="146" x2="182" y2="146" stroke="#2A2422" strokeWidth="2" strokeLinecap="round" />
    <g stroke="#2A2422" strokeWidth="1.4" strokeLinecap="round" fill="none">
      <line x1="200" y1="86" x2="206" y2="82" />
      <line x1="202" y1="94" x2="210" y2="94" />
      <line x1="200" y1="102" x2="206" y2="106" />
    </g>
  </svg>
);

const AppIcon = ({ size = 64, C }) => (
  <div style={{
    width: size, height: size, borderRadius: size * 0.23,
    background: `linear-gradient(135deg, ${C.greenLight} 0%, ${C.greenDeep} 100%)`,
    display: "grid", placeItems: "center",
    boxShadow: `0 ${size * 0.08}px ${size * 0.2}px rgba(15,42,35,0.4)`,
    flexShrink: 0, position: "relative", overflow: "hidden",
  }}>
    <PageBirdMark size={size * 0.78} />
  </div>
);

Object.assign(window, {
  PB_LIGHT, PB_DARK,
  Wordmark, GoldLinework, CoralSquiggle,
  PageBirdMark, PageBirdHero, AppIcon,
});
