// Home page

const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

// ----- Hero -----
function Hero({ openConsult }) {
  return React.createElement('section', { className: 'hero' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'hero-grid' },
        React.createElement('div', null,
          React.createElement('div', { className: 'eyebrow' }, 'Gold & Diamond Park · Since the heart of Dubai'),
          React.createElement('h1', { className: 'display' }, 'Handcrafted diamonds, ', React.createElement('em', null, 'made for your'), ' story.'),
          React.createElement('p', { className: 'sub' }, 'A private atelier in Dubai\'s Gold & Diamond Park — bespoke engagement rings, eternity bands, and one-of-a-kind diamond jewellery, each one GIA or IGI certified.'),
          React.createElement('div', { className: 'cta-row' },
            React.createElement('button', { className: 'btn btn-primary', onClick: openConsult }, 'Book a Private Consultation'),
            React.createElement('a', { className: 'btn btn-ghost', href: 'https://wa.me/971568747327', target: '_blank' },
              React.createElement(Icons.whatsapp, { width: 16, height: 16 }), 'WhatsApp Us'),
          ),
          React.createElement('div', { style: { marginTop: 56, display: 'flex', gap: 36, alignItems: 'center' } },
            React.createElement('div', null,
              React.createElement('div', { className: 'serif', style: { fontSize: 38, fontStyle: 'italic', color: 'var(--accent-deep)', lineHeight: 1 } }, '5.0'),
              React.createElement('div', { className: 'eyebrow muted', style: { marginTop: 6 } }, '16 reviews on Tripadvisor'),
            ),
            React.createElement('div', { style: { width: 1, height: 56, background: 'var(--rule)' } }),
            React.createElement('div', null,
              React.createElement('div', { className: 'serif', style: { fontSize: 26, lineHeight: 1.1 } }, 'GIA · IGI'),
              React.createElement('div', { className: 'eyebrow muted', style: { marginTop: 6 } }, 'Every diamond certified'),
            ),
          ),
        ),
        React.createElement('div', { className: 'hero-image' },
          React.createElement('img', { src: 'assets/hand-cushion.webp', alt: 'Cushion-cut diamond halo ring' }),
          React.createElement('div', { className: 'badge' },
            React.createElement('div', { className: 'eyebrow', style: { color: 'var(--accent-deep)' } }, 'Featured'),
            React.createElement('div', { className: 'serif', style: { fontSize: 18 } }, 'Cushion Halo'),
            React.createElement('div', { style: { fontSize: 12, color: 'var(--ink-muted)' } }, 'Split-shank · 18K white gold'),
          ),
        ),
      ),
    ),
  );
}

// ----- Trust strip -----
function TrustStrip() {
  const items = [
    { icon: Icons.star, label: 'Reputation', value: '5.0 on Tripadvisor' },
    { icon: Icons.cert, label: 'Provenance', value: 'GIA / IGI certified' },
    { icon: Icons.diamond, label: 'Materials', value: '18K gold & platinum' },
    { icon: Icons.pin, label: 'Location', value: 'Gold & Diamond Park' },
  ];
  return React.createElement('section', { className: 'trust' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'trust-row' },
        ...items.map((it, i) =>
          React.createElement('div', { className: 'trust-item' + (i ? ' sep' : ''), key: i },
            React.createElement(it.icon, { className: 'icon', width: 28, height: 28 }),
            React.createElement('div', null,
              React.createElement('div', { className: 'label' }, it.label),
              React.createElement('div', { className: 'value' }, it.value),
            ),
          ),
        ),
      ),
    ),
  );
}

// ----- Featured collections -----
function FeaturedCollections() {
  // Asymmetric editorial grid using 12-col
  const cards = [
    { img: 'assets/featured-marquise.webp', name: 'Marquise', cut: 'Engagement', span: 4 },
    { img: 'assets/featured-brilliant.webp', name: 'Brilliant', cut: 'Round · lifestyle', span: 5, tall: true },
    { img: 'assets/featured-sapphire.webp', name: 'Sapphire Halo', cut: 'Pendants', span: 3, tall: true },
    { img: 'assets/featured-hoops.webp', name: 'Inside-Out Hoops', cut: 'Lab-grown · Earrings', span: 5 },
    { img: 'assets/featured-radiant.webp', name: 'Radiant', cut: 'Rings', span: 4 },
    { img: 'assets/featured-bridal.webp', name: 'Bridal', cut: 'Wedding bands', span: 3 },
  ];
  return React.createElement('section', { className: 'section' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'section-header' },
        React.createElement('div', null,
          React.createElement('div', { className: 'eyebrow', style: { marginBottom: 14 } }, 'The Collections'),
          React.createElement('h2', { className: 'title' }, 'Six houses, ', React.createElement('em', null, 'one'), ' atelier.'),
        ),
        React.createElement('div', { className: 'lede' },
          'Engagement and bridal lead the house; eternity, statement and bespoke radiate from it. Each piece is hand-set in Dubai by the team behind the bench.',
          React.createElement('div', { style: { marginTop: 16 } },
            React.createElement('a', { className: 'btn-text', href: 'collections.html' }, 'View all collections →')),
        ),
      ),
      React.createElement('div', { className: 'featured-grid' },
        ...cards.map((c, i) =>
          React.createElement('a', { key: i, href: 'collections.html', className: 'feature-card' + (c.tall ? ' tall' : ''), style: { gridColumn: 'span ' + c.span } },
            React.createElement('div', { className: 'corner-tag' }, c.cut),
            React.createElement('div', { className: 'img-wrap', style: c.tall ? { aspectRatio: '4/5' } : { aspectRatio: '5/4' } },
              React.createElement('img', { src: c.img, alt: c.name }),
            ),
            React.createElement('div', { className: 'meta' },
              React.createElement('div', null,
                React.createElement('h3', null, c.name),
              ),
              React.createElement('div', { className: 'arrow' }, React.createElement(Icons.arrow, { width: 14, height: 14 })),
            ),
          ),
        ),
      ),
    ),
  );
}

// ----- Editorial / About teaser -----
function Editorial() {
  return React.createElement('section', { className: 'section', id: 'about' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'editorial' },
        React.createElement('div', { className: 'img' }, React.createElement('img', { src: 'assets/hands-wedding-set.webp', alt: 'Wedding rings on couple\'s hands' })),
        React.createElement('div', { className: 'body' },
          React.createElement('div', { className: 'eyebrow' }, 'The house'),
          React.createElement('h2', null, 'Quiet rooms, certified stones, the same hands from first sketch to final polish.'),
          React.createElement('p', null, 'Queen Diamonds is a private atelier set inside Gold & Diamond Park, a step from Equiti Metro. Our advisors meet every couple in person — by appointment, without showroom theatre — to talk about the four Cs, the brief, the budget, and the story.'),
          React.createElement('p', null, 'We work with natural and lab-grown diamonds, sapphires and coloured stones, in 18K white, yellow and rose gold, and platinum. Every centre stone arrives with its GIA or IGI report. Pricing is transparent and quoted in person.'),
          React.createElement('div', { style: { marginTop: 28 } },
            React.createElement('a', { className: 'btn-text', href: 'visit.html' }, 'Visit the showroom →')),
        ),
      ),
    ),
  );
}

// ----- Bespoke -----
function BespokeSection() {
  const steps = [
    { n: '1', label: 'Share your idea', body: 'A sketch, a Pinterest board, a family heirloom — any starting point.' },
    { n: '2', label: 'Private consultation', body: '4Cs guidance, stone selection, and a written quote in one session.' },
    { n: '3', label: 'Design & approve', body: 'CAD renders and a wax model. Refine until it\'s right.' },
    { n: '4', label: 'Crafted in-house', body: 'Hand-set on our bench at Shop 28. Resizing in hours, full pieces in days.' },
    { n: '5', label: 'Delivery', body: 'Presented in person, with the GIA / IGI report and a care brief.' },
  ];
  return React.createElement('section', { className: 'bespoke-section' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'bespoke-grid' },
        React.createElement('div', null,
          React.createElement('div', { className: 'eyebrow' }, 'Bespoke'),
          React.createElement('h2', null, 'Your jewellery should be ', React.createElement('em', null, 'as unique'), ' as your love tale.'),
          React.createElement('p', { className: 'sub' }, 'We design with you, not for you. Bring a stone, a story, or a starting point — we\'ll handle the rest in-house. Resizing finishes in hours; new designs in days.'),
          React.createElement('a', { className: 'btn btn-gold', href: 'bespoke.html' }, 'Start a Design'),
        ),
        React.createElement('div', { className: 'bespoke-side' },
          React.createElement('div', null,
            React.createElement('img', { src: 'assets/bride-marquise.webp', alt: '' }),
          ),
          React.createElement('div', null,
            React.createElement('img', { src: 'assets/ring-eternity-studio.webp', alt: '' }),
          ),
        ),
      ),
      React.createElement('div', { className: 'process-steps' },
        ...steps.map((s, i) => React.createElement('div', { className: 'process-step', key: i },
          React.createElement('div', { className: 'num' }, s.n),
          React.createElement('div', { className: 'step-label' }, s.label),
          React.createElement('div', { className: 'step-body' }, s.body),
        )),
      ),
    ),
  );
}

// ----- 4Cs Education -----
function FourCsSection() {
  const [open, setOpen] = useStateH(0);
  const items = [
    { letter: 'C', label: 'The first C', title: 'Cut', body: 'Cut governs how light moves through the stone. It is the most determinative of the four Cs for sparkle — a brilliant cut graded Excellent will return far more light than a higher-clarity stone cut poorly.' },
    { letter: 'C', label: 'The second C', title: 'Colour', body: 'Diamonds are graded D (colourless) through Z. We typically work in the D–H range for white-gold settings; J–K can read warmer and pair beautifully with yellow gold.' },
    { letter: 'C', label: 'The third C', title: 'Clarity', body: 'Inclusions are the diamond\'s fingerprint. Most are invisible to the eye at SI1 and above. We help you read your report and see the stone under loupe before you decide.' },
    { letter: 'C', label: 'The fourth C', title: 'Carat', body: 'Carat is weight, not size — two one-carat stones can look very different depending on cut and proportions. We always lay candidate stones side by side, never on paper alone.' },
  ];
  return React.createElement('section', { className: 'section', id: 'education', style: { background: 'var(--bg)' } },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'section-header' },
        React.createElement('div', null,
          React.createElement('div', { className: 'eyebrow', style: { marginBottom: 14 } }, 'Diamond education'),
          React.createElement('h2', { className: 'title' }, 'The ', React.createElement('em', null, 'four Cs'), ', simply.'),
        ),
        React.createElement('div', { className: 'lede' },
          'Every diamond we sell arrives with a GIA or IGI report. Here\'s how to read it — and why we always show you the stone in person.',
        ),
      ),
      React.createElement('div', { className: 'fourCs' },
        React.createElement('div', { className: 'fourCs-list' },
          ...items.map((it, i) =>
            React.createElement('div', { className: 'fourC-row' + (open === i ? ' open' : ''), key: i, onClick: () => setOpen(open === i ? -1 : i) },
              React.createElement('div', { className: 'letter' }, it.title[0]),
              React.createElement('div', null,
                React.createElement('div', { className: 'label' }, it.label),
                React.createElement('div', { className: 'title' }, it.title),
                React.createElement('div', { className: 'body' }, it.body),
              ),
              React.createElement('div', { className: 'chev' }, '+'),
            ),
          ),
        ),
        React.createElement('div', { className: 'fourCs-aside' },
          React.createElement('div', { className: 'img' }, React.createElement('img', { src: 'assets/ring-radiant.webp', alt: 'Radiant-cut diamond' })),
          React.createElement('div', { className: 'caption' }, 'Natural and lab-grown diamonds, both certified — we\'re happy to walk you through the difference, and what it means for sparkle and price, in the showroom.'),
        ),
      ),
    ),
  );
}

// ----- Testimonials -----
function Testimonials() {
  const reviews = [
    { quote: 'A truly exceptional experience. The team listened carefully, talked us through every stone on the tray, and produced a custom marquise ring inside two days. The 4Cs were explained without a hint of pressure.', name: 'Mairead', loc: 'Visited from the UK', stars: 5 },
    { quote: 'I came in for resizing on a piece I\'d had for years. They did it in under two hours and the result is invisible. The whole shop feels personal — you\'re not a number here.', name: 'Tatyana R.', loc: 'Dubai resident', stars: 5 },
    { quote: 'Bought my fiancée\'s engagement ring with Appu\'s guidance — completely transparent on pricing and the certificate. Worth every step into Gold & Diamond Park.', name: 'A traveller', loc: 'From Romania', stars: 5 },
  ];
  const [i, setI] = useStateH(0);
  useEffectH(() => {
    const t = setInterval(() => setI(prev => (prev + 1) % reviews.length), 8000);
    return () => clearInterval(t);
  }, []);
  const r = reviews[i];
  return React.createElement('section', { className: 'testimonials', id: 'testimonials' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { style: { textAlign: 'center', marginBottom: 64 } },
        React.createElement('div', { className: 'eyebrow' }, '5.0 · 16 reviews on Tripadvisor'),
      ),
      React.createElement('div', { className: 'testimonial-card', key: i },
        React.createElement('div', { className: 'mark' }, '“'),
        React.createElement('div', null,
          React.createElement('blockquote', null, r.quote),
          React.createElement('div', { className: 'attrib' },
            React.createElement('div', { className: 'stars' }, '★★★★★'),
            React.createElement('div', null, React.createElement('span', { className: 'name' }, r.name), ' · ', r.loc),
          ),
        ),
      ),
      React.createElement('div', { className: 'testimonial-nav' },
        ...reviews.map((_, j) => React.createElement('button', { key: j, className: i === j ? 'active' : '', onClick: () => setI(j), 'aria-label': 'review ' + (j + 1) })),
      ),
    ),
  );
}

// ----- Instagram strip -----
function InstagramStrip() {
  const imgs = [
    'assets/ring-cushion-halo.webp', 'assets/bride-side.webp', 'assets/ring-round-velvet.webp',
    'assets/earring-portrait.webp', 'assets/earring-studio.webp', 'assets/ring-eternity-studio.webp',
  ];
  return React.createElement('section', { className: 'ig-strip' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'section-header' },
        React.createElement('div', null,
          React.createElement('div', { className: 'eyebrow', style: { marginBottom: 12 } }, 'Instagram'),
          React.createElement('h2', { className: 'title', style: { fontSize: 36 } }, '@queendiamondsdubai'),
        ),
        React.createElement('div', null,
          React.createElement('a', { className: 'btn-text', href: 'https://www.instagram.com/queendiamondsdubai/', target: '_blank' }, 'Follow →'),
        ),
      ),
      React.createElement('div', { className: 'ig-grid' },
        ...imgs.map((src, i) =>
          React.createElement('a', { key: i, href: 'https://www.instagram.com/queendiamondsdubai/', target: '_blank' },
            React.createElement('img', { src, alt: '' }),
          ),
        ),
      ),
    ),
  );
}

// ----- Visit block -----
function VisitBlock() {
  return React.createElement('section', { className: 'visit-block', id: 'visit' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'visit-grid' },
        React.createElement('div', { className: 'visit-info' },
          React.createElement('h3', null, 'Visit the atelier'),
          React.createElement('div', { className: 'addr' }, 'Shop 28, Building 1', React.createElement('br'), 'Gold & Diamond Park', React.createElement('br'), 'Sheikh Zayed Road, Dubai'),
          React.createElement('div', { className: 'meta-row' },
            React.createElement('div', null,
              React.createElement('div', { className: 'label' }, 'Today'),
              React.createElement('div', { className: 'val' }, '10:00 – 21:00'),
            ),
            React.createElement('div', null,
              React.createElement('div', { className: 'label' }, 'Nearest metro'),
              React.createElement('div', { className: 'val' }, 'Equiti Metro · 6 min walk'),
            ),
            React.createElement('div', null,
              React.createElement('div', { className: 'label' }, 'WhatsApp'),
              React.createElement('div', { className: 'val' }, React.createElement('a', { href: 'https://wa.me/971568747327', target: '_blank' }, '+971 56 874 7327')),
            ),
            React.createElement('div', null,
              React.createElement('div', { className: 'label' }, 'Showroom'),
              React.createElement('div', { className: 'val' }, React.createElement('a', { href: 'tel:+97143978786' }, '+971 4 397 8786')),
            ),
          ),
          React.createElement('div', { style: { display: 'flex', gap: 12 } },
            React.createElement('a', { className: 'btn btn-primary', href: 'visit.html' }, 'Get Directions'),
            React.createElement('a', { className: 'btn btn-ghost', href: 'https://wa.me/971568747327', target: '_blank' }, 'Message us'),
          ),
        ),
        React.createElement(MapTile, null),
      ),
    ),
  );
}

// Live Google Maps embed for the showroom.
function MapTile() {
  return React.createElement('div', { className: 'map-tile' },
    React.createElement('iframe', {
      title: 'Google Maps for Queen Diamonds at Gold & Diamond Park',
      src: 'https://www.google.com/maps?q=Queen%20Diamonds%20Shop%2028%20Building%201%20Gold%20and%20Diamond%20Park%20Dubai&z=16&output=embed',
      loading: 'lazy',
      referrerPolicy: 'no-referrer-when-downgrade',
    }),
  );
}

// ----- App -----
function HomePage() {
  return React.createElement(Shell, { current: 'home' }, ({ openConsult }) =>
    React.createElement(React.Fragment, null,
      React.createElement(Hero, { openConsult }),
      React.createElement(TrustStrip, null),
      React.createElement(FeaturedCollections, null),
      React.createElement(Editorial, null),
      React.createElement(BespokeSection, null),
      React.createElement(FourCsSection, null),
      React.createElement(Testimonials, null),
      React.createElement(InstagramStrip, null),
      React.createElement(VisitBlock, null),
    ),
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(HomePage));