/* eslint-disable */
/* Vivaah — Home page. Mounted into #app.
   Requires React + site.jsx loaded first. */

function Home() {
  return (
    <div className="page" data-screen-label="Home">
      <Nav active="home" variant="noir" scriptMark={(window.TWEAK_DEFAULTS||{}).scriptMark !== false} />
      <Hero />
      <NumbersBand />
      <FeaturedWeddings />
      <Destinations />
      <Services />
      <Approach />
      <FounderAbout />
      <Recognition />
      <PressStrip />
      <EnquireBand />
      <Footer />
      <WhatsAppFab />
    </div>
  );
}

/* ------------------------------------------------------------
   HERO
------------------------------------------------------------ */
function Hero() {
  return (
    <section
      className="hero"
      data-hero
      data-treatment={(window.TWEAK_DEFAULTS||{}).hero || 'cinematic'}
      data-screen-label="Hero"
    >
      <div className="hero-bg" style={{ backgroundImage: 'url(media/wedding-gallery-22.webp)' }} />
      <div className="hero-vignette" />
      <div className="hero-content container-wide fade-stagger">
        <span className="hero-eyebrow"><span className="dot" />Luxury Destination Weddings · Dubai</span>
        <h1>
          Turning <em>dreams</em><br/>
          into reality for<br/>
          <em>over eleven years.</em>
        </h1>
        <p className="lede">
          Bespoke destination wedding planning, design &amp; management — South-Asian and
          multicultural celebrations crafted across twenty-six countries, led from Dubai by
          founder Arun Bablani and our all-women team.
        </p>
        <div className="hero-cta">
          <a className="btn btn-accent" href="Contact.html">Enquire <span className="arr">→</span></a>
          <a className="btn btn-ghost" href="Contact.html#availability">Check date availability</a>
        </div>
      </div>
      <div className="hero-meta">
        Cinematic film &amp; stills — to be supplied by client (consent + photographer rights gated)
      </div>
      <div className="hero-scroll ltr-only">scroll</div>
    </section>
  );
}

/* ------------------------------------------------------------
   NUMBERS BAND
------------------------------------------------------------ */
function NumbersBand() {
  const stats = [
    { n: '11+',  l: 'Years',     src: 'Official site, attributed' },
    { n: '26+',  l: 'Countries', src: 'Official site, attributed' },
    { n: '200+', l: 'Couples',   src: 'Official site, attributed' },
    { n: '100',  l: 'Vendors per celebration, when needed', src: 'Per /what-we-do' },
  ];
  return (
    <section className="on-noir on-dark">
      <div className="stats">
        {stats.map((s, i) => (
          <div className="stat" key={i}>
            <div className="n">{s.n.includes('+') ? <><em>{s.n.replace('+','')}</em>+</> : <em>{s.n}</em>}</div>
            <div className="l">{s.l}</div>
            <div className="src">{s.src}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ------------------------------------------------------------
   FEATURED WEDDINGS (editorial layout)
------------------------------------------------------------ */
function FeaturedWeddings() {
  const feature = {
    title: <>A <em>Lakeside</em> Celebration</>,
    place: 'Lake Geneva · Switzerland',
    functions: 'Sangeet · Mehndi · Pheras · Reception',
    year: '—',
    img: 'media/wedding-gallery-04.webp',
    body:
      "Three days, four hundred guests, a private chalet on the lake. Decor read like spun-silk linen and old gold; the ceremony unfolded under a hand-strung jasmine canopy at sunset.",
    credit: 'Photography credit — to be added (consent + rights gated)',
  };
  const more = [
    { title: <>A <em>Desert</em> Celebration</>,   place: 'Ras Al Khaimah · UAE',  img: 'media/wedding-gallery-07.webp', fn: 'Haldi · Mehndi · Nikah' },
    { title: <>An <em>Old Town</em> Celebration</>, place: 'Mdina · Malta',         img: 'media/wedding-gallery-12.webp', fn: 'Sangeet · Reception' },
    { title: <>A <em>Riviera</em> Celebration</>,   place: 'Paris · France',        img: 'media/wedding-gallery-18.webp', fn: 'Pheras · Reception' },
  ];

  return (
    <section className="section" id="real-weddings" data-screen-label="Featured weddings">
      <div className="container-wide">
        <div className="section-head between">
          <div className="head-l">
            <span className="eyebrow"><span className="dot" />Real weddings</span>
            <h2>Stories, not stock.<br/><em>Real celebrations,</em> told properly.</h2>
            <span className="rule" />
            <p className="lede" style={{ fontStyle: 'normal', fontFamily: 'var(--body)', fontSize: 15, color: 'var(--muted)' }}>
              Each case study is published only with the couple’s written consent and the photographer’s credit.
            </p>
          </div>
          <a className="btn-link" href="Real Weddings.html">All real weddings →</a>
        </div>

        <div className="rw-grid">
          {/* Feature row: large frame + meta column */}
          <div className="rw-card" style={{ gridColumn: 'span 8' }}>
            <a href="A Lakeside Celebration.html">
              <div className="frame wide">
                <span className="label">Featured · Switzerland</span>
                <img src={feature.img} alt="A lakeside celebration in Switzerland — décor detail" />
              </div>
            </a>
          </div>
          <div style={{ gridColumn: 'span 4', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
            <div className="meta">{feature.place}</div>
            <h3 className="title" style={{ marginTop: 14, fontSize: 'clamp(28px, 2.6vw, 40px)' }}>
              <a href="A Lakeside Celebration.html">{feature.title}</a>
            </h3>
            <div className="meta" style={{ marginTop: 16 }}>{feature.functions}</div>
            <p className="body" style={{ marginTop: 18, color: 'var(--ink-2)' }}>{feature.body}</p>
            <p className="credit" style={{ marginTop: 18 }}>{feature.credit}</p>
            <div style={{ marginTop: 22 }}>
              <a className="btn-link" href="A Lakeside Celebration.html">Read the story →</a>
            </div>
          </div>

          {/* Three card row */}
          {more.map((m, i) => (
            <div key={i} className="rw-card" style={{ gridColumn: 'span 4' }}>
              <a href="A Lakeside Celebration.html">
                <div className="frame">
                  <span className="label">{m.place.split('·').pop().trim()}</span>
                  <img src={m.img} alt={`${m.place} — décor detail`} />
                </div>
                <div className="meta-row">
                  <div className="title">{m.title}</div>
                  <div className="meta">—</div>
                </div>
                <div className="desc">{m.place} · {m.fn}</div>
                <div className="credit">Photographer credit — pending consent</div>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------
   DESTINATIONS
------------------------------------------------------------ */
function Destinations() {
  const live = [
    { country: 'United Arab Emirates', region: 'Middle East', img: 'media/wedding-gallery-21.webp', num: '01' },
    { country: 'Switzerland',          region: 'Europe',      img: 'media/wedding-gallery-09.webp', num: '02' },
    { country: 'Paris',                region: 'France · Europe',img: 'media/wedding-gallery-18.webp', num: '03' },
    { country: 'Oman',                 region: 'Middle East', img: 'media/wedding-gallery-14.webp', num: '04' },
    { country: 'Malta',                region: 'Mediterranean', img: 'media/wedding-gallery-12.webp', num: '05' },
    { country: 'Azerbaijan',           region: 'Middle East · Caucasus', img: 'media/wedding-gallery-25.webp', num: '06' },
    { country: 'Bahrain',              region: 'Middle East', img: 'media/wedding-gallery-23.webp', num: '07' },
    { country: 'Georgia',              region: 'Caucasus',    img: 'media/wedding-gallery-16.webp', num: '08' },
  ];
  const further = ['Italy', 'Turkey', 'Barcelona', 'Greece', 'Montenegro', 'Spain', 'Portugal', 'Egypt', 'India', 'Sri Lanka', 'Thailand', 'Sabah', 'Philippines', 'Bali', 'Malaysia', 'Vietnam', 'Mauritius', 'Morocco', 'Maldives'];

  return (
    <section className="section on-paper2" id="destinations" data-screen-label="Destinations">
      <div className="container-wide">
        <div className="section-head between">
          <div className="head-l">
            <span className="eyebrow"><span className="dot" />Destinations</span>
            <h2>Eight hubs.<br/><em>Twenty-six countries</em> of practice.</h2>
            <span className="rule" />
          </div>
          <p className="body" style={{ maxWidth: 360 }}>
            Dedicated destination hubs for the countries we know most intimately. Beyond these, our planning
            extends across Europe, the Middle East and South-East Asia.
          </p>
        </div>

        <div className="dest-strip">
          {live.map((d, i) => (
            <a key={i} className="dest-tile" href="#real-weddings">
              <div className="bg" style={{ backgroundImage: `url(${d.img})` }} />
              <span className="num">{d.num}</span>
              <div className="body-d">
                <div className="region">{d.region}</div>
                <h3 className="country">{d.country}</h3>
              </div>
            </a>
          ))}
        </div>

        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24 }}>
          <div>
            <div className="meta" style={{ marginBottom: 12 }}>Also planned across</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 16px', maxWidth: 720 }}>
              {further.map((c, i) => (
                <span key={i} className="body" style={{ fontStyle: 'italic', fontFamily: 'var(--display)', color: 'var(--ink-2)', fontSize: 20 }}>
                  {c}{i < further.length - 1 ? <span style={{ opacity: 0.35, marginLeft: 16 }}>·</span> : null}
                </span>
              ))}
            </div>
          </div>
          <a className="btn-link" href="Contact.html">Plan in another country →</a>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------
   SERVICES (grouped)
------------------------------------------------------------ */
function Services() {
  const groups = [
    {
      num: 'I',
      title: 'Planning & Coordination',
      items: ['Destination Management', 'Venue Selection', 'Vendor Coordination', 'Travel & Logistics', 'VIP & Guest Management', 'A timeline sheet, just for you'],
    },
    {
      num: 'II',
      title: 'Design & Experience',
      items: ['Themes, Concepts & Decor', 'Light & Sound Production', 'Entertainment Solutions', 'Artist Management', 'Sangeet Show Direction', 'Live Streaming'],
    },
    {
      num: 'III',
      title: 'For the Couple',
      items: ['Bridal Care', 'Designer Invitations', 'Wedding Stationery', 'Wedsites — couple micro-sites', 'Menu Planning & Tasting', 'Photography — Video & Still'],
    },
    {
      num: 'IV',
      title: 'Celebrations',
      items: ['Sangeet · Mehndi · Haldi', 'Pheras / Nikah', 'Reception', 'Bachelor / Bachelorette parties', 'Guest Accommodation', 'Up to 100 vendors when needed'],
    },
  ];

  return (
    <section className="section" id="services" data-screen-label="Services">
      <div className="container-wide">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />What we do</span>
          <h2>Bespoke, tailored to each couple.<br/>
            <em>No packages. No prices.</em></h2>
          <span className="rule" />
          <p className="body-l" style={{ maxWidth: 640 }}>
            After listening to your vision, requirements and budget, we build a timeline sheet just for you —
            and connect you with vendors matched to your specifications.
          </p>
        </div>

        <div className="services-grid">
          {groups.map((g, i) => (
            <div key={i} className="svc">
              <div className="num">{g.num}</div>
              <h3>{g.title}</h3>
              <ul>
                {g.items.map((it, j) => <li key={j}>{it}</li>)}
              </ul>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 32 }}>
          <span className="placeholder-note">
            Tiered packages (Full / Partial / On-the-Day / Design-only) shown only if the client confirms. Default: bespoke quotation on enquiry.
          </span>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------
   APPROACH — quote band on noir
------------------------------------------------------------ */
function Approach() {
  return (
    <section className="section on-noir on-dark" data-screen-label="Approach">
      <div className="container">
        <span className="eyebrow"><span className="dot" />Our philosophy</span>
        <p className="h2" style={{ fontWeight: 300, fontStyle: 'italic', marginTop: 22, maxWidth: '24ch', lineHeight: 1.12 }}>
          “Creativity, precision, discretion, and world-class guest experiences.”
        </p>
        <div style={{ marginTop: 28, display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' }}>
          <span className="meta" style={{ color: 'rgba(255,255,255,0.55)' }}>— from /who-we-are, attributed</span>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------
   ABOUT — founder + team
------------------------------------------------------------ */
function FounderAbout() {
  return (
    <section className="section on-blush" id="about" data-screen-label="About">
      <div className="container-wide">
        <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'clamp(32px, 4vw, 80px)', alignItems: 'center' }} className="founder-grid">
          <div className="rw-card">
            <div className="frame tall" style={{ aspectRatio: '4 / 5' }}>
              <img src="media/founder-arun-bablani.webp" alt="Arun Bablani — Founder & Owner, Vivaah Weddings" />
            </div>
            <div className="meta-row">
              <div>
                <div className="title">Arun Bablani</div>
                <div className="desc">Founder &amp; Owner</div>
              </div>
              <div className="meta">25+ yrs<br/>Dubai events</div>
            </div>
            <div className="credit">Portrait — vivaahweddings.com /who-we-are</div>
          </div>
          <div>
            <span className="eyebrow"><span className="dot" />Who we are</span>
            <h2 style={{ marginTop: 18 }}>Led by Arun Bablani<br/>and an <em>all-women team</em>.</h2>
            <span className="rule" />
            <p className="lede" style={{ marginTop: 22 }}>
              We are a Dubai-based luxury destination wedding planning &amp; design company, specialising in
              South-Asian and multicultural celebrations. Our team brings passion, strength, detail and
              excellence to every wedding.
            </p>
            <p className="body" style={{ marginTop: 22 }}>
              We partner with <strong>VOW for Girls</strong> to help end child marriage, and with
              <strong> Evertreen</strong> on reforestation and sustainability — including what Vivaah
              describes as the UAE’s first fully sustainable wedding.
              <span className="placeholder-note" style={{ display: 'block', marginTop: 14 }}>
                Sustainability claim &amp; Global Ambassador title to be confirmed with client.
              </span>
            </p>
            <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a className="btn btn-primary" href="Contact.html#consultation">Book a consultation <span className="arr">→</span></a>
              <a className="btn btn-ghost" href="Contact.html">Meet the team</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------
   RECOGNITION — attributed trust strip
------------------------------------------------------------ */
function Recognition() {
  return (
    <section className="section" id="press" data-screen-label="Recognition">
      <div className="container-wide">
        <div className="section-head center">
          <span className="eyebrow"><span className="dot" />Recognition · attributed</span>
          <h2><em>Multi-award-winning,</em><br/>by name, by issuer, by year.</h2>
          <span className="rule" />
          <p className="body" style={{ maxWidth: 640, textAlign: 'center' }}>
            Awards listed only with the issuer and year. No fabricated ratings or aggregate counts.
            Third-party reviews shown only with attribution to the platform.
          </p>
        </div>

        <div className="trust">
          <div className="trust-cell">
            <div className="meta">Reviews</div>
            <div className="v">5.0 <span style={{ fontStyle: 'normal', fontFamily: 'var(--body)', fontSize: 14, color: 'var(--muted)', letterSpacing: 0.04, textTransform: 'none' }}>/ 5 · 32 reviews</span></div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Stars count={5} />
              <span className="l" style={{ fontSize: 10 }}>via WedMeGood, May 2026</span>
            </div>
          </div>
          <div className="trust-cell">
            <div className="meta">Editorial ranking</div>
            <div className="v">#1</div>
            <div className="l">9 Best Wedding Planners in Dubai — dubaisbest.com (editorial)</div>
          </div>
          <div className="trust-cell">
            <div className="meta">Sector breadth</div>
            <div className="v">26<span className="script" style={{ fontFamily: 'var(--display)', fontStyle: 'italic', color: 'var(--accent)' }}>+</span></div>
            <div className="l">countries planned · official site</div>
          </div>
          <div className="trust-cell">
            <div className="meta">Couples served</div>
            <div className="v">200<span className="script" style={{ fontFamily: 'var(--display)', fontStyle: 'italic', color: 'var(--accent)' }}>+</span></div>
            <div className="l">over 11 years · official site</div>
          </div>
        </div>

        <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--line)', border: '1px solid var(--line)' }} className="awards-grid">
          {[
            { name: 'Best Wedding Planning & Management Company — Middle East', issuer: 'Bride Awards', year: '2019, 2020' },
            { name: 'Best Wedding Planner — Global Category',                  issuer: 'International Wedding Awards', year: '2021, 2022, 2023' },
            { name: 'Destination Wedding of the Year — International (Gold)',  issuer: 'WOW Awards Asia',     year: '2020' },
            { name: 'Wedding Celebration of the Year (Gold)',                  issuer: 'WOW Awards Asia',     year: '2020' },
            { name: 'Wedding Celebration of the Decade (Gold)',                issuer: 'WOW Awards Asia',     year: '2020' },
            { name: 'Ranked #1 — Best Wedding Planners in Dubai',              issuer: 'dubaisbest.com (editorial)', year: '2026' },
          ].map((a, i) => (
            <div key={i} style={{ background: 'var(--paper)', padding: 'clamp(24px, 2.4vw, 36px)', display: 'flex', flexDirection: 'column', gap: 8, minHeight: 160 }}>
              <div className="meta">{a.year}</div>
              <h3 style={{ fontSize: 'clamp(18px, 1.5vw, 22px)', fontStyle: 'italic', fontWeight: 500 }}>{a.name}</h3>
              <div className="meta" style={{ color: 'var(--accent-ink)', marginTop: 'auto' }}>{a.issuer}</div>
            </div>
          ))}
        </div>
        <span className="placeholder-note" style={{ display: 'block', marginTop: 24 }}>
          Award titles &amp; years to be confirmed with each issuer before publication (current source: Gulf News sponsored partner content).
        </span>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------
   PRESS STRIP
------------------------------------------------------------ */
function PressStrip() {
  const items = [
    { outlet: 'Gulf News',        title: '"Crafting excellence in destination wedding planning"', tag: 'Friday Partner · sponsored' },
    { outlet: 'World Bride Magazine', title: '"Creating Global Magic — Arun Bablani"',           tag: 'Editorial' },
    { outlet: 'WedMeGood',        title: '"An Exclusive Interview with Arun Bablani"',           tag: 'Editorial · interview' },
    { outlet: '5 Star Wedding Blog', title: '"Insider Interviews — Arun Bablani"',               tag: 'Editorial' },
  ];
  return (
    <section className="section on-paper2" data-screen-label="Press">
      <div className="container-wide">
        <div className="section-head between">
          <div className="head-l">
            <span className="eyebrow"><span className="dot" />In the press</span>
            <h2>Attributed, <em>labelled</em>,<br/>never inflated.</h2>
            <span className="rule" />
          </div>
          <p className="body" style={{ maxWidth: 360 }}>
            Sponsored content is labelled as such. Editorial features link directly to the outlet.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--line)', border: '1px solid var(--line)' }} className="press-grid">
          {items.map((p, i) => (
            <article key={i} style={{ background: 'var(--paper)', padding: 'clamp(24px, 2.2vw, 36px)', display: 'flex', flexDirection: 'column', gap: 14, minHeight: 200 }}>
              <div className="meta" style={{ color: 'var(--accent-ink)' }}>{p.outlet}</div>
              <p style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontSize: 'clamp(18px, 1.4vw, 22px)', color: 'var(--ink)', margin: 0, lineHeight: 1.3 }}>
                {p.title}
              </p>
              <div className="meta" style={{ marginTop: 'auto', color: 'var(--muted)' }}>{p.tag}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------
   ENQUIRE BAND
------------------------------------------------------------ */
function EnquireBand() {
  return (
    <section className="section on-noir on-dark" data-screen-label="Enquire band">
      <div className="container" style={{ textAlign: 'center' }}>
        <span className="eyebrow"><span className="dot" />Begin</span>
        <h2 style={{ marginTop: 18 }}>
          <em>Tell us about your wedding.</em>
        </h2>
        <span className="rule" style={{ margin: '24px auto 0' }} />
        <p className="lede" style={{ margin: '24px auto 0', maxWidth: 640 }}>
          A short, qualified enquiry — your date, destination and guest scale — then a private consultation
          with Arun and the team.
        </p>
        <div style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
          <a className="btn btn-accent" href="Contact.html">Enquire <span className="arr">→</span></a>
          <a className="btn btn-ghost" href="https://wa.me/971501610923" style={{ color: '#fff' }}>WhatsApp +971 50 161 0923</a>
        </div>
      </div>
    </section>
  );
}

window.Home = Home;