/* Sections — testimonials, OTA, features, FAQ, footer */
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

function Testimonials() {
  const items = [
    { name: 'Avenue Motel', loc: 'Ludington, USA', stars: 5, ota: 'Capterra', quote: '"Incredible value. Web-based, simple, and reports our accountant actually uses. Support is always there."', img: window.__resources.t_ludington },
    { name: 'Home Away Inn', loc: 'Drayton Valley, CA', stars: 5, ota: 'Hotelmize', quote: '"We compared every PMS on the market. Roomsy won on intuition and value — and we never looked back."', img: window.__resources.t_homeaway },
    { name: 'Siriwan Guesthouse', loc: 'Chiang Mai, TH', stars: 5, ota: 'Capterra', quote: '"Setup took an afternoon. Twelve rooms across three OTAs, all in one calendar. There is more here than I expected."', img: window.__resources.t_siriwan },
    { name: 'Johnny’s Motel', loc: 'Grand Forks, CA', stars: 5, ota: 'TripAdvisor', quote: '"Three months in and I’m amazed at the pace of development. The team is focused on operators, not feature checklists."', img: window.__resources.t_johnnys },
    { name: 'Carta Apartments', loc: 'Palo Alto, USA', stars: 5, ota: 'G2', quote: '"Streamlined our corporate apt program end to end. Clean interface, instant support, weekly improvements. Phenomenal."', img: window.__resources.t_carta },
    { name: 'Raya Boutique Hotel', loc: 'Koh Samui, TH', stars: 5, ota: 'Capterra', quote: '"Four years and counting. Reliable, quiet, gets out of the way. I run two other properties on it now."', img: window.__resources.t_raya },
  ];
  const [idx, setIdx] = useStateS(0);
  const max = Math.max(0, items.length - 4);
  const railRef = useRefS(null);

  return (
    <section className="testimonials" id="testimonials">
      <div className="container">
        <div className="head">
          <div>
            <span className="h-eyebrow">02 — Operators</span>
            <h2 className="h-section">Trusted by hoteliers<br/>around the world.</h2>
          </div>
          <div className="testimonial-controls">
            <button className="tc-btn" disabled={idx === 0} onClick={() => setIdx(Math.max(0, idx - 1))} aria-label="Previous">
              <Icon name="arrowL" size={18} />
            </button>
            <button className="tc-btn" disabled={idx === max} onClick={() => setIdx(Math.min(max, idx + 1))} aria-label="Next">
              <Icon name="arrowR" size={18} />
            </button>
          </div>
        </div>
        <div className="t-rail" ref={railRef}>
          <div style={{ display: 'flex', gap: 18, transition: 'transform .5s cubic-bezier(.2,.8,.2,1)', transform: `translateX(calc(-${idx} * (((100% - 54px) / 4) + 18px)))`, width: '100%' }}>
            {items.map((t, i) => (
              <article key={i} className="t-card">
                <div className="t-photo"><img src={t.img} alt={t.loc} /></div>
                <div className="t-body">
                  <p className="quote">{t.quote}</p>
                  <div className="who">
                    <div className="who-text">
                      <div className="name">{t.name}</div>
                      <div className="place">{t.loc}</div>
                    </div>
                    <div className="who-stars"><Stars n={t.stars} size={12} /></div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function BuiltFor() {
  const tiles = [
    { img: window.__resources.bf_hotels, label: 'Hotels & Motels', count: '01 / 06' },
    { img: window.__resources.bf_guesthouse, label: 'Guesthouses & B&Bs', count: '02 / 06' },
    { img: window.__resources.bf_apartments, label: 'Apartments & Condos', count: '03 / 06' },
    { img: window.__resources.bf_campground, label: 'Campgrounds & RV Parks', count: '04 / 06' },
    { img: window.__resources.bf_retreats, label: 'Retreats & Resorts', count: '05 / 06' },
    { img: window.__resources.bf_residences, label: 'Staff & Student Residences', count: '06 / 06' },
  ];
  return (
    <section className="section" id="built-for">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="h-eyebrow">03 — Built for</span>
            <h2 className="h-section">Run any property,<br/><em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>at any size.</em></h2>
          </div>
          <p>From a single B&B with three keys to a 240-room resort with channel managers and group blocks — Roomsy adapts to how you actually operate, not the other way around.</p>
        </div>
        <div className="builtfor">
          {tiles.map((t, i) => (
            <a key={i} className="tile" href="/contact/">
              <div className="tile-img" style={{ backgroundImage: `url(${t.img})` }} />
              <div className="tile-shade" />
              <div className="count">{t.count}</div>
              <div className="arrow"><Icon name="arrow" size={14} /></div>
              <div className="label">{t.label}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Features() {
  const feats = [
    { num: '01', ttl: 'Clean booking calendar', desc: 'Drag, drop, split-stay, group blocks. The drag handles you wish you had.' },
    { num: '02', ttl: 'Room & rate management', desc: 'Seasonal pricing, derived rates, length-of-stay rules — without spreadsheets.' },
    { num: '03', ttl: 'Customizable invoices', desc: 'Your branding, your tax rules, your folio. PDF or print, no third-party.' },
    { num: '04', ttl: 'Online booking engine', desc: 'A direct booking widget that converts. Zero commission, your domain.' },
    { num: '05', ttl: 'Robust reports', desc: 'Occupancy, ADR, RevPAR, source mix. Export to CSV your accountant will love.' },
    { num: '06', ttl: 'Employee accounts', desc: 'Granular permissions and an audit log of every change. Trust, but verify.' },
    { num: '07', ttl: 'Housekeeping board', desc: 'Live room status across floors. Phones in pockets, not at the front desk.' },
    { num: '08', ttl: 'Secure payments', desc: 'PCI-tokenized cards, pre-auth holds, refund flows. Stripe and PayPal built in.' },
  ];
  return (
    <section className="features-section" id="features">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 64 }}>
          <div>
            <span className="h-eyebrow">04 — The toolkit</span>
            <h2 className="h-section">Necessary features.<br/>Nothing you won’t use.</h2>
          </div>
          <p>Most PMS software is bloated with modules nobody touches. We ship the eight things you need every morning at 8 AM — and we ship them well.</p>
        </div>
        <div className="features-grid">
          {feats.map((f, i) => (
            <div key={i} className="feature">
              <span className="num">{f.num}</span>
              <span className="ico">
                <Icon name={['calendar','bed','inbox','sparkle','chart','users','check','cog'][i]} size={22} />
              </span>
              <h3 className="ttl">{f.ttl}</h3>
              <p className="desc">{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function OtaStrip() {
  const logos = [
    { name: 'Booking.com', src: window.__resources.ota_booking },
    { name: 'Expedia',     src: window.__resources.ota_expedia },
    { name: 'Airbnb',      src: window.__resources.ota_airbnb },
    { name: 'Agoda',       src: window.__resources.ota_agoda },
    { name: 'Trip.com',    src: window.__resources.ota_trip },
    { name: 'Vrbo',        src: window.__resources.ota_vrbo },
    { name: 'Hostelworld', src: window.__resources.ota_hostelworld },
    { name: 'Hotels.com',  src: window.__resources.ota_hotels },
    { name: 'TripAdvisor', src: window.__resources.ota_tripadvisor },
  ];
  return (
    <section className="ota-strip" id="integrations">
      <div className="container">
        <div className="ota-grid">
          <div>
            <span className="h-eyebrow">05 — Channels</span>
            <h2 className="h-section">One calendar.<br/>Every channel in sync.</h2>
            <p>Two-way sync with the OTAs your guests are already on. Rate parity, instant inventory updates, and no more double-bookings at 11 PM on a Saturday.</p>
          </div>
          <div className="ota-logo-grid">
            {logos.map((l, i) => (
              <div key={i} className="ota-logo-cell">
                <img src={l.src} alt={l.name} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const faqs = [
    { q: 'How long does it take to get set up?', a: 'Most properties are live in under a day. Import your room types, paste your rates, connect a channel — and you’re selling. Larger inventories (50+ rooms) we’ll onboard with you, free.' },
    { q: 'How do channels stay in sync?', a: 'Two-way XML/API connections push rates and inventory the moment they change, and pull bookings back the second they’re made. Most updates land in under 30 seconds.' },
    { q: 'Can I move a guest between rooms after check-in?', a: 'Yes — open the reservation, pick the new room, save. The folio, housekeeping board, and key card system update automatically. No re-keying anything.' },
    { q: 'How do group bookings work?', a: 'Create a group, add a block, and assign or release rooms as guests confirm. Each reservation can carry its own folio, or roll up to a master account for billing.' },
    { q: 'Do you support multiple properties?', a: 'One account, unlimited properties. Switch with a click in the top-right. Reports can be run per-property or consolidated across the whole portfolio.' },
    { q: 'What happens to my data if I leave?', a: 'You can export everything — bookings, guests, rates, folios — as CSV and PDF, any time. No lock-in, no exit fee, no awkward conversations.' },
  ];
  const [open, setOpen] = useStateS(0);
  return (
    <section className="faq-section" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div>
            <span className="h-eyebrow">06 — Common questions</span>
            <h2 className="h-section">Frequently<br/>asked.</h2>
            <p className="faq-intro">Can’t find what you need? Our team is here to help.</p>
            <div style={{ marginTop: 22 }}>
              <a href="/contact/" className="btn btn-outline">Talk to a human <Icon name="arrow" size={14} /></a>
            </div>
          </div>
          <div className="faq-list">
            {faqs.map((f, i) => (
              <div key={i} className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="faq-q">
                  <span>{f.q}</span>
                  <span className="plus">+</span>
                </div>
                <div className="faq-a">
                  <div className="faq-a-inner">{f.a}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CtaBanner() {
  return (
    <section className="cta-banner">
      <div className="cta-grid">
        <div>
          <span className="h-eyebrow" style={{ color: 'rgba(255,255,255,.7)' }}>Try Roomsy</span>
          <h2 style={{ marginTop: 14 }}>Fourteen days.<br/><em>Full access. No catch.</em></h2>
          <p className="sub">Spin up your property, connect your channels, take a real booking. If we’re not the right fit, walk away — we’ll even export your data for you.</p>
        </div>
        <div className="cta-actions">
          <a href="https://secure.roomsy.com/signup" className="btn btn-primary" style={{ padding: '16px 24px', fontSize: 15 }}>
            Start a free trial <Icon name="arrow" size={16} />
          </a>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 6 }}>
            <div className="cta-trial"><span className="check"><Icon name="check" size={9} /></span> 14 days, full access</div>
            <div className="cta-trial"><span className="check"><Icon name="check" size={9} /></span> 0% commission, ever</div>
            <div className="cta-trial"><span className="check"><Icon name="check" size={9} /></span> Cancel any time, in one click</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="brand" aria-label="Roomsy"><img src="images/toggle-logo.png" alt="Roomsy" height="32" style={{ height: 32, width: 'auto', display: 'block' }} /></div>
            <p className="footer-tag">Booking management software for independent hospitality.</p>
          </div>
          <div className="footer-col">
            <div className="footer-col-title">Product</div>
            <ul>
              <li><a href="/pricing/">Pricing</a></li>
              <li><a href="#features">Features</a></li>
              <li><a href="#integrations">Channel manager</a></li>
              <li><a href="#features">Booking engine</a></li>
              <li><a href="#features">Reports</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <div className="footer-col-title">Solutions</div>
            <ul>
              <li><a href="#built-for">Hotels</a></li>
              <li><a href="#built-for">Hostels</a></li>
              <li><a href="#built-for">Motels</a></li>
              <li><a href="#built-for">Guesthouses</a></li>
              <li><a href="#built-for">Apartments</a></li>
              <li><a href="#built-for">Campgrounds</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <div className="footer-col-title">Company</div>
            <ul>
              <li><a href="#testimonials">Customers</a></li>
              <li><a href="/contact/">Contact</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <div className="footer-col-title">Stay updated</div>
            <p style={{ fontSize: 13, color: 'var(--ink-3)', margin: 0, lineHeight: 1.55 }}>Operator news, four times a year. No spam, unsubscribe in one click.</p>
            <form className="newsletter-form" onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder="you@property.com" />
              <button type="submit">Subscribe</button>
            </form>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2011–2026 Roomsy Inc. — Coquitlam BC, Canada · Singapore</span>
        </div>
      </div>
    </footer>
  );
}

window.Testimonials = Testimonials;
window.BuiltFor = BuiltFor;
window.Features = Features;
window.OtaStrip = OtaStrip;
window.FAQ = FAQ;
window.CtaBanner = CtaBanner;
window.Footer = Footer;