// ============================================================
// JET LUXE — UI components
// ============================================================

const { useState, useEffect, useRef, useMemo, Fragment } = React;

// helper to render text-with-italic-fragments: array of strings or {i: ...} objects
function RichText({ parts }) {
  if (!Array.isArray(parts)) return <Fragment>{parts}</Fragment>;
  return (
    <Fragment>
      {parts.map((p, i) => {
        if (typeof p === 'string') return <Fragment key={i}>{p}</Fragment>;
        if (p && p.i) return <em key={i}>{p.i}</em>;
        return null;
      })}
    </Fragment>
  );
}

// ============================================================
// NAV
// ============================================================
function Nav({ t, locale, setLocale, onQuote }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { k: 'services', href: '#services' },
    { k: 'fleet', href: '#fleet' },
    { k: 'invictus', href: '#invictus' },
    { k: 'flightcare', href: '#flightcare' },
    { k: 'about', href: '#about' },
    { k: 'contact', href: '#contact' }
  ];

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`} style={{
      color: scrolled ? 'var(--text)' : 'var(--paper)'
    }}>
      <div className="container nav-row">
        <a href="#top" className="nav-brand" aria-label="Jet Luxe home">
          <span className="nav-mark">J</span>
          <span className="nav-name">Jet Luxe</span>
        </a>
        <ul className="nav-links">
          {links.map(l => (
            <li key={l.k}><a href={l.href}>{t.nav[l.k]}</a></li>
          ))}
        </ul>
        <div className="nav-actions">
          <div className="lang-toggle">
            <button
              className={locale === 'en' ? 'active' : ''}
              onClick={() => setLocale('en')}
              aria-pressed={locale === 'en'}
            >EN</button>
            <span className="sep">·</span>
            <button
              className={locale === 'ar' ? 'active' : ''}
              onClick={() => setLocale('ar')}
              aria-pressed={locale === 'ar'}
            >AR</button>
          </div>
          <button className="btn btn-small btn-ghost" onClick={onQuote} style={
            !scrolled ? { color: 'var(--paper)', borderColor: 'rgba(255,255,255,0.45)' } : null
          }>
            {t.nav.cta} <span className="arr"></span>
          </button>
          <button className="nav-burger" aria-label="Menu">
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
    </nav>
  );
}

// ============================================================
// HERO
// ============================================================
function Hero({ t, onQuote, hero }) {
  return (
    <section id="top" className="hero" data-hero={hero}>
      <div className="hero-bg">
        <img src="media/jet-dusk.webp" alt="" />
      </div>
      <div className="container hero-inner">
        <div className="hero-eyebrow-row">
          <span className="hairline"></span>
          <span className="eyebrow on-dark">{t.hero.eyebrow}</span>
        </div>
        <h1 className="display hero-title">
          <RichText parts={t.hero.title} />
        </h1>
        <p className="hero-sub">{t.hero.sub}</p>
        <div className="hero-ctas">
          <button className="btn btn-light" onClick={onQuote}>
            {t.hero.cta1} <span className="arr"></span>
          </button>
          <a href="#invictus" className="btn btn-outline-light">
            {t.hero.cta2} <span className="arr"></span>
          </a>
        </div>
      </div>
      <div className="hero-meta">
        {t.hero.meta[0]}
        <span className="num-mono">{t.hero.meta[1]}</span>
      </div>
      <div className="hero-scroll">
        <span className="dot"></span>
        {t.hero.scroll}
      </div>
    </section>
  );
}

// ============================================================
// TRUST STRIP + MARQUEE
// ============================================================
function TrustStrip({ t }) {
  return (
    <section className="trust">
      <div className="container trust-row">
        {t.trust.map((item, i) => (
          <Fragment key={i}>
            <div className="trust-item">
              <span className="num">{item.num}</span>
              <span>{item.label}</span>
            </div>
            {i < t.trust.length - 1 && <span className="trust-divider"></span>}
          </Fragment>
        ))}
      </div>
    </section>
  );
}

function Marquee({ locale }) {
  const items = locale === 'ar'
    ? ['وسيط ARGUS معتمد', 'معايير Forbes Travel Guide', 'مرخّصة في خمس ولايات قضائية', 'بقيادة المؤسس · منذ ٢٠٢٠', 'مكاتب في ست مدن']
    : ['ARGUS Certified Broker', 'Forbes Travel Guide service standards', 'Licensed across five jurisdictions', 'Founder-led · since 2020', 'Six cities · one team'];
  // duplicate for seamless scroll
  const doubled = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {doubled.map((it, i) => (
          <span className="marquee-item" key={i}>
            {it}<span className="sep">◆</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// SERVICES
// ============================================================
function Services({ t, onQuote }) {
  return (
    <section id="services" className="section">
      <div className="container">
        <div className="section-header">
          <div>
            <div className="eyebrow">{t.services.eyebrow}</div>
            <h2 className="display section-title">
              <RichText parts={t.services.title} />
            </h2>
          </div>
          <p className="section-lead">{t.services.lead}</p>
        </div>
        <div className="services-grid">
          {t.services.items.map((it, i) => (
            <div className="service-card" key={i} onClick={onQuote}>
              <span className="idx">— {it.idx}</span>
              <div className="glyph">{it.glyph}</div>
              <h3>{it.name}</h3>
              <p>{it.desc}</p>
              <span className="cta">
                <span className="arr-line"></span>
                {t.locale === 'ar' ? 'استفسر' : 'Enquire'}
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FLEET
// ============================================================
function Fleet({ t, onQuote }) {
  const [cat, setCat] = useState(t.fleet.categories[0]);
  const cards = useMemo(() => {
    if (cat === t.fleet.categories[0]) return t.fleet.cards;
    return t.fleet.cards.filter(c => c.cat === cat);
  }, [cat, t]);

  return (
    <section id="fleet" className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <div className="section-header">
          <div>
            <div className="eyebrow">{t.fleet.eyebrow}</div>
            <h2 className="display section-title">
              <RichText parts={t.fleet.title} />
            </h2>
          </div>
          <p className="section-lead">{t.fleet.lead}</p>
        </div>

        {/* feature */}
        <div className="fleet-feature">
          <div className="fleet-feature-img">
            <img src="media/g6000-a.webp" alt="" />
          </div>
          <div className="fleet-feature-body">
            <div>
              <span className="tag">{t.fleet.feature.tag}</span>
              <h3><RichText parts={t.fleet.feature.name} /></h3>
              <p className="body-md">{t.fleet.feature.desc}</p>
              <div className="fleet-specs">
                {t.fleet.feature.specs.map((s, i) => (
                  <div key={i} className="spec-item">
                    <div className="lbl">{s.lbl}</div>
                    <div className="val">{s.val}{s.unit && <small>{s.unit}</small>}</div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ marginTop: 32 }}>
              <button className="btn btn-primary" onClick={onQuote}>
                {t.fleet.feature.cta} <span className="arr"></span>
              </button>
            </div>
          </div>
        </div>

        {/* category filter */}
        <div className="fleet-filter">
          {t.fleet.categories.map(c => (
            <button key={c} className={c === cat ? 'active' : ''} onClick={() => setCat(c)}>
              {c}
            </button>
          ))}
        </div>

        {/* grid */}
        <div className="fleet-grid">
          {cards.map((c, i) => (
            <div className="fleet-card" key={c.name + i} onClick={onQuote}>
              <div className="fleet-card-img">
                <img src={c.img} alt="" />
              </div>
              <div className="fleet-card-body">
                <span className="cat">{c.cat}</span>
                <h4>{c.name}</h4>
                <div className="meta">
                  <span>{c.pax}</span><span>·</span><span>{c.range}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// INVICTUS
// ============================================================
function Invictus({ t, onQuote }) {
  const [tier, setTier] = useState('invictus');
  const tierData = t.invictus.tiers[tier];

  return (
    <section id="invictus" className="invictus">
      <div className="container-wide container">
        <div className="invictus-grid">
          <div className="invictus-media">
            <div className="badge">Membership · 2026</div>
            <img src="media/invictus-still.webp" alt="" />
          </div>
          <div className="invictus-body">
            <div className="eyebrow">{t.invictus.eyebrow}</div>
            <h2 className="invictus-title">
              <RichText parts={t.invictus.title} />
            </h2>
            <p className="invictus-lead">{t.invictus.lead}</p>

            <div className="tier-toggle" role="tablist">
              {Object.entries(t.invictus.tiers).map(([id, td]) => (
                <button
                  key={id}
                  className={tier === id ? 'active' : ''}
                  onClick={() => setTier(id)}
                  role="tab"
                  aria-selected={tier === id}
                >{td.label}</button>
              ))}
            </div>

            <div className="tier-detail">
              {tierData.rows.map((r, i) => (
                <div className="tier-row" key={i}>
                  <span className="k">{r.k}</span>
                  <span className="v"><RichText parts={r.v} /></span>
                </div>
              ))}
            </div>

            <div className="invictus-actions">
              <button className="btn btn-light" onClick={onQuote}>
                {t.invictus.cta1} <span className="arr"></span>
              </button>
              <a href="#contact" className="btn btn-outline-light">
                {t.invictus.cta2} <span className="arr"></span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FLIGHT CARE
// ============================================================
function FlightCare({ t }) {
  return (
    <section id="flightcare" className="section" style={{ padding: 0 }}>
      <div className="split">
        <div className="split-img">
          <img src="media/crew.webp" alt="" />
        </div>
        <div className="split-body">
          <div className="eyebrow">{t.flightcare.eyebrow}</div>
          <h2 className="split-title">
            <RichText parts={t.flightcare.title} />
          </h2>
          {t.flightcare.paragraphs.map((p, i) => (
            <p key={i}>{p}</p>
          ))}
          <div className="signature-line">
            {t.flightcare.signature.map((s, i) => (
              <div className="item" key={i}>
                <div className="lbl">{s.lbl}</div>
                <div className="val">{s.val}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PRESENCE
// ============================================================
function Presence({ t }) {
  return (
    <section id="presence" className="presence">
      <div className="container">
        <div className="section-header" style={{ marginBottom: 56 }}>
          <div>
            <div className="eyebrow on-dark">{t.presence.eyebrow}</div>
            <h2 className="display section-title">
              <RichText parts={t.presence.title} />
            </h2>
          </div>
          <p className="section-lead" style={{ color: 'rgba(255,255,255,0.7)' }}>
            {t.presence.lead}
          </p>
        </div>
        <div className="presence-grid">
          {t.presence.cities.map((c, i) => (
            <div className="presence-city" key={i}>
              <div className="num">{c.num}</div>
              <div className={`city ${c.hq ? 'hq' : ''}`}>{c.city}</div>
              <div className="meta">{c.meta}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// ABOUT
// ============================================================
function About({ t }) {
  return (
    <section id="about" className="section" style={{ padding: 0 }}>
      <div className="split">
        <div className="split-body" style={{ order: 1 }}>
          <div className="eyebrow">{t.about.eyebrow}</div>
          <h2 className="split-title">
            <RichText parts={t.about.title} />
          </h2>
          {t.about.paragraphs.map((p, i) => (
            <p key={i}>{p}</p>
          ))}
          <div className="signature-line">
            {t.about.signature.map((s, i) => (
              <div className="item" key={i}>
                <div className="lbl">{s.lbl}</div>
                <div className="val">{s.val}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="split-img" style={{ order: 2 }}>
          <img src="media/cabin-detail.webp" alt="" />
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CONTACT
// ============================================================
function Contact({ t, onQuote }) {
  return (
    <section id="contact" className="section">
      <div className="container">
        <div className="section-header">
          <div>
            <div className="eyebrow">{t.contact.eyebrow}</div>
            <h2 className="display section-title">
              <RichText parts={t.contact.title} />
            </h2>
          </div>
          <p className="section-lead">{t.contact.lead}</p>
        </div>
        <div className="contact-row">
          <div className="contact-channels">
            {t.contact.channels.map((c, i) => (
              <div className="channel" key={i}>
                <div className="glyph">{c.glyph}</div>
                <div className="body">
                  <div className="lbl">{c.lbl}</div>
                  <div className="val">{c.val}</div>
                  <div className="note">{c.note}</div>
                </div>
                {i === 0 ? (
                  <a className="btn btn-small btn-ghost"
                     href="https://wa.me/+17724448268?text=Hi%20Jet%20Luxe%2C%20I%27d%20like%20to%20enquire%20about..."
                     target="_blank" rel="noopener">
                    {t.locale === 'ar' ? 'فتح' : 'Open'} <span className="arr"></span>
                  </a>
                ) : (
                  <button className="btn btn-small btn-ghost" onClick={onQuote}>
                    {t.locale === 'ar' ? 'استفسر' : 'Enquire'} <span className="arr"></span>
                  </button>
                )}
              </div>
            ))}
          </div>
          <div>
            <div style={{
              border: '1px solid var(--border)',
              padding: '40px 36px',
              background: 'var(--surface)'
            }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>
                {t.locale === 'ar' ? 'ابدأ بالاستفسار' : 'Begin an enquiry'}
              </div>
              <h3 className="display" style={{
                fontSize: 32, fontWeight: 300, margin: '0 0 16px', lineHeight: 1.1
              }}>
                {t.locale === 'ar' ? (<><em>أربع</em> دقائق. خبير واحد.</>) : (<>Four <em>minutes.</em> One concierge.</>)}
              </h3>
              <p className="body-md" style={{ marginBottom: 28 }}>
                {t.locale === 'ar'
                  ? 'املأ نموذجاً قصيراً. سيتولّى خبير مخصّص أمرك من هناك — باللغة التي تختارها، عبر القناة التي تفضّلها.'
                  : 'Fill in a brief form. A named concierge takes it from there — in the language you choose, on the channel you prefer.'}
              </p>
              <button className="btn btn-primary" onClick={onQuote}>
                {t.nav.cta} <span className="arr"></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="nav-brand">
              <span className="nav-mark" style={{ color: 'var(--paper)' }}>J</span>
              <span className="nav-name">Jet Luxe</span>
            </div>
            <p>{t.footer.tag}</p>
          </div>
          {t.footer.cols.map((col, i) => (
            <div key={i} className="footer-col">
              <h5>{col.h}</h5>
              <ul>
                {col.items.map((it, j) => (
                  <li key={j}><a href="#">{it}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <div>{t.footer.legal}</div>
          <div>{t.footer.socials}</div>
        </div>
      </div>
    </footer>
  );
}

// ============================================================
// WHATSAPP FAB
// ============================================================
function WhatsAppFab() {
  return (
    <a className="fab" href="https://wa.me/+17724448268?text=Hi%20Jet%20Luxe" target="_blank" rel="noopener" aria-label="WhatsApp">
      <svg viewBox="0 0 24 24"><path d="M20.52 3.48A11.83 11.83 0 0 0 12.06 0C5.47 0 .12 5.34.12 11.93c0 2.1.55 4.15 1.6 5.96L0 24l6.27-1.64a11.9 11.9 0 0 0 5.79 1.48h.01c6.59 0 11.94-5.34 11.94-11.93 0-3.19-1.24-6.19-3.49-8.44ZM12.07 21.8h-.01a9.9 9.9 0 0 1-5.03-1.38l-.36-.21-3.73.98 1-3.63-.24-.37a9.9 9.9 0 0 1-1.52-5.26c0-5.47 4.45-9.92 9.93-9.92 2.65 0 5.14 1.03 7.01 2.91a9.84 9.84 0 0 1 2.9 7.02c-.01 5.48-4.46 9.86-9.95 9.86Zm5.45-7.42c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.34.22-.64.07-.3-.15-1.27-.47-2.42-1.49-.89-.79-1.5-1.78-1.67-2.08-.17-.3-.02-.46.13-.61.13-.13.3-.34.45-.51.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51-.17-.01-.37-.01-.57-.01a1.1 1.1 0 0 0-.79.37c-.27.3-1.04 1.02-1.04 2.48s1.06 2.88 1.21 3.07c.15.2 2.09 3.19 5.06 4.47.71.31 1.26.49 1.69.63.71.22 1.35.19 1.86.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35Z"/></svg>
    </a>
  );
}

Object.assign(window, {
  RichText, Nav, Hero, TrustStrip, Marquee,
  Services, Fleet, Invictus, FlightCare,
  Presence, About, Contact, Footer, WhatsAppFab
});