// RentalSections.jsx — Event Rentals & Entertainment hub (add-on offerings).
// Reuses the validated hub patterns from Large/Corporate/Campus. Single booking
// model: these are ENHANCEMENTS layered onto a food truck booking → Get a Quote.

/* ===== A — Hero ===== */
const RentalsHero = ({ onQuote }) => (
  <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 }}>Event rentals &amp; entertainment · 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 }}>
          More than food trucks. We build the whole event.
        </h1>
        <p style={{ fontSize: 'clamp(17px,1.4vw,21px)', lineHeight: 1.55, color: T.ink, margin: '0 0 28px', maxWidth: 600 }}>
          Add tents, tables &amp; chairs, play trucks, a golf simulator, VR &amp; gaming trucks, and lawn games to your food truck event — all delivered, set up, and run by one team, on one contract.
        </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>
          <a href="#offerings" className="btn btn-secondary" style={{ padding: '15px 22px', fontSize: 16 }}>
            See what we add <span style={{ marginLeft: 4 }}>→</span>
          </a>
        </div>
        <p style={{ marginTop: 24, fontSize: 14, color: T.inkSoft, lineHeight: 1.55, maxWidth: 560 }}>
          Rentals &amp; entertainment are booked as add-ons to a food truck event — one coordinator handles the food and the fun together.
        </p>
      </div>
      <div>
        <PhotoPlaceholder src={PHOTOS.rentalsHero} caption="A corporate event on the lawn — tents, seating, and a crowd enjoying food and drinks." ratio="5/4" tone="teal" />
      </div>
    </div>
  </section>
);

/* ===== B — Offerings grid ===== */
// Ordered so the three photo cards fill the top row of the 3-column grid and the
// three icon-only cards sit on the row below — keeps the imagery on one line.
const RENTAL_OFFERINGS = [
  { Icon: IconTrophy, title: 'Golf simulator',
    photo: PHOTOS.rentalGolfSim, alt: 'Mobile golf simulator trailer set up on a corporate campus',
    body: 'A full-swing golf simulator on site — perfect for corporate outings, member events, and anyone wanting a round between bites.' },
  { Icon: IconBolt, title: 'VR games',
    photo: PHOTOS.rentalVR, alt: 'Mobile VR and gaming trailer parked at an outdoor corporate event',
    body: 'Immersive virtual-reality stations that draw a crowd at activations, parties, and big corporate days.' },
  { Icon: IconRocket, title: 'Gaming trucks',
    photo: PHOTOS.rentalGaming, alt: 'Video game truck with outdoor screens, guests playing at an event',
    body: 'Climate-controlled gaming trucks loaded with consoles and big screens — tournaments and free-play for all ages.' },
  { Icon: IconShield, title: 'Tents, tables & chairs',
    body: 'Shade, seating, and structure for any footprint — frame tents, high-tops, banquet tables, and folding chairs, delivered and set up.' },
  { Icon: IconTruck, title: 'Play trucks',
    body: 'Mobile play centers that pull up and turn family days and community events into a kids’ wonderland.' },
  { Icon: IconStar, title: 'Lawn & party games',
    body: 'Cornhole, giant Jenga, connect-four, ladder toss, and more set up around your event for easy, all-ages fun.' },
];
const RentalsOfferings = ({ onQuote }) => (
  <section id="offerings" style={{ padding: 'clamp(64px,8vw,96px) 24px', background: T.bgAlt, borderTop: `1px solid ${T.border}` }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ marginBottom: 40, maxWidth: 720 }}>
        <div className="eyebrow" style={{ marginBottom: 8 }}>What we add</div>
        <h2 style={{ margin: '0 0 12px' }}>Everything that makes an event more than lunch</h2>
        <p style={{ fontSize: 16, color: T.inkSoft, lineHeight: 1.6, margin: 0 }}>
          Pick what fits your crowd and space. We handle delivery, setup, and breakdown for all of it.
        </p>
      </div>
      <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {RENTAL_OFFERINGS.map((o, i) => {
          const Ico = o.Icon;
          return (
            <div key={i} className="card" style={{ border: `1px solid ${T.border}`, display: 'flex', flexDirection: 'column', gap: 14, background: T.white }}>
              {o.photo ? (
                <PhotoPlaceholder src={o.photo} caption={o.alt} ratio="16/10" tone="teal" />
              ) : (
                <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' }}>{o.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: T.inkSoft, margin: 0 }}>{o.body}</p>
            </div>
          );
        })}
      </div>
      <div style={{ marginTop: 36, display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
        <button type="button" onClick={onQuote} className="btn btn-primary" style={{ padding: '14px 22px', fontSize: 16 }}>Get a Quote</button>
        <span style={{ fontSize: 14, color: T.inkSoft }}>Tell us what you want to add — we’ll build one plan around your food trucks.</span>
      </div>
    </div>
  </section>
);

/* ===== C — Add-on explainer / how it works ===== */
const RENTAL_STEPS = [
  { n: '1', title: 'Start with your food trucks', body: 'Get a quote for your food truck catering — corporate day, large event, party, or campus.' },
  { n: '2', title: 'Tell us what to add', body: 'Pick the tents, games, and attractions that fit your crowd and space. We’ll advise on the right mix.' },
  { n: '3', title: 'One plan, one invoice', body: 'We roll the food and the extras into a single coordinated plan — one contract, one number.' },
  { n: '4', title: 'We set it all up', body: 'Delivery, setup, and breakdown handled day-of, so your team never touches a tent pole.' },
];
const RentalsHowItWorks = () => (
  <section style={{ padding: 'clamp(64px,8vw,96px) 24px', background: T.white }}>
    <div style={{ maxWidth: 1100, margin: '0 auto' }}>
      <div style={{ marginBottom: 40, maxWidth: 720 }}>
        <div className="eyebrow" style={{ marginBottom: 8 }}>How it works</div>
        <h2 style={{ margin: '0 0 12px' }}>Added on, never bolted on</h2>
        <p style={{ fontSize: 16, color: T.inkSoft, lineHeight: 1.6, margin: 0 }}>
          Rentals and entertainment are designed to layer onto a food truck booking — so it all arrives, runs, and gets billed as one event.
        </p>
      </div>
      <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {RENTAL_STEPS.map((s, i) => (
          <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', background: T.bgAlt, border: `1px solid ${T.border}`, borderRadius: 12, padding: '22px 24px' }}>
            <span style={{ flex: '0 0 auto', width: 40, height: 40, borderRadius: 999, background: T.navy, color: T.white,
                           display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 17 }} className="numeral">{s.n}</span>
            <div>
              <h3 style={{ fontSize: 18, fontWeight: 600, color: T.navy, margin: '4px 0 6px' }}>{s.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: T.inkSoft, margin: 0 }}>{s.body}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ===== D — Value props ===== */
const RENTAL_PROPS = [
  { Icon: IconUser, title: 'One contract for everything',
    body: 'Add tents, games, and entertainment to your food truck event without juggling extra vendors — it all rolls into a single FTOTM booking.' },
  { Icon: IconTruck, title: 'Delivered, set up, broken down',
    body: 'We deliver, set up, and tear down every rental and attraction. Your team shows up and enjoys the event.' },
  { Icon: IconUsers, title: 'Sized to your event',
    body: 'We match the mix to your crowd, space, and vibe — from a backyard party to a thousand-person corporate day.' },
];
const RentalsValueProps = () => (
  <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 }}>Why add it through FTOTM</h2>
      <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {RENTAL_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 — FAQ ===== */
const RENTAL_FAQS = [
  { q: 'Can I book rentals or games on their own?', a: 'These are designed as add-ons to a food truck event, so the simplest way to book is alongside your trucks. If you have a date and a wish list, tell us — we’ll put together one plan.' },
  { q: 'What kinds of events are these for?', a: 'Corporate days and activations, large events and grand openings, campus and school events, family days, and private parties. We size the mix to the crowd.' },
  { q: 'Do you deliver and set everything up?', a: 'Yes — delivery, setup, and breakdown are handled by our team for every rental and attraction. Your staff never has to touch a tent or a console.' },
  { q: 'How much do rentals and entertainment cost?', a: 'It depends on the items, quantities, event size, and location, so we quote it custom. Request a quote and we’ll fold it into one number with your food trucks.' },
  { q: 'How far in advance should I book?', a: 'As early as you can. Specialty items like the golf simulator, VR, and gaming trucks are limited and book out fast, especially in summer and fall.' },
  { q: 'Can you do indoor and outdoor events?', a: 'Yes — many of these work indoors or outdoors. Tell us your venue and we’ll plan placement and logistics to fit the space.' },
];
const RentalsFAQ = () => {
  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' }}>Event rentals &amp; entertainment FAQs</h2>
        <div style={{ borderTop: `1px solid ${T.border}` }}>
          {RENTAL_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>
  );
};

/* ===== F — Adjacent occasions ===== */
const RENTAL_SIBLINGS = [
  { label: 'Corporate', pitch: 'Appreciation days, holiday parties, product launches, team builders.', href: 'corporate.html', tone: 'teal', photo: PHOTOS.cardCorporate, caption: 'Photo · truck at a corporate office park' },
  { label: 'Large events', pitch: 'Festivals, grand openings, big activations, multi-truck lineups.', href: 'large-events.html', tone: 'navy', photo: PHOTOS.cardLargeEvent, caption: 'Photo · multi-truck lineup at a large NJ event' },
  { label: 'Private parties', pitch: 'Birthdays, graduations, backyard parties, milestone celebrations.', href: 'private-party.html', tone: 'sky', photo: PHOTOS.cardPrivateParty, caption: 'Photo · food truck at a backyard private party' },
];
const RentalsAdjacent = () => (
  <section style={{ padding: 'clamp(64px,8vw,96px) 24px', background: T.bgAlt }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <h2 style={{ margin: '0 0 36px' }}>Events we add this to</h2>
      <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {RENTAL_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>
);

/* ===== G — Closing CTA ===== */
const RentalsClosingCTA = ({ onQuote }) => (
  <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' }}>
        Make it more than lunch.
      </h2>
      <p style={{ color: 'rgba(255,255,255,.85)', fontSize: 'clamp(17px,1.4vw,21px)', lineHeight: 1.55, margin: '0 auto 36px', maxWidth: 640 }}>
        Tell us your date, location, and crowd size — and what you’d love to add. We’ll build the food and the fun into one plan.
      </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>
        <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, {
  RentalsHero, RentalsOfferings, RentalsHowItWorks, RentalsValueProps,
  RentalsFAQ, RentalsAdjacent, RentalsClosingCTA,
});