// shared.jsx, brand data, placeholder + logo primitives for Sam Set Events
// Exposes everything on window for the per-direction files.

const SS_COPY = {
  services: [
    { n: '01', name: 'Weddings', blurb: 'Bespoke wedding design and full planning, tailored to your story and styled to the last detail.', ph: 'wedding ceremony, candlelit aisle', tone: 'blush' },
    { n: '02', name: 'Engagement Parties', blurb: 'An elegant first celebration to mark the beginning of your forever.', ph: 'engagement toast, golden hour terrace', tone: 'gold' },
    { n: '03', name: 'Corporate Events', blurb: 'Polished, seamless gatherings that reflect your brand and impress every guest.', ph: 'gala dinner, branded stage', tone: 'sage' },
    { n: '04', name: 'Baby Showers', blurb: 'Warm, charming celebrations that welcome new beginnings with grace.', ph: 'baby shower, pastel tablescape', tone: 'rose' },
    { n: '05', name: 'Receptions', blurb: 'Refined receptions designed to flow effortlessly and linger in memory.', ph: 'reception, long tables, taper candles', tone: 'blush' },
    { n: '06', name: 'Birthday Celebrations', blurb: 'Milestone parties imagined around you, personal, playful, impeccably done.', ph: 'birthday dinner, intimate private room', tone: 'gold' },
  ],
  process: [
    { n: '01', t: 'Discover', b: 'We listen first. A relaxed consultation to understand your vision, guest experience, and budget.' },
    { n: '02', t: 'Design', b: 'Concept, mood, palette, and layout, a cohesive creative direction you’ll fall in love with.' },
    { n: '03', t: 'Plan', b: 'Vendors, logistics, timelines, and the hundred small details, handled and tracked end to end.' },
    { n: '04', t: 'Celebrate', b: 'Seamless day-of coordination, so you’re fully present while we run everything behind the scenes.' },
  ],
  testimonials: [
    { q: 'Our wedding was everything we imagined, and somehow more. Every detail was considered.', a: 'Jessica', tag: 'Wedding · New York' },
    { q: 'Professional, warm, and endlessly attentive. Planning felt completely stress-free.', a: 'Lena & Omar', tag: 'Wedding · Tri-State' },
    { q: 'Flawless. Our guests are still talking about it months later.', a: 'Claire', tag: 'Milestone Celebration' },
  ],
  why: [
    'Full-service from concept to coordination',
    'One trusted point of contact',
    'A vetted network of New York’s best vendors',
    'Calm, unflappable execution',
    'Design that’s tailored, never templated',
  ],
  journal: [
    { meta: 'Planning · Jun 2026', t: 'The 12-Month Luxury Wedding Planning Timeline', ph: 'flatlay, invitation suite, ribbon', tone: 'blush' },
    { meta: 'Venues · May 2026', t: 'How to Choose a Wedding Venue in New York', ph: 'ballroom, empty, morning light', tone: 'sage' },
    { meta: 'Planning · May 2026', t: 'Full-Service vs. Month-Of: Which Do You Need?', ph: 'planner desk, swatches & timeline', tone: 'gold' },
  ],
  faqsHome: [
    'Where are you based, and what areas do you serve?',
    'How far in advance should we book?',
    'Do you offer full, partial, and day-of planning?',
    'Do you travel for destination events?',
  ],
  wedIncluded: [
    'Full-service planning & design, or partial / month-of',
    'Concept, mood board, palette & styling direction',
    'Venue sourcing & layout',
    'Vendor curation, booking & management',
    'Budget planning & tracking',
    'Timeline & run-of-show',
    'Guest experience & RSVP coordination',
    'On-the-day coordination & oversight',
  ],
  wedFaqs: [
    { q: 'How far in advance should we book?', a: 'For full-service weddings, we recommend reaching out 10-14 months ahead, though we regularly take on shorter timelines.', open: true },
    { q: 'Do you work with our venue and vendors?', a: '' },
    { q: 'Do you offer partial or month-of planning?', a: '' },
    { q: 'What is your typical investment range?', a: '' },
  ],
  wedGallery: [
    { ph: 'first look, garden, soft light', tone: 'blush', h: 360 },
    { ph: 'tablescape, taper candles, ivory linen', tone: 'gold', h: 300 },
    { ph: 'ceremony arch, white florals', tone: 'sage', h: 340 },
    { ph: 'ballroom reception, chandeliers', tone: 'rose', h: 310 },
    { ph: 'cake moment, champagne tower', tone: 'blush', h: 350 },
    { ph: 'last dance, sparkler exit', tone: 'gold', h: 320 },
  ],
  venues: [],
  navLinks: ['About', 'Services', 'Portfolio', 'Contact'],
  footerExplore: ['About', 'Services', 'Portfolio', 'FAQ', 'Contact'],
  footerContact: ['hello@samsetevents.com', 'Instagram · Facebook'],
};

const PH_TONES = {
  blush: { b: '#F3DEDA', s: '#ECCFC9', l: '#8A5550' },
  rose: { b: '#E5C6C5', s: '#DCB5B4', l: '#6E4140' },
  sage: { b: '#DFE2D9', s: '#D2D6CA', l: '#4E5547' },
  gold: { b: '#F0E2CB', s: '#E8D4B7', l: '#7A5A2E' },
  burgundy: { b: '#6B3F43', s: '#643a3e', l: '#E9C7C1' },
};

function PH({ label = 'image', tone = 'blush', w, h, ratio, arch = false, circle = false, r = 0, style = {}, className = '', src: srcProp, alt: altProp }) {
  const t = PH_TONES[tone] || PH_TONES.blush;
  const radius = circle ? '50%' : (arch ? '999px 999px 24px 24px' : r);
  // Image source: explicit `src` prop wins, else look up by label in SS_IMAGES.
  // Falls back to the striped placeholder if neither resolves or the image fails.
  const src = srcProp || ((typeof window !== 'undefined' && window.SS_IMAGES) ? window.SS_IMAGES[label] : null);
  const [failed, setFailed] = React.useState(false);
  const showImg = src && !failed;
  const s = {
    width: w, height: h, aspectRatio: ratio,
    background: t.b,
    borderRadius: radius,
    position: 'relative', overflow: 'hidden',
    ...style,
  };
  return (
    <div className={'ph ' + className} style={s}>
      {showImg ? (
        <img
          src={src}
          alt={altProp || label}
          loading="lazy"
          onError={() => setFailed(true)}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
      ) : (
        // No image mapped yet (e.g. service galleries pending). Show a clean
        // tinted frame rather than dev-style placeholder text.
        <span className="ph-label" aria-label={label} style={{ color: t.l }}></span>
      )}
    </div>
  );
}

function SSLogo({ variant = 'burgundy', mono = false, h = 48, style = {}, className = '' }) {
  const src = 'assets/' + (mono ? 'monogram-' : 'logo-') + variant + '.png';
  return <img src={src} alt="Sam Set Events" style={{ height: h, width: 'auto', display: 'block', ...style }} className={className} />;
}

Object.assign(window, { SS_COPY, PH, SSLogo, PH_TONES });