// shared.jsx — atoms used across all three directions

// ───────────────────────────────────────────────────────────
// Lucide icon helper — inline SVG (outline, 1.5 stroke)
// ───────────────────────────────────────────────────────────
const ICONS = {
  // ui
  arrowRight: 'M5 12h14M13 6l6 6-6 6',
  arrowUpRight: 'M7 17 17 7M8 7h9v9',
  arrowDown: 'M12 5v14M19 12l-7 7-7-7',
  check: 'M5 12l5 5L20 7',
  x: 'M6 6l12 12M18 6l-12 12',
  chevronRight: 'M9 6l6 6-6 6',
  chevronDown: 'M6 9l6 6 6-6',
  chevronLeft: 'M15 6l-6 6 6 6',
  plus: 'M12 5v14M5 12h14',
  minus: 'M5 12h14',
  // modules
  ticket: 'M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4V8z|M13 6v12',
  gate: 'M4 21v-7M20 21v-7M4 14h16M6 14V6a6 6 0 0 1 12 0v8',
  megaphone: 'M3 11v2a2 2 0 0 0 2 2h2l5 4V5L7 9H5a2 2 0 0 0-2 2zM15 8a4 4 0 0 1 0 8',
  store: 'M3 9l1-5h16l1 5v0a3 3 0 0 1-6 0 3 3 0 0 1-6 0 3 3 0 0 1-6 0zM5 9v11h14V9',
  calendar: 'M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zM4 10h16M9 3v4M15 3v4',
  chart: 'M4 20V10M10 20V4M16 20v-7M22 20H2',
  users: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75',
  star: 'M12 3l2.7 6.3 6.8.6-5.1 4.5 1.6 6.6L12 17.7 5.9 21l1.6-6.6L2.5 9.9l6.8-.6z',
  shield: 'M12 22s8-4 8-10V4l-8-2-8 2v8c0 6 8 10 8 10z',
  qr: 'M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h3v3h-3zM18 14h3v3h-3zM14 18h3v3h-3zM18 18h3v3h-3z',
  scanner: 'M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M3 12h18',
  zap: 'M13 2L3 14h7l-1 8 10-12h-7z',
  globe: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM2 12h20M12 2c2.5 3 4 7 4 10s-1.5 7-4 10c-2.5-3-4-7-4-10s1.5-7 4-10z',
  // social
  linkedin: 'M4 4h4v16H4zM6 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM10 9h4v2c.7-1.3 2-2 4-2 3 0 4 2 4 5v6h-4v-6c0-1.5-.7-2-2-2s-2 .7-2 2v6h-4z',
  instagram: 'M3 7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4zM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM17 6.5a.5.5 0 1 1 0 .01',
  twitter: 'M22 4s-1.5 2-3 2.5C18 5 16.5 4 14.5 4c-3 0-5 2.5-5 5v1C5 10 2.5 7 2.5 7s-2 5 3 8c-1 .7-2.5 1.3-4.5 1.3 2.5 1.5 5 2 7.5 2 8 0 13-7 13-13v-1c1-.8 2-2 2-2z',
  facebook: 'M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7c0-.5.5-1 1-1h3z',
};
function Ico({ name, size = 20, color = 'currentColor', strokeWidth = 1.6, style }) {
  const d = ICONS[name];
  if (!d) return null;
  const paths = d.split('|');
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
         strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
         style={{ flex: '0 0 auto', display: 'inline-block', ...style }}>
      {paths.map((p, i) => <path key={i} d={p} />)}
    </svg>
  );
}

// ───────────────────────────────────────────────────────────
// TreatedPhoto — img with optional duotone / halftone / grain
// ───────────────────────────────────────────────────────────
function TreatedPhoto({ src, alt = '', treatment = 'clean', tint, style = {}, children, radius = 0 }) {
  // treatments: clean | duotone-ink | duotone-red | halftone | grained | sepia
  const base = { position: 'relative', overflow: 'hidden', borderRadius: radius, ...style };
  const img = { width: '100%', height: '100%', objectFit: 'cover', display: 'block' };

  if (treatment === 'duotone-ink') {
    return (
      <div style={base}>
        <img src={src} alt={alt} style={{ ...img, filter: 'grayscale(1) contrast(1.05) brightness(.85)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, #1E2028 0%, #100F10 100%)', mixBlendMode: 'multiply', opacity: 0.78 }} />
        <div style={{ position: 'absolute', inset: 0, background: tint || '#FDF9F0', mixBlendMode: 'lighten', opacity: 0.18 }} />
        {children}
      </div>
    );
  }
  if (treatment === 'duotone-red') {
    return (
      <div style={base}>
        <img src={src} alt={alt} style={{ ...img, filter: 'grayscale(1) contrast(1.1)' }} />
        <div style={{ position: 'absolute', inset: 0, background: '#FF3636', mixBlendMode: 'multiply', opacity: 0.65 }} />
        <div style={{ position: 'absolute', inset: 0, background: '#FDF9F0', mixBlendMode: 'lighten', opacity: 0.25 }} />
        {children}
      </div>
    );
  }
  if (treatment === 'sepia') {
    return (
      <div style={base}>
        <img src={src} alt={alt} style={{ ...img, filter: 'sepia(.6) contrast(1.05) saturate(1.1) brightness(.95)' }} />
        <div className="has-grain light" style={{ position: 'absolute', inset: 0 }} />
        {children}
      </div>
    );
  }
  if (treatment === 'halftone') {
    return (
      <div style={base}>
        <img src={src} alt={alt} style={{ ...img, filter: 'grayscale(1) contrast(1.2)' }} />
        <div style={{ position: 'absolute', inset: 0, color: '#100F10',
          backgroundImage: 'radial-gradient(currentColor 1.1px, transparent 1.5px)',
          backgroundSize: '6px 6px', mixBlendMode: 'screen', opacity: 0.9 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(253,249,240,0.35)', mixBlendMode: 'normal' }} />
        {children}
      </div>
    );
  }
  if (treatment === 'grained') {
    return (
      <div className="has-grain" style={base}>
        <img src={src} alt={alt} style={{ ...img, filter: 'contrast(1.05) saturate(.95)' }} />
        {children}
      </div>
    );
  }
  return (
    <div style={base}>
      <img src={src} alt={alt} style={img} />
      {children}
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// Photos + content used across directions
// Hero photography sourced from the real fairs.com CDN so the site mirrors
// the photography that already represents the brand. assets/site-*.webp are
// retained as offline fallbacks.
// ───────────────────────────────────────────────────────────
const FAIRS_CDN = 'https://cdn.prod.website-files.com/693311519694297faf620ece';
const PHOTOS = {
  // Marquee fair photography (from fairs.com homepage)
  midway:     `${FAIRS_CDN}/69546ada4a6c5b215505ef15_midway.webp`,         // Aerial nighttime midway
  rv:         `${FAIRS_CDN}/69546adabbe8773f072c3082_fairs-rv.webp`,       // Fairs.com red RV
  tractor:    `${FAIRS_CDN}/69546adab9671758a2cea31f_tracktop.webp`,       // Orange pull tractor (tracktop)
  lemonade:   `${FAIRS_CDN}/69546adaa597ae56e0414e5f_lemonade.webp`,       // Lemonade stand
  // Mission / our-progress photography
  pumpkin:    `${FAIRS_CDN}/6933684bb0c7a2386dcfd7fb_fairs-pumpkin-award.webp`,
  vintageTractor: `${FAIRS_CDN}/6933684c15a701b1e09946af_tractor.webp`,    // Vintage Rumely tractor
  community:  `${FAIRS_CDN}/6933684cf8c1ede6f72d3d59_bd2d668af92eabf17fb127a68cb05c77_st-joseph-county-fair.webp`,
  missionFlags: `${FAIRS_CDN}/69397879ee6f6ed58ee0cb58_e11d8061105329dbc25987a35b767456_mission-flags.webp`,
  ferriswheelCloseup: `${FAIRS_CDN}/6933687bfa44a00f5ddb993c_ferriswheel-closeup.webp`,
  monsterTruck: `${FAIRS_CDN}/6933684b8283944049801a4e_monster-truck.webp`,
  ferriswheel: `${FAIRS_CDN}/6933684b389a3ab1da2d467a_ferris-wheel.webp`,
  girl:       `${FAIRS_CDN}/693368552f3a1d686c213f78_girl_photo.webp`,    // Carousel girl
  sign:       `${FAIRS_CDN}/693368558283944049801b48_carousel-sign.webp`,
  // Cow mascot (real fairs.com one, identical illustration to our local copy)
  cowMascot:  `${FAIRS_CDN}/69336855645915bbf1c8ae46_fairs-mascot-cow.webp`,
  // Product UI screenshots (real fairs.com platform section)
  uiWebsites: `${FAIRS_CDN}/69610107d3d475bed5cd78dc_custom_websites.avif`,
  uiTickets:  `${FAIRS_CDN}/69610107015cd6d0850e7fb3_ticketing%201.webp`,
  uiSocial:   `${FAIRS_CDN}/696101f3cd5ee1be9d7e87ea_socials.webp`,
  uiMarketing:`${FAIRS_CDN}/69610107c67a18628603fa8f_marketing%201.webp`,
  uiOps:      `${FAIRS_CDN}/696101070d99d6c6f4d4cfeb_operations%201.webp`,
  // Locally-bundled placeholder photos (still referenced by some legacy spots)
  cow:        'assets/site-cow.webp',
  hero:       'assets/hero-fair.jpg',
  mission:    'assets/mission-scene.jpg',
  venue:      'assets/venue-interior.jpg',
  avatar:     'assets/avatar-fair-director.jpg',
};

// Real fairs.com modules (used by Direction D)
const REAL_MODULES = [
  { id: 'websites', icon: 'globe', label: 'Websites', kicker: 'Build',
    blurb: 'Custom websites built for fairs.',
    detail: 'Edit-it-yourself with guardrails and rollback. Mobile-first, ADA-minded, and optimized for search — with fair-specific modules for schedules, maps, vendors, and exhibitors.',
    bullets: ['Edit-it-yourself with rollback', 'Mobile-first & ADA-minded', 'Schedule, map, vendor modules', 'SEO-optimized out of the box'] },
  { id: 'tickets', icon: 'ticket', label: 'Ticketing', kicker: 'Sell',
    blurb: 'Flexible ticketing for every fair.',
    detail: 'Day passes, season tickets, flex options, and bundles — with reserved seating, all in one platform built for fairs just like yours.',
    bullets: ['Day, season & flex passes', 'Reserved + GA seating', 'Bundles & packs', 'Apple/Google Wallet'] },
  { id: 'reach', icon: 'megaphone', label: 'Social', kicker: 'Reach',
    blurb: 'Social and email marketing tools.',
    detail: 'Manage content and communication in one place. Schedule posts, track engagement, and see what drives attendance — without juggling five logins.',
    bullets: ['Cross-channel post scheduling', 'Engagement & reach analytics', 'Approval & content queues', 'Inbox unified across networks'] },
  { id: 'grow', icon: 'chart', label: 'Marketing', kicker: 'Grow',
    blurb: 'Outbound campaigns that convert.',
    detail: 'Send the right message to the right ticket buyers through email and SMS, with clear reporting to understand engagement and revenue per send.',
    bullets: ['Audience segmentation', 'Email + SMS automations', 'Revenue per campaign', 'Wired to your ticket sales'] },
  { id: 'vendors', icon: 'store', label: 'Vendors', kicker: 'Host',
    blurb: 'Vendor and exhibitor management, end to end.',
    detail: 'Take applications on custom forms, collect COIs and documents, set your own pricing, assign booths on an interactive map, and invoice — all in one place.',
    bullets: ['Custom forms & document collection', 'Interactive booth assignment map', 'Custom pricing & approval pipeline', 'Invoicing & fulfillment'] },
  { id: 'sponsors', icon: 'star', label: 'Sponsors', kicker: 'Fund',
    blurb: 'Sponsorships from prospect to fulfilled.',
    detail: 'Build custom tiers, take applications, and move every deal from prospect to paid. Allocate ticket pools through a dedicated sponsor portal, then invoice and track fulfillment.',
    bullets: ['Custom sponsorship tiers', 'Applications & deal pipeline', 'Dedicated sponsor portal & ticket allocation', 'Invoicing & fulfillment'] },
];

// Real fairs that use fairs.com today
const REAL_FAIRS = [
  'U.P. State Fair', 'Trumbull County Fair', 'Midland County Fair',
  'Windsor Fair', 'Seneca County Fair', 'Putnam County Fair',
  'Hancock County Fair', 'Lenawee County Fair', 'Guadalupe County Fair',
  'Hamilton County Fair', 'St. Joe\u2019s County Grange Fair', 'Hendricks County 4-H Fair',
  'Preble County Fair', 'Langlade County Fair', 'Burnett County Fair',
  'Guernsey County Fair',
];

// Real testimonials pulled from fairs.com today
const REAL_TESTIMONIALS = [
  { quote: "Outside of the ticketing element, the social media and marketing support was also invaluable. With such a small staff for the UP State Fair, it was wonderful to have an extension of ourselves to hit some of those marketing timelines we have previously missed.",
    name: 'Sheila Krueger', role: 'Associate Director, Delta County Chamber', fair: 'U.P. State Fair', stars: 5 },
  { quote: "This was the first year we could provide online tickets for our attendees and the ability to use credit cards at the gates. These options made our admission to the fair more streamlined and we were able to move people through the gates quicker.",
    name: 'Barry Brown', role: 'Board Member', fair: 'Trumbull County Fair', stars: 5 },
  { quote: "Their passion for helping fairs succeed really showed. They didn’t just “set it and forget it” — they rolled up their sleeves and worked right alongside us … and even had boots on the ground to make sure our event went off without a hitch.",
    name: 'Nic Hall', role: 'Fair Manager', fair: 'Midland County Fair', stars: 5 },
  { quote: "I don’t get kicked to an automated chatbot or offshore support team. I can always speak with my account manager who is actively monitoring my events. I sleep better at night knowing I have a partner who is just as invested in our success as we are.",
    name: 'Derek Rowe', role: 'President', fair: 'Seneca County Fair', stars: 5 },
  { quote: "Fairs.com made our transition to digital ticketing smooth and stress-free. Between the hands-on support, user-friendly tools, and responsive customer service, the entire process was easier than we ever expected. We look forward to continuing the partnership and would highly recommend Fairs.com to any fair considering making the move to online ticketing.",
    name: 'Dan Foster', role: 'President', fair: 'Windsor Fair', stars: 5 },
];

// Real comparison table from fairs.com (vs Saffire + eTix), matches the
// live fairs.com "How we stack up" table verbatim, including the Year/Focus
// info rows, the Features section divider, and the Pricing footer row.
const REAL_COMPARE = {
  cols: [
    { name: 'Fairs.com', accent: true  },
    { name: 'Saffire',   accent: false },
    { name: 'eTix',      accent: false },
  ],
  meta: [
    ['Year',  '2023',  '1998',           '2000'      ],
    ['Focus', 'Fairs', 'Outdoor events', 'All events'],
  ],
  features: [
    ['Integrated Websites + SEO',                       true,  true,  false],
    ['Ticketing + Seat Maps',                           true,  true,  true ],
    ['Social Media Management Tools',                   true,  false, false],
    ['Email + SMS Marketing',                           true,  false, false],
    ['Camping, Storage and Facility Rental Management', true,  false, false],
    ['Dedicated Account Manager',                       'Always', 'Only for Big Events', 'Only for Big Events'],
  ],
  pricing: ['Custom pricing options tailored for you.', 'Always', 'Only for Big Events', 'Only for Big Events'],
};

// Real fairs.com stats
const REAL_STATS = [
  { num: '180+',   label: 'fairs served',               sub: 'Trusted by county and state fairs' },
  { num: '48 hrs', label: 'to selling tickets',         sub: 'Expedited onboarding — sell in as little as two days after signing' },
  { num: '28%',    label: 'increased pre-sale tickets', sub: 'Average increase in pre-sale ticket volume' },
];

// Real before/after copy from fairs.com
const REAL_TRANSFORM = {
  title: 'From complex chaos to streamlined success',
  blurb: 'We solve the most challenging fair management problems with intuitive, integrated technology that simplifies every aspect of event planning.',
  before: [
    'Outdated websites',
    'Disconnected ticketing',
    'Manual spreadsheets',
    'Inconsistent marketing',
    'Low vendor visibility',
    'Missed revenue opportunities',
  ],
  after: [
    'Modern, mobile-first websites with fair-specific functionality',
    'Unified ticketing + reporting',
    'Integrated email, SMS and social marketing',
    'Centralized operations dashboard',
    'Better visitor experience',
    'More revenue with less effort',
  ],
};

// Three pillars from fairs.com mission section
const REAL_PILLARS = [
  { id: 'enable',    label: 'Enable',    title: 'Tools that deliver real results',                    blurb: 'Providing proven technology and support purpose-built for fair operations.', icon: 'zap' },
  { id: 'educate',   label: 'Educate',   title: 'Proven, practical knowledge for running your fair', blurb: 'Workshops, guides, and resources grounded in real-world fair operations.', icon: 'shield' },
  { id: 'celebrate', label: 'Celebrate', title: 'We tell the stories that matter most',              blurb: 'Highlighting the people, traditions, and moments that make each fair special.', icon: 'star' },
];

// ───────────────────────────────────────────────────────────
// Shared interactive primitives
// ───────────────────────────────────────────────────────────
function useCarousel(length, autoMs = 0) {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    if (!autoMs) return;
    const id = setInterval(() => setI(x => (x + 1) % length), autoMs);
    return () => clearInterval(id);
  }, [length, autoMs]);
  return [i, setI];
}

Object.assign(window, {
  Ico, TreatedPhoto, PHOTOS, REAL_MODULES, REAL_FAIRS,
  REAL_TESTIMONIALS, REAL_COMPARE,
  REAL_STATS, REAL_TRANSFORM, REAL_PILLARS,
  useCarousel,
});