// LargeSections.jsx — Large Event audience hub sections (Design Brief §2).
// Reuses the validated hub patterns from Corporate/Campus/Wedding. Two booking
// models run throughout: PRIVATE (Get a Quote) + PUBLIC (Submit to our trucks).

/* ===== A — Hero ===== */
const LargeHero = ({ onQuote, onPublic }) => (
  <section id="top" style={{ background: T.white, padding: 'clamp(36px,5vw,80px) 24px clamp(48px,6vw,96px)' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid',
                  gridTemplateColumns: 'minmax(0,1.05fr) minmax(0,1fr)', gap: 'clamp(24px,4vw,64px)', alignItems: 'center' }}
         className="hero-grid">
      <div>
        <div className="eyebrow" style={{ marginBottom: 16 }}>Large events · New Jersey</div>
        <h1 style={{ fontSize: 'clamp(34px,4.6vw,58px)', lineHeight: 1.06, letterSpacing: '-0.025em', fontWeight: 700, margin: '0 0 20px', color: T.ink }}>
          Large-scale food truck catering &amp; festival vendors in NJ.
        </h1>
        <p style={{ fontSize: 'clamp(17px,1.4vw,21px)', lineHeight: 1.55, color: T.ink, margin: '0 0 28px', maxWidth: 600 }}>
          Hosting a big private event? We curate, permit, and run multi-truck catering as a single managed contract. Running a public festival or town event? Submit it and we'll get it in front of our trucks.
        </p>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
          <button type="button" onClick={onQuote} className="btn btn-primary" style={{ padding: '16px 24px', fontSize: 17 }}>Get a Quote</button>
          <button type="button" onClick={onPublic} className="btn btn-secondary" style={{ padding: '15px 22px', fontSize: 16 }}>
            Running a public event? Submit it <span style={{ marginLeft: 4 }}>→</span>
          </button>
        </div>
        <p style={{ marginTop: 24, fontSize: 14, color: T.inkSoft, lineHeight: 1.55, maxWidth: 560 }}>
          Private events: one contract, one coordinator, fully insured. Public events: a fast line to our vetted truck network.
        </p>
      </div>
      <div>
        <PhotoPlaceholder src={PHOTOS.heroLargeEvent} caption="Hero · a row of food trucks at a large NJ festival, crowd at dusk." ratio="5/4" tone="navy" />
      </div>
    </div>
  </section>
);

/* ===== B — "Which kind of event?" split ===== */
const EventSplit = ({ onQuote, onPublic }) => (
  <section style={{ background: T.bgAlt, padding: 'clamp(48px,6vw,80px) 24px', borderTop: `1px solid ${T.border}` }}>
    <div style={{ maxWidth: 1100, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 36 }}>
        <div className="eyebrow" style={{ marginBottom: 8 }}>Two ways we help</div>
        <h2 style={{ margin: 0 }}>Which kind of event are you running?</h2>
      </div>
      <div className="grid-2 split-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {/* Card 1 — Private */}
        <div className="split-card" style={{ borderTop: `4px solid ${T.teal}` }}>
          <div className="split-tag" style={{ color: T.teal, background: T.skyTint }}>Private large event</div>
          <h3 style={{ fontSize: 22, color: T.navy, margin: '14px 0 6px' }}>You're hosting and covering the food</h3>
          <p style={{ fontSize: 15.5, color: T.inkSoft, lineHeight: 1.6, margin: '0 0 8px' }}>
            Grand openings, corporate activations, big celebrations, fundraisers. We curate the trucks, handle permits and insurance, and run the day as one managed contract.
          </p>
          <ul className="split-list">
            <li>One contract, one coordinator</li>
            <li>Permits &amp; COIs across the lineup</li>
            <li>On-site logistics handled</li>
          </ul>
          <button type="button" onClick={onQuote} className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 'auto' }}>Get a Quote</button>
        </div>
        {/* Card 2 — Public */}
        <div className="split-card" style={{ borderTop: `4px solid ${T.navy}` }}>
          <div className="split-tag" style={{ color: T.navy, background: T.ink100 || '#F3F4F6' }}>Public festival or town event</div>
          <h3 style={{ fontSize: 22, color: T.navy, margin: '14px 0 6px' }}>You want trucks to vend to your crowd</h3>
          <p style={{ fontSize: 15.5, color: T.inkSoft, lineHeight: 1.6, margin: '0 0 8px' }}>
            Festivals, street fairs, concerts, markets, municipal events. Submit your event and we'll share it with our vetted truck network — interested trucks respond to you directly.
          </p>
          <ul className="split-list">
            <li>Listed to our truck network</li>
            <li>Trucks contact you directly</li>
            <li>No fee, no managed lineup</li>
          </ul>
          <button type="button" onClick={onPublic} className="btn btn-secondary" style={{ width: '100%', justifyContent: 'center', marginTop: 'auto', borderColor: T.navy, color: T.navy }}>Submit your public event</button>
        </div>
      </div>
    </div>
  </section>
);

/* ===== C — Occasion strip ===== */
const LG_OCCASIONS = [
  { label: 'Festivals & street fairs',          Icon: IconStar },
  { label: 'Town & municipal events',           Icon: IconTrophy },
  { label: 'Grand openings & ribbon cuttings',  Icon: IconRocket },
  { label: 'Concerts & sporting events',        Icon: IconMic },
  { label: 'Large corporate activations',       Icon: IconBolt },
  { label: 'Walks, runs & big fundraisers',     Icon: IconHand },
];
const LargeOccasionStrip = () => (
  <section style={{ padding: 'clamp(40px,5vw,64px) 24px', background: T.white }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14 }} className="occasion-grid">
        {LG_OCCASIONS.map((o, i) => {
          const Ico = o.Icon;
          return (
            <div key={i} style={{ background: T.bgAlt, border: `1px solid ${T.border}`, borderRadius: 12,
                                  padding: '18px 16px', display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-start', minHeight: 96 }}>
              <span style={{ width: 36, height: 36, borderRadius: 8, background: T.skyTint, color: T.teal,
                             display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}><Ico size={18} /></span>
              <span style={{ fontSize: 13.5, lineHeight: 1.35, color: T.ink, fontWeight: 500, textWrap: 'balance' }}>{o.label}</span>
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

/* ===== D — Value props ===== */
const LG_PROPS = [
  { Icon: IconUser, title: 'One contract, however many trucks',
    body: 'Hiring ten trucks usually means ten contracts, ten COIs, ten arrival times. With us it\u2019s one contract, one coordinator, one invoice.' },
  { Icon: IconShield, title: 'Permits & insurance at scale',
    body: 'COIs, municipal permits, health-department coordination, and fire-marshal paperwork for large gatherings — handled across the whole lineup.' },
  { Icon: IconBolt, title: 'Throughput planned, lines managed',
    body: 'We stagger trucks and menus so a big crowd gets fed fast. Self-powered trucks mean no generator village and no hookups to arrange.' },
];
const LargeValueProps = () => (
  <section id="why" style={{ padding: 'clamp(64px,8vw,96px) 24px', background: T.bgAlt }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <h2 style={{ margin: '0 0 40px', maxWidth: 760 }}>Multi-truck events without the multi-vendor chaos</h2>
      <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {LG_PROPS.map((p, i) => {
          const Ico = p.Icon;
          return (
            <div key={i} className="card" style={{ border: `1px solid ${T.border}`, display: 'flex', flexDirection: 'column', gap: 14, background: T.white }}>
              <span style={{ width: 48, height: 48, borderRadius: 10, background: T.skyTint, color: T.teal,
                             display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Ico size={24} /></span>
              <h3 style={{ fontSize: 20, fontWeight: 600, color: T.navy, margin: '4px 0 0' }}>{p.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: T.inkSoft, margin: 0 }}>{p.body}</p>
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

/* ===== E — What we handle ===== */
const LG_HANDLED = [
  'Curated multi-truck lineup matched to crowd size, cuisine variety, and footprint',
  'One contract and one COI package covering the whole lineup',
  'Municipal permits, health-department, and large-gathering paperwork',
  'Site/layout planning — power-free placement, lines, and flow',
  'On-site coordinator managing all trucks the day of',
  'Staggered service and menu mix so lines move at peak',
  'Card / ACH / PO billing for private events; vendor coordination for public ones',
  'Backup plan if a truck has an issue — we have the bench to swap',
];
const LargeWhatWeHandle = () => (
  <section style={{ padding: 'clamp(64px,8vw,96px) 24px', background: T.white }}>
    <div style={{ maxWidth: 1000, margin: '0 auto' }}>
      <h2 style={{ margin: '0 0 40px' }}>What a managed large event covers</h2>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '18px 48px' }} className="handle-grid">
        {LG_HANDLED.map((item, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <span style={{ width: 24, height: 24, borderRadius: 999, background: T.teal, color: T.white,
                           display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto', marginTop: 1 }}><IconCheck size={14} stroke={2.5} /></span>
            <span style={{ fontSize: 16, lineHeight: 1.5, color: T.ink }}>{item}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 40, padding: '22px 26px', background: T.bgAlt, border: `1px solid ${T.border}`, borderRadius: 12, borderLeft: `3px solid ${T.teal}` }}>
        <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: T.ink }}>
          Behind it all: a real booking platform managing every truck, permit, and payment in one place. Built for events where "wing it" isn't an option.
        </p>
      </div>
    </div>
  </section>
);

/* ===== F — Pricing / how it works ===== */
const LargePricing = ({ onQuote, onPublic }) => (
  <section id="pricing" style={{ padding: 'clamp(64px,8vw,96px) 24px', background: T.bgAlt }}>
    <div style={{ maxWidth: 1000, margin: '0 auto' }}>
      <div className="eyebrow" style={{ marginBottom: 8 }}>How it works</div>
      <h2 style={{ margin: '0 0 12px' }}>How large-event pricing works in NJ</h2>
      <p style={{ fontSize: 16, color: T.inkSoft, margin: '0 0 28px', maxWidth: 640 }}>
        Large events price differently from single-truck jobs — and the two models are different animals.
      </p>
      <div className="grid-2 split-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        <div className="card" style={{ background: T.white, border: `1px solid ${T.border}`, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: T.teal }}>Private events</div>
          <h3 style={{ fontSize: 19, color: T.navy, margin: 0 }}>Quoted per truck, custom</h3>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: T.inkSoft, margin: 0 }}>
            Quoted per truck with guest-count guarantees; the total scales with truck count, service hours, and menu. We build the lineup to your crowd and give you one number.
          </p>
          <p style={{ margin: '6px 0 0', fontSize: 13, color: T.inkSoft, fontStyle: 'italic' }}>
            {/* ⚠️ Tony to confirm whether to show a per-truck starting figure here or keep it consultative. */}
            Custom-quoted — no two activations are alike.
          </p>
          <a onClick={onQuote} role="button" tabIndex={0} className="btn-link" style={{ fontSize: 15, fontWeight: 600, marginTop: 'auto', cursor: 'pointer' }}>Get a quote <span className="arrow">→</span></a>
        </div>
        <div className="card" style={{ background: T.white, border: `1px solid ${T.border}`, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: T.navy }}>Public events</div>
          <h3 style={{ fontSize: 19, color: T.navy, margin: 0 }}>Not a catering quote at all</h3>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: T.inkSoft, margin: 0 }}>
            You submit your event and we put it in front of our trucks. There's no managed-lineup fee, because we're connecting you with trucks — not running the event for you.
          </p>
          <a onClick={onPublic} role="button" tabIndex={0} className="btn-link" style={{ fontSize: 15, fontWeight: 600, marginTop: 'auto', cursor: 'pointer' }}>Submit it to our trucks <span className="arrow">→</span></a>
        </div>
      </div>
    </div>
  </section>
);

/* ===== G — Fleet (data-driven from window.FTOTM_TRUCKS, Large Event "Best For" first) ===== */
const LargeFleet = () => {
  const ref = React.useRef(null);
  const scroll = (dir) => { if (ref.current) ref.current.scrollBy({ left: dir * (ref.current.clientWidth * 0.75), behavior: 'smooth' }); };
  const items = (window.ftotmPickTrucks ? window.ftotmPickTrucks({ bestFor: ['Large Event'], limit: 8 }) : []);
  if (!items.length) return null;
  return (
    <section id="fleet" style={{ padding: 'clamp(64px,8vw,96px) 0', background: T.white }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 24px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8, gap: 16, flexWrap: 'wrap' }}>
          <h2 style={{ margin: 0 }}>A fleet deep enough to feed a festival</h2>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <button onClick={() => scroll(-1)} aria-label="Previous" style={lgCtrlBtn}><IconChevL size={18} /></button>
            <button onClick={() => scroll(1)} aria-label="Next" style={lgCtrlBtn}><IconChevR size={18} /></button>
          </div>
        </div>
        <p style={{ color: T.inkSoft, margin: '0 0 32px', maxWidth: 620 }}>Real FTOTM trucks, picked for variety and throughput. This is a slice — we field as many trucks as your event needs.</p>
      </div>
      <div ref={ref} className="hide-scrollbar" style={{ display: 'flex', gap: 24, overflowX: 'auto', scrollSnapType: 'x mandatory',
                                                         padding: '4px clamp(24px, 4vw, calc((100vw - 1200px) / 2 + 24px)) 24px' }}>
        {items.map((t) => (
          <div key={t.slug} style={{ scrollSnapAlign: 'start' }}>
            <a href={`/trucks/${t.slug}/`} className="truck-card" style={{ flex: '0 0 calc((100% - 48px) / 3)', minWidth: 280, display: 'block',
                                                        textDecoration: 'none', color: 'inherit', border: `1px solid ${T.border}`, borderRadius: 12, overflow: 'hidden', background: T.white, transition: 'transform .18s, box-shadow .18s' }}>
              <div style={{ height: 150, background: T.skyTint, display: 'flex', alignItems: 'center', justifyContent: 'center', borderBottom: `1px solid ${T.border}` }}>
                <img src={t.logo} alt={`${t.name} logo`} loading="lazy" style={{ maxHeight: 96, maxWidth: '72%', width: 'auto', objectFit: 'contain' }} />
              </div>
              <div style={{ padding: 18 }}>
                <div style={{ fontWeight: 700, fontSize: 17, color: T.ink, marginBottom: 2 }}>{t.name}</div>
                <div style={{ fontSize: 13, color: T.inkSoft, marginBottom: 12 }}>{t.cuisine}</div>
                <div style={{ display: 'flex', gap: 6, marginBottom: 14, flexWrap: 'wrap' }}>
                  {(t.cuisines.length ? t.cuisines : [t.cuisine]).filter(Boolean).slice(0,2).map(tag => <span key={tag} className="chip">{tag}</span>)}
                </div>
                <span className="btn-link" style={{ fontSize: 14, color: T.ink, fontWeight: 600 }}>View truck <span className="arrow">→</span></span>
              </div>
            </a>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 24px', marginTop: 8 }}>
        <a className="btn-link" href="/trucks/" style={{ fontSize: 15 }}>See all 35+ trucks <span className="arrow">→</span></a>
      </div>
      <style>{`
        .hide-scrollbar::-webkit-scrollbar { display:none; }
        .hide-scrollbar { scrollbar-width: none; }
        .truck-card:hover { transform: translateY(-4px); box-shadow: ${T.shadowRaised}; }
      `}</style>
    </section>
  );
};
const lgCtrlBtn = { width: 40, height: 40, borderRadius: 999, border: `1px solid ${T.border}`, background: T.white, color: T.ink, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' };

/* ===== H — Case study (placeholder — Tony to supply real event) ===== */
// HIDDEN 2026-09-30 — no real content yet. To restore, delete the null line and drop the _PENDING suffix.
const LargeCaseStudy = () => null;
const LargeCaseStudy_PENDING = () => (
  <section style={{ padding: 'clamp(64px,8vw,96px) 24px', background: T.bgAlt }}>
    <div style={{ maxWidth: 1100, margin: '0 auto' }}>
      <div className="grid-2 cs-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 0, border: `1px solid ${T.border}`, borderRadius: 16, overflow: 'hidden', background: T.white }}>
        <PhotoPlaceholder src={PHOTOS.largeEventLineup} caption="A multi-truck lineup serving a large corporate campus event in New Jersey" tone="navy" ratio="4/3" style={{ borderRadius: 0, height: '100%' }} />
        <div style={{ padding: 'clamp(28px,4vw,48px)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Large event · case study</div>
          <h3 style={{ fontSize: 'clamp(22px,2.4vw,28px)', fontWeight: 600, color: T.navy, margin: '0 0 14px', lineHeight: 1.2 }}>
            [Event name] — [festival / grand opening / activation]
          </h3>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: T.inkSoft, margin: '0 0 16px' }}>
            [N] trucks, [crowd size] guests, [duration]. One coordinator ran the whole lineup.
          </p>
          <div style={{ fontSize: 13, color: T.warning || '#B45309', background: '#FFF7ED', border: '1px solid #FED7AA', borderRadius: 8, padding: '8px 12px', marginBottom: 18 }}>
            Placeholder — awaiting a real approved large event + numbers from Tony.
          </div>
          <span className="btn-link" style={{ fontSize: 15, fontWeight: 600, alignSelf: 'flex-start' }}>Read the case study <span className="arrow">→</span></span>
        </div>
      </div>
    </div>
  </section>
);

/* ===== I — FAQ ===== */
const LG_FAQS = [
  { q: 'How many trucks can you bring to one event?', a: 'From a handful to a dozen-plus. We field as many as your crowd and footprint need, all under one contract.' },
  { q: "What's the difference between catering and vending at my event?", a: "If you're paying for the food, that's catering — we curate and run it for you. If you want trucks to sell directly to your attendees (a public festival or town event), submit your event and we'll share it with our truck network; interested trucks respond to you. We connect you with the trucks rather than staffing the event ourselves." },
  { q: 'Do you handle permits and insurance for large gatherings?', a: 'Yes — COIs, municipal permits, health-department, and large-event paperwork across the whole lineup. (This applies to private managed events; public-event organizers handle their own permitting.)' },
  { q: 'How do you keep lines down with a big crowd?', a: 'We stagger trucks and menus and plan throughput so service moves at peak. Self-powered trucks let us place them for flow, not for power access.' },
  { q: 'What if a truck cancels or has a problem day-of?', a: 'We have the bench to swap in a replacement — a benefit of booking a managed lineup instead of individual trucks.' },
  { q: 'Do the trucks need power or hookups on site?', a: 'No — fully self-powered with their own water. No generator village, no hookups to arrange.' },
  { q: 'How far in advance should we book a large event?', a: 'The bigger the event, the earlier — popular summer/fall dates and town festivals book months out. Reach out as soon as you have a date.' },
  { q: 'Can you accommodate a range of dietary needs across a big crowd?', a: 'Yes — a multi-truck lineup naturally covers vegan, gluten-free, halal, and kosher. We build the mix to your audience.' },
];
const LargeFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: 'clamp(64px,8vw,96px) 24px', background: T.white }}>
      <div style={{ maxWidth: 860, margin: '0 auto' }}>
        <h2 style={{ margin: '0 0 32px' }}>Large-event &amp; festival catering FAQs</h2>
        <div style={{ borderTop: `1px solid ${T.border}` }}>
          {LG_FAQS.map((item, i) => (
            <div key={i} style={{ borderBottom: `1px solid ${T.border}` }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i} style={{ width: '100%', background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '22px 4px', textAlign: 'left', font: 'inherit' }}>
                <h3 style={{ fontSize: 18, fontWeight: 600, color: T.navy, margin: 0, lineHeight: 1.35 }}>{item.q}</h3>
                <span style={{ flex: '0 0 auto', width: 30, height: 30, borderRadius: 999, border: `1px solid ${T.border}`, color: T.teal, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', transform: open === i ? 'rotate(45deg)' : 'none', transition: 'transform .18s' }}><IconPlus size={16} /></span>
              </button>
              <div style={{ maxHeight: open === i ? 320 : 0, overflow: 'hidden', transition: 'max-height .24s cubic-bezier(0.22,1,0.36,1)' }}>
                <p style={{ fontSize: 16, lineHeight: 1.6, color: T.inkSoft, margin: '0 4px 24px', maxWidth: 760 }}>{item.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ===== J — Adjacent occasions ===== */
const LG_SIBLINGS = [
  { label: 'Corporate', pitch: 'Office lunches, appreciation days, holiday parties, product launches.', href: 'corporate.html', tone: 'teal', photo: PHOTOS.cardCorporate, caption: 'Photo · truck at a corporate office park' },
  { label: 'Campus & schools', pitch: 'Move-in days, club fairs, alumni weekends, faculty appreciation.', href: 'campus.html', tone: 'sky', photo: PHOTOS.cardCampus, caption: 'Photo · students at a campus food truck' },
  { label: 'Weddings & private events', pitch: 'Receptions, cocktail hours, late-night snacks, backyard parties.', href: 'weddings.html', tone: 'navy', photo: PHOTOS.cardWedding, caption: 'Photo · late-night truck at a wedding venue' },
];
const LargeAdjacent = () => (
  <section style={{ padding: 'clamp(64px,8vw,96px) 24px', background: T.bgAlt }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <h2 style={{ margin: '0 0 36px' }}>Other events we cater</h2>
      <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {LG_SIBLINGS.map((s, i) => (
          <a key={i} href={s.href} className="card card-hoverable" style={{ textDecoration: 'none', color: 'inherit', border: `1px solid ${T.border}`, display: 'block', background: T.white }}>
            <PhotoPlaceholder src={s.photo} caption={s.caption} tone={s.tone} ratio="4/3" style={{ marginBottom: 18 }} />
            <h3 style={{ fontSize: 20, margin: '0 0 8px', fontWeight: 600, color: T.navy }}>{s.label}</h3>
            <p style={{ fontSize: 15, color: T.inkSoft, lineHeight: 1.55, margin: '0 0 16px' }}>{s.pitch}</p>
            <span className="btn-link" style={{ fontSize: 14, color: T.ink, fontWeight: 600 }}>Explore {s.label.split(' ')[0].toLowerCase()} <span className="arrow">→</span></span>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ===== K — Closing CTA (dual) ===== */
const LargeClosingCTA = ({ onQuote, onPublic }) => (
  <section style={{ padding: 'clamp(80px,10vw,128px) 24px', background: T.navy, color: T.white }}>
    <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
      <h2 style={{ color: T.white, fontSize: 'clamp(36px,5vw,56px)', lineHeight: 1.05, letterSpacing: '-0.025em', fontWeight: 700, margin: '0 0 20px' }}>
        Big event? Let's build the lineup.
      </h2>
      <p style={{ color: 'rgba(255,255,255,.85)', fontSize: 'clamp(17px,1.4vw,21px)', lineHeight: 1.55, margin: '0 auto 36px', maxWidth: 640 }}>
        One contract, one coordinator, as many trucks as it takes. Tell us your date, location, and crowd size.
      </p>
      <div style={{ display: 'inline-flex', gap: 16, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
        <button onClick={onQuote} className="btn" style={{ background: T.teal, color: T.white, fontSize: 17, padding: '16px 28px', fontWeight: 700 }}>Get a Quote</button>
        <button onClick={onPublic} className="btn" style={{ background: 'transparent', color: T.white, border: '1px solid rgba(255,255,255,.5)', fontSize: 16, padding: '15px 24px', fontWeight: 600 }}>Submit your public event</button>
        <a href="tel:+12012082682" style={{ color: 'rgba(255,255,255,.85)', border: 'none', display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 16, fontWeight: 500 }}><IconPhone size={16} /> (201) 208-2682</a>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  LargeHero, EventSplit, LargeOccasionStrip, LargeValueProps, LargeWhatWeHandle,
  LargePricing, LargeFleet, LargeCaseStudy, LargeFAQ, LargeAdjacent, LargeClosingCTA,
});