// Remaining sections: trust row, editorial, tours, logos, reviews, badges, CTA, footer, modal

const PlaneMark = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M21.5 3 L2.5 11.2 L9.5 13.5 L11.8 21 L21.5 3 Z" fill="#fff" />
    <path d="M9.5 13.5 L14.2 9.4 L11.8 21 L9.5 13.5 Z" fill="#FF6B35" />
  </svg>
);

const TrustRow = () => {
  const cards = [
    { num: "01", kicker: "Tailor-made", title: "Personalized service",
      body: "Itineraries designed by local experts who've walked every trail. No cookie-cutter packages, no third-party middlemen." },
    { num: "02", kicker: "Fully covered", title: "Peace of mind",
      body: "Vetted hotels, seasoned drivers, 24/7 on-trip support on WhatsApp. We register every booking with PATO — you're covered." },
    { num: "03", kicker: "4.9 / 5 stars", title: "2,000+ verified reviews",
      body: "Consistently 5-star across Google, Facebook, and TripAdvisor. The reason most of our trips are booked by word of mouth." },
  ];
  return (
    <section>
      <div className="container">
        <SectionHead eyebrow="Why travel with us" title="Boutique travel, engineered end-to-end" sub="We own every detail from the airport pickup in Lahore to the last sunset at your final stop — so you can actually be on vacation." />
        <div className="trust-grid">
          {cards.map((c, i) => (
            <Reveal as="div" key={c.num} {...{ className: 'trust-card' }} delay={i * 100}>
              <div className="trust-stamp">
                <span className="trust-num">{c.num}<span className="trust-num-tot"> / 03</span></span>
                <span className="trust-line" />
                <span className="trust-ic"><PlaneMark size={22} /></span>
              </div>
              <div className="trust-kicker">— {c.kicker} —</div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

const International = () => (
  <section id="world">
    <div className="container">
      <SectionHead eyebrow="International destinations" title="Explore the world with us" sub="Handcrafted international circuits to the destinations you've actually dreamed of — with visa support included." />
      <div className="dest-grid">
        {INTL_DEST.map((d) => <DestCard key={d.title} {...d} />)}
      </div>
    </div>
  </section>
);

const Domestic = () => (
  <section id="pakistan">
    <div className="container">
      <SectionHead eyebrow="Pakistan · Domestic tours" title="Discover the magic of Pakistan" sub="From the peaks of the Karakoram to the valleys of Kashmir — routes we've walked a hundred times." />
      <div className="dest-grid">
        {PAK_DEST.map((d) => <DestCard key={d.title} {...d} />)}
      </div>
    </div>
  </section>
);

const Editorial = () => (
  <section className="section-alt">
    <div className="container editorial">
      <Reveal as="div" {...{ className: 'editorial-img' }}>
        <SmartImg src={IMG.editorial} alt="Group travelling" label="Group travel" className="img" absolute />
        <div className="stamp">
          <div><div className="k">4.9★</div><span className="l">Google reviews</span></div>
          <div style={{ width: 1, height: 36, background: 'var(--border)' }} />
          <div><div className="k">800+</div><span className="l">Five-star trips</span></div>
        </div>
      </Reveal>
      <Reveal as="div" {...{ className: 'editorial-copy' }} delay={120}>
        <div className="uppercase-label">— Group travel, done right —</div>
        <h2>Just pack, and go.<br/>Leave the rest to us.</h2>
        <p>Our Premium Group Tours run on fixed dates through the year — capped at 18 travellers, led by a senior guide, routed through the best mountain kitchens and lakefront lodges we've met in a decade of trips.</p>
        <ul className="highlights">
          <li><IconCheck size={18} stroke={2} /> 18-traveller cap · real conversations, real friendships</li>
          <li><IconCheck size={18} stroke={2} /> Fixed departures from Lahore · Islamabad · Karachi</li>
          <li><IconCheck size={18} stroke={2} /> Senior guide + dedicated 4x4 + breakfast & dinner daily</li>
          <li><IconCheck size={18} stroke={2} /> Flexible payment plans · 20% on booking, rest split</li>
        </ul>
        <div className="cta-row">
          <button
            className="btn btn-dark"
            onClick={() => openWhatsAppForIntent({
              action: "browse premium group tours",
              source: "Editorial CTA",
              destination: "Group tours",
            })}
          >
            Browse group tours <IconArrowRight size={14} />
          </button>
          <button
            className="btn btn-outline"
            onClick={() => openWhatsAppForIntent({
              action: "get fixed departure dates",
              source: "Editorial CTA",
              destination: "Fixed departures",
            })}
          >
            View fixed departures
          </button>
        </div>
      </Reveal>
    </div>
  </section>
);

const FeaturedTours = () => {
  const openTourIntent = (tour) => {
    openWhatsAppForIntent({
      action: "request this tour package",
      source: "Featured tours",
      packageName: tour.title,
      destination: tour.title,
      duration: tour.dur,
      price: formatPKR(tour.price),
    });
  };

  return (
    <section id="tours">
      <div className="container">
        <SectionHead eyebrow="Featured packages" title="Tours just for you" sub="Eight itineraries we're running this season — mix of domestic and international, group and private." />
        <div className="tours-grid">
          {TOURS.map((t, i) => (
            <Reveal as="article" key={t.title} {...{ className: 'tour-card' }} delay={(i%4)*80}>
            <div className="img">
              <SmartImg src={t.img} alt={t.title} label={t.title} absolute />
              <span className="dur">{t.dur}</span>
              <button className="fav" aria-label="Save"><IconHeart size={15} /></button>
            </div>
            <div className="body">
              <div className="rating"><Stars n={Math.round(t.rating)} size={12} /><span>{t.rating.toFixed(1)} · {t.reviews} reviews</span></div>
              <h4>{t.title}</h4>
              <div className="tags">
                {t.tags.map((tag) => <span key={tag} className="tag">{tag}</span>)}
              </div>
              <div className="foot">
                <div>
                  <span className="lbl">From / person</span>
                  <div className="price">{formatPKR(t.price)}</div>
                </div>
                <button className="arrow" aria-label="View" onClick={() => openTourIntent(t)}><IconArrowRight size={15} /></button>
              </div>
            </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

const ClientLogos = () => (
  <section className="section-alt" style={{ padding: '72px 0' }}>
    <div className="container">
      <SectionHead eyebrow="Our clients" title="Trusted by Pakistan's leading brands" sub="Corporate retreats, incentive trips, and off-sites for teams that don't settle." />
    </div>
    <div className="logo-marquee">
      <div className="logo-track">
        {[...CLIENT_LOGOS, ...CLIENT_LOGOS].map((l, i) => (
          <span key={i} className={`client-logo ${l.kind}`}>{l.name}</span>
        ))}
      </div>
    </div>
  </section>
);

const Reviews = () => (
  <section>
    <div className="container">
      <SectionHead eyebrow="Traveller stories" title="What our travellers say" sub="4.9/5 from 800+ verified reviews on Google." />
      <div className="reviews-grid">
        {REVIEWS.slice(0, 6).map((r, i) => (
          <Reveal as="article" key={r.n} {...{ className: 'review-card' }} delay={(i%3)*100}>
            <div className="g-badge"><IconGoogle size={16} /></div>
            <Stars n={r.r} />
            <div className="body">{r.t}</div>
            <div className="who">
              <div className="ava">{r.n.split(' ').map(w=>w[0]).slice(0,2).join('')}</div>
              <div>
                <div className="n">{r.n}</div>
                <div className="d">{r.d} · Google</div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
      <div style={{ textAlign: 'center', marginTop: 36 }}>
        <a className="btn btn-outline" href="#">Read all reviews on Google <IconArrowRight size={14} /></a>
      </div>
    </div>
  </section>
);

const TrustBadges = () => (
  <section className="section-alt">
    <div className="container">
      <SectionHead eyebrow="Registered & Certified" title="We are registered & certified" sub="Departures.pk is a Government of Pakistan registered travel agency, earning the trust of thousands across the globe." />
      <div className="badges-row">
        {BADGES.map((b) => (
          <Reveal as="div" key={b.t} {...{ className: 'badge-seal' }}>
            <div className="crest">{b.crest}</div>
            <div className="t">{b.t}</div>
            <div className="s">{b.s}</div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

const CtaBand = ({ onPlan }) => (
  <section className="cta-band">
    <div className="bg" style={{ backgroundImage: `url(${IMG.cta})` }} aria-hidden="true" />
    <div className="container inner">
      <Reveal>
        <div className="uppercase-label" style={{ color: '#FFC7AA', letterSpacing: '0.24em', marginBottom: 14 }}>— Your next departure —</div>
        <h2>Let us design your trip of a lifetime.</h2>
        <p>Boutique travel for your group, honeymoon, or private trip — designed just for you by our local experts in Lahore.</p>
        <div className="cta-row">
          <button className="btn btn-primary btn-lg" onClick={onPlan}>Plan my trip <IconArrowRight size={16} /></button>
          <button
            className="btn btn-whatsapp btn-lg"
            onClick={() => openWhatsAppForIntent({
              action: "chat about trip options",
              source: "Bottom CTA band",
              destination: "Custom trip",
            })}
          >
            <IconWhatsapp size={16} /> WhatsApp us
          </button>
        </div>
      </Reveal>
    </div>
  </section>
);

const Footer = () => (
  <footer id="contact">
    <div className="container">
      <div className="footer-grid">
        <div>
          <div className="about-logo">
            <span style={{ width: 38, height: 38, borderRadius: 10, background: 'var(--brand-orange)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', transform: 'rotate(-6deg)', boxShadow: '0 4px 10px -2px rgba(255,107,53,0.4)' }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M21.5 3 L2.5 11.2 L9.5 13.5 L11.8 21 L21.5 3 Z" fill="#fff" />
                <path d="M9.5 13.5 L14.2 9.4 L11.8 21 L9.5 13.5 Z" fill="#15305C" fillOpacity="0.6" />
              </svg>
            </span>
            Departures<span style={{ color: 'var(--brand-orange)' }}>.</span>pk
          </div>
          <p className="about-copy">Lahore's Trusted Travel Agency</p>
          <div className="social-row">
            <a href="https://facebook.com/departurespk" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><IconFacebook size={15} /></a>
            <a href="https://instagram.com/departurespk" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><IconInstagram size={15} /></a>
            <a href="https://youtube.com/@departurespk" target="_blank" rel="noopener noreferrer" aria-label="YouTube"><IconYoutube size={15} /></a>
            <a href="https://linkedin.com/company/departurespk" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><IconLinkedin size={15} /></a>
          </div>
        </div>
        <div>
          <h5>Quick Links</h5>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About Us</a></li>
            <li><a href="/cheap-flights-from-lahore">Flights</a></li>
            <li><a href="/visit-visa-services-lahore">Visa Services</a></li>
            <li><a href="/umrah-packages-from-lahore">Umrah Packages</a></li>
            <li><a href="/international-tour-packages-from-lahore">Tour Packages</a></li>
            <li><a href="/travel-insurance">Travel Insurance</a></li>
            <li><a href="/hotel-bookings">Hotel Bookings</a></li>
            <li><a href="/blog">Blog</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        </div>
        <div>
          <h5>Popular Destinations</h5>
          <ul>
            <li><a href="/dubai-family-tour-package-from-lahore">Dubai, UAE</a></li>
            <li><a href="/umrah-packages-from-lahore">Saudi Arabia (Umrah/Hajj)</a></li>
            <li><a href="/turkey-istanbul-cappadocia-package">Turkey</a></li>
            <li><a href="/thailand-honeymoon-package-from-pakistan">Thailand</a></li>
            <li><a href="/malaysia-family-tour-package-from-pakistan">Malaysia</a></li>
            <li><a href="/maldives-honeymoon-package-from-pakistan">Maldives</a></li>
            <li><a href="/uk-visit-visa-from-pakistan">UK</a></li>
            <li><a href="/canada-visit-visa-from-pakistan">Canada</a></li>
            <li><a href="/azerbaijan-tour-package-from-pakistan">Azerbaijan</a></li>
            <li><a href="/georgia-tour-package-from-pakistan">Georgia</a></li>
          </ul>
        </div>
        <div>
          <h5>Contact</h5>
          <div className="footer-contact-item"><IconPhone size={15} /><span>042-32591479<br/><span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: '#7A88A3', letterSpacing: '0.08em' }}>MON – SAT · 10:00-20:00</span></span></div>
          <div className="footer-contact-item"><IconPhone size={15} /><span>WhatsApp: +92-309-4951551</span></div>
          <div className="footer-contact-item"><IconMail size={15} /><a href="mailto:info@departures.pk">info@departures.pk</a></div>
          <div className="footer-contact-item"><IconMap size={15} /><span>42-A Main Blvd, Block A<br/>Phase 1 Johar Town, Lahore 54000</span></div>
          <h5 style={{ marginTop: 22 }}>Popular Visas</h5>
          <ul>
            <li><a href="/dubai-visit-visa-from-pakistan">Dubai Visit Visa</a></li>
            <li><a href="/uk-visit-visa-from-pakistan">UK Visit Visa</a></li>
            <li><a href="/schengen-visa-from-pakistan">Schengen Visa</a></li>
            <li><a href="/canada-visit-visa-from-pakistan">Canada Visit Visa</a></li>
            <li><a href="/us-b1-b2-visa-from-pakistan">US B1/B2 Visa</a></li>
            <li><a href="/turkey-tourist-visa-from-pakistan-evisa">Turkey eVisa</a></li>
            <li><a href="/azerbaijan-tourist-visa-from-pakistan">Azerbaijan eVisa</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-certs">
        <span>IATA-Recognised</span>
        <span>DTS Punjab Registered</span>
        <span>Government-Approved Travel Agency</span>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Departures.pk. All rights reserved.</span>
        <span>
          <a href="/privacy-policy">Privacy Policy</a>
          <a href="/terms-and-conditions">Terms &amp; Conditions</a>
          <a href="/refund-policy">Refund Policy</a>
        </span>
      </div>
    </div>
  </footer>
);

// Quote modal
const QuoteModal = ({ open, onClose, form, result, onSubmit }) => {
  const [data, setData] = React.useState({ name: '', phone: '', email: '', message: '' });
  const [errors, setErrors] = React.useState({});
  if (!open) return null;
  const dest = DEST_OPTS.find((d) => d.value === form?.destination);
  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!data.name.trim()) errs.name = 'Please enter your name';
    if (!data.phone.trim() || data.phone.replace(/\D/g,'').length < 10) errs.phone = 'Valid phone required';
    if (!data.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) errs.email = 'Valid email required';
    setErrors(errs);
    if (Object.keys(errs).length) return;
    onSubmit(data);
  };
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div className="uppercase-label">— Custom quote request —</div>
            <h3>Let's talk about your trip</h3>
            <div className="sub">We'll reply on WhatsApp within 2 business hours.</div>
          </div>
          <button className="modal-close" onClick={onClose} aria-label="Close"><IconX size={18} /></button>
        </div>
        <form className="modal-body" onSubmit={submit}>
          {form && (
            <div className="modal-summary">
              <div className="it"><div className="k">Destination</div><div className="v">{dest?.label || '—'}</div></div>
              <div className="it"><div className="k">Duration</div><div className="v">{form.days} days · {form.travellers} pax</div></div>
              <div className="it"><div className="k">Style</div><div className="v" style={{ textTransform: 'capitalize' }}>{form.tripStyle} · {form.hotelTier}★</div></div>
              <div className="it"><div className="k">Estimate</div><div className="v">{result ? formatPKR(result.total) : '—'}</div></div>
            </div>
          )}
          <div className="modal-field">
            <input placeholder="Your full name" value={data.name} onChange={(e) => setData({...data, name: e.target.value})} />
            {errors.name && <div className="modal-err">{errors.name}</div>}
          </div>
          <div className="modal-field">
            <input placeholder="Phone (e.g. +92 300 1234567)" value={data.phone} onChange={(e) => setData({...data, phone: e.target.value})} />
            {errors.phone && <div className="modal-err">{errors.phone}</div>}
          </div>
          <div className="modal-field">
            <input placeholder="Email address" value={data.email} onChange={(e) => setData({...data, email: e.target.value})} />
            {errors.email && <div className="modal-err">{errors.email}</div>}
          </div>
          <div className="modal-field">
            <textarea placeholder="Anything else? (preferred dates, dietary needs, group size…)" value={data.message} onChange={(e) => setData({...data, message: e.target.value})} />
          </div>
          <button type="submit" className="btn btn-primary" style={{ width: '100%' }}>Send quote request <IconArrowRight size={14} /></button>
        </form>
      </div>
    </div>
  );
};

Object.assign(window, { TrustRow, International, Domestic, Editorial, FeaturedTours, ClientLogos, Reviews, TrustBadges, CtaBand, Footer, QuoteModal });