/* global React, Photo, Reveal, Icon */
const { useState: useStateRent } = React;

function PageRentals({ go, toast }) {
  const [form, setForm] = useStateRent({
    name: '', email: '', phone: '', date: '', type: '', guests: '', location: '', message: ''
  });
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.date) { toast('Please fill in name, email, and date.'); return; }
    toast(`Inquiry received. We'll reply to ${form.email} within 24 hours.`);
    setForm({ name: '', email: '', phone: '', date: '', type: '', guests: '', location: '', message: '' });
  };

  return (
    <div className="page-enter">
      {/* Hero */}
      <section style={{ position: 'relative', minHeight: '82vh', display: 'flex', alignItems: 'center', paddingTop: 'var(--nav-h)' }}>
        <div style={{ position: 'absolute', inset: 0 }}>
          <Photo dark src="assets/rentals-hero.png" alt="8tee simulator at an outdoor pop-up event" objectPosition="center 40%" style={{ width: '100%', height: '100%' }} tag={false} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,26,26,0.5), rgba(31,54,32,0.65))' }} />
        </div>
        <div className="container" style={{ position: 'relative', color: 'var(--cream)', paddingTop: 80, paddingBottom: 80 }}>
          <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 28 }}>Simulator Rentals</div>
          <h1 className="h-hero" style={{ color: 'var(--cream)', maxWidth: '16ch', marginBottom: 24 }}>
            Bring the game <em className="serif-italic" style={{ color: 'var(--camel)' }}>to you.</em>
          </h1>
          <p className="lead" style={{ maxWidth: '50ch', color: 'rgba(245,240,232,0.88)', marginBottom: 40 }}>
            Professional golf simulator setup at your event. Corporate, private, or anything in between.
          </p>
          <a href="#inquiry" className="btn btn-camel">Submit an Inquiry <Icon.arrow /></a>
        </div>
      </section>

      {/* How it works */}
      <section className="bg-off-white sec-pad">
        <div className="container">
          <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 16 }}>How it works</div>
          <h2 className="h-large" style={{ marginBottom: 80, maxWidth: '18ch' }}>Three steps. <em className="serif-italic">One memorable night.</em></h2>
          <div className="steps">
            {[
              ['01', 'Tell us about your event', 'Date, location, vibe, guest count. We handle the rest.'],
              ['02', 'We set up, you play', 'Full installation, on-site staff, and golf equipment are provided.'],
              ['03', 'Everyone leaves a golfer', 'First-timers to pros — every guest takes a swing.'],
            ].map(([n, t, b], i) => (
              <Reveal key={i} delay={i * 80}>
                <div className="step">
                  <div className="num-big">{n}</div>
                  <h4>{t}</h4>
                  <p>{b}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Event types */}
      <section className="bg-cream sec-pad">
        <div className="container">
          <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 16 }}>Where we show up</div>
          <h2 className="h-large" style={{ marginBottom: 56, maxWidth: '16ch' }}>Every kind of <em className="serif-italic">gathering.</em></h2>
          <div className="tile-grid">
            {[
              ['Corporate Events', 'Offsites, client dinners, team nights.', 'assets/rentals-corporate.png', 'Corporate rooftop event with 8tee simulator'],
              ['Birthday Parties', 'Milestone moments, built around play.', 'assets/rentals-birthday.png', 'Birthday party with 8tee simulator and string lights'],
              ['Brand Activations', 'Launches, pop-ups, press events.', 'assets/rentals-brand.png', '8tee simulator pop-up brand activation'],
              ['Private Parties', 'Holidays, anniversaries, just because.', 'assets/rentals-family.png', '8tee simulator at family backyard gathering'],
            ].map(([t, d, src, alt], i) => (
              <Reveal key={i} delay={i * 60}>
                <div className="tile">
                  <Photo src={src} alt={alt} objectPosition="center" />
                  <h4>{t}</h4>
                  <p>{d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Inquiry form */}
      <section id="inquiry" className="bg-forest sec-pad">
        <div className="container">
          <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 16, textAlign: 'center' }}>Inquiry</div>
          <h2 className="h-large" style={{ color: 'var(--cream)', textAlign: 'center', marginBottom: 16 }}>
            Ready to <em className="serif-italic" style={{ color: 'var(--camel)' }}>book?</em>
          </h2>
          <p className="lead" style={{ textAlign: 'center', color: 'rgba(245,240,232,0.82)', margin: '0 auto 64px' }}>
            Tell us a little about your event — we'll come back with a proposal within 24 hours.
          </p>

          <div className="inquiry-layout" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
            {/* Pricing column */}
            <div style={{ color: 'var(--cream)', borderTop: '1px solid var(--camel)', paddingTop: 32 }}>
              <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 20 }}>Starting at</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 8 }}>
                <span className="serif" style={{ fontSize: 64, lineHeight: 1, color: '#D94A3D' }}>$800</span>
                <span className="serif" style={{ fontSize: 32, lineHeight: 1, color: 'rgba(245,240,232,0.55)', textDecoration: 'line-through' }}>$1000</span>
              </div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'rgba(245,240,232,0.7)', textTransform: 'uppercase', marginBottom: 32 }}>
                4-hour rental
              </div>
              <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 16 }}>Includes</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
                {[
                  '12×12×10 golf simulator tent',
                  'Golf club equipment',
                  'Staff on-site to manage equipment',
                  'Setup and breakdown',
                ].map((item, i) => (
                  <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.4, color: 'rgba(245,240,232,0.92)' }}>
                    <span style={{ color: 'var(--camel)', flexShrink: 0, marginTop: 4 }}>
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/></svg>
                    </span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'rgba(245,240,232,0.55)', textTransform: 'uppercase', marginTop: 32, lineHeight: 1.8 }}>
                Additional hours + travel quoted per event.
              </div>
            </div>

            {/* Form column */}
            <form onSubmit={submit} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, color: 'var(--cream)' }}>
              <div className="field"><label>Full Name</label><input value={form.name} onChange={upd('name')} placeholder="Your name" /></div>
              <div className="field"><label>Email</label><input type="email" value={form.email} onChange={upd('email')} placeholder="you@email.com" /></div>
              <div className="field"><label>Phone</label><input value={form.phone} onChange={upd('phone')} placeholder="(555) 000-0000" /></div>
              <div className="field"><label>Event Date</label><input type="date" value={form.date} onChange={upd('date')} /></div>
              <div className="field">
                <label>Event Type</label>
                <select value={form.type} onChange={upd('type')}>
                  <option value="">Select a type</option>
                  <option>Corporate Event</option>
                  <option>Birthday Party</option>
                  <option>Brand Activation</option>
                  <option>Private Party</option>
                  <option>Other</option>
                </select>
              </div>
              <div className="field"><label>Estimated Guest Count</label><input value={form.guests} onChange={upd('guests')} placeholder="e.g. 40" /></div>
              <div className="field" style={{ gridColumn: '1 / -1' }}><label>Location</label><input value={form.location} onChange={upd('location')} placeholder="City or venue" /></div>
              <div className="field" style={{ gridColumn: '1 / -1' }}><label>Message</label><textarea value={form.message} onChange={upd('message')} placeholder="Tell us about the vibe..." /></div>
              <div style={{ gridColumn: '1 / -1', textAlign: 'center', marginTop: 16 }}>
                <button className="btn btn-camel" type="submit">Submit Inquiry <Icon.arrow /></button>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'rgba(245,240,232,0.6)', marginTop: 24, textTransform: 'uppercase' }}>
                  Now booking for June 2026 events and beyond.
                </div>
              </div>
            </form>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) {
            #inquiry .inquiry-layout { grid-template-columns: 1fr !important; gap: 48px !important; }
          }
          @media (max-width: 640px) { #inquiry form { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>
    </div>
  );
}

window.PageRentals = PageRentals;