<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512x512.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192x192.png" />
    <link rel="icon" type="image/png" sizes="96x96"   href="/icons/icon-96x96.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-192x192.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="/icons/icon-128x128.png" />
    <link rel="apple-touch-icon"                 href="/icons/icon-192x192.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover" />
    <meta name="theme-color" content="#be123c" />

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="HALYO" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="application-name" content="HALYO" />
    <meta name="msapplication-TileColor" content="#be123c" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="msapplication-TileImage" content="/icons/icon-144x144.png" />

    <title>HALYO - India's Trusted Wedding Marketplace | Venues &amp; Vendors</title>
    <meta name="description" content="Find perfect wedding venues, photographers, caterers &amp; decorators. Book kalyana mandapams, party halls, resorts for your special day. India's trusted wedding marketplace." />
    <meta name="keywords" content="wedding venues, kalyana mandapam, Telugu wedding, Andhra Pradesh, Telangana, wedding vendors, photographers, catering" />
    <meta name="robots" content="index, follow" />
    <link rel="canonical" href="https://halyo.in" />

    <meta property="og:title" content="HALYO - India's Trusted Wedding Marketplace" />
    <meta property="og:description" content="India's trusted wedding venue and services marketplace. Find venues, photographers, caterers &amp; more in Andhra Pradesh and Telangana." />
    <meta property="og:image" content="https://images.pexels.com/photos/1444442/pexels-photo-1444442.jpeg?auto=compress&cs=tinysrgb&w=1200" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="HALYO" />
    <meta property="og:url" content="https://halyo.in" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="HALYO - India's Trusted Wedding Marketplace" />
    <meta name="twitter:description" content="India's trusted wedding venue and services marketplace in Andhra Pradesh and Telangana" />
    <meta name="twitter:image" content="https://images.pexels.com/photos/1444442/pexels-photo-1444442.jpeg?auto=compress&cs=tinysrgb&w=1200" />

    <link rel="manifest" href="/manifest.json" />
    <link rel="apple-touch-startup-image" href="/icons/icon-512x512.png" />

    <!-- Structured data -->
    <script type="application/ld+json">
    {"@context":"https://schema.org","@type":"Organization","name":"HALYO","url":"https://halyo.in","logo":"https://halyo.in/icons/icon-512x512.png","contactPoint":{"@type":"ContactPoint","telephone":"+91-97012-96658","contactType":"customer service","areaServed":"IN","availableLanguage":["English","Telugu"]}}
    </script>
    <script type="application/ld+json">
    {"@context":"https://schema.org","@type":"WebSite","name":"HALYO","url":"https://halyo.in","description":"India's trusted wedding marketplace for venues, photographers, caterers and more","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://halyo.in/venues?city={search_term_string}"},"query-input":"required name=search_term_string"}}
    </script>

    <!--
      Critical inline CSS — paints the loading shell instantly before any JS executes.
      Eliminates the "blank white flash" that drives up FCP on mobile.
      Covers: body bg, navbar placeholder, hero image container, skeleton shimmer.
    -->
    <style>
      *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
      html{height:100%;-webkit-text-size-adjust:100%}
      body{
        min-height:100dvh;
        background:#fff;
        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
        -webkit-font-smoothing:antialiased;
        overflow-x:hidden
      }
      #root{min-height:100dvh}
      /* Navbar shell — prevents layout shift when nav renders */
      #app-nav-shell{
        position:fixed;top:0;left:0;right:0;
        height:60px;
        background:#030712;
        z-index:50;
        display:flex;align-items:center;padding:0 1rem;
        border-bottom:1px solid rgba(255,255,255,0.06)
      }
      #app-nav-logo{
        display:flex;align-items:center;gap:0.375rem;text-decoration:none
      }
      #app-nav-logo span{
        font-size:1.125rem;font-weight:900;letter-spacing:-0.03em;
        color:#fff
      }
      #app-nav-logo .logo-hal{color:#f59e0b}
      #app-nav-logo .logo-yo{color:#e11d48}
      /* Hero shell — LCP image container visible immediately */
      #app-hero-shell{
        position:relative;
        min-height:100dvh;
        display:flex;align-items:center;justify-content:center;
        background:#030712;
        overflow:hidden
      }
      #app-hero-img{
        position:absolute;inset:0;
        width:100%;height:100%;
        -o-object-fit:cover;
           object-fit:cover;-o-object-position:center 30%;object-position:center 30%;
        will-change:auto
      }
      #app-hero-overlay{
        position:absolute;inset:0;
        background:linear-gradient(to bottom,rgba(3,7,18,0.7) 0%,rgba(3,7,18,0.6) 50%,rgba(3,7,18,0.85) 100%)
      }
      #app-hero-content{
        position:relative;z-index:10;
        text-align:center;padding:0 1rem;
        padding-top:99px
      }
      #app-hero-h1{
        font-size:clamp(2rem,8vw,4.5rem);
        font-weight:800;
        color:#fff;
        line-height:1.05;
        letter-spacing:-0.03em;
        margin-bottom:0.5rem
      }
      #app-hero-sub{
        font-size:clamp(0.875rem,3vw,1.125rem);
        color:rgba(229,231,235,0.8);
        max-width:38rem;
        margin:0 auto
      }
      /* Shimmer skeleton for below-hero content */
      @keyframes _shimmer{
        0%{background-position:-200% center}
        100%{background-position:200% center}
      }
      .skel{
        border-radius:0.75rem;
        background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
        background-size:200% auto;
        animation:_shimmer 1.4s ease-in-out infinite
      }
    </style>

    <!--
      Resource hints — ordered by priority:
      1. preconnect for critical third-party origins
      2. dns-prefetch for secondary origins
      3. preload for LCP hero image (must resolve before React boots)
      4. Non-blocking font load
    -->
    <link rel="preconnect" href="https://images.pexels.com" crossorigin />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://wvkxtebpkxcwvsmrprpz.supabase.co" crossorigin />
    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />

    <!--
      Preload LCP hero image.
      imagesizes uses responsive breakpoints so mobile (390px) fetches 640w,
      tablet fetches 1200w, desktop fetches 1920w.
      fetchpriority=high tells the browser to fetch this before parser-discovered resources.
    -->
    <link rel="preload" as="image"
      href="https://images.pexels.com/photos/16151770/pexels-photo-16151770.jpeg?auto=compress&cs=tinysrgb&w=640"
      imagesrcset="https://images.pexels.com/photos/16151770/pexels-photo-16151770.jpeg?auto=compress&cs=tinysrgb&w=640 640w, https://images.pexels.com/photos/16151770/pexels-photo-16151770.jpeg?auto=compress&cs=tinysrgb&w=1200 1200w, https://images.pexels.com/photos/16151770/pexels-photo-16151770.jpeg?auto=compress&cs=tinysrgb&w=1920 1920w"
      imagesizes="(max-width: 640px) 640px, (max-width: 1200px) 1200px, 1920px"
      fetchpriority="high" />

    <!--
      Fonts: display=swap so body text renders in system font immediately,
      then swaps to Inter/Playfair once loaded. Prevents invisible text (FOIT).
      display=optional was causing fonts to never load on slow connections.
    -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Inter:wght@400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'" />
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Inter:wght@400;500;600;700&display=swap" /></noscript>

    <!-- Service Worker — deferred to after load to not block parse -->
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('/sw.js', { scope: '/', updateViaCache: 'none' })
            .then(function(reg) {
              reg.addEventListener('updatefound', function() {
                var w = reg.installing;
                if (!w) return;
                w.addEventListener('statechange', function() {
                  if (w.state === 'installed' && navigator.serviceWorker.controller) {
                    w.postMessage({ type: 'SKIP_WAITING' });
                  }
                });
              });
            });
          var refreshing = false;
          navigator.serviceWorker.addEventListener('controllerchange', function() {
            if (!refreshing) { refreshing = true; window.location.reload(); }
          });
        });
      }
    </script>
    <script type="module" crossorigin src="/assets/index-CjLgF4vP.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-core-jEYVis0C.js">
    <link rel="modulepreload" crossorigin href="/assets/supabase-DzRej4Do.js">
    <link rel="modulepreload" crossorigin href="/assets/router-BkDW68Bt.js">
    <link rel="stylesheet" crossorigin href="/assets/index-DEDSvKxC.css">
  <script async src="https://bolt.new/badge.js?s=eff865d5-e9d8-405c-8703-9e89c7bb45d9"></script></head>
  <body>
    <!--
      Static HTML shell — visible instantly before any JS executes.
      Gives Lighthouse an FCP paint target before React boots.
      React mounts into #root and replaces this shell.
      The hero image here is the same as HERO_SLIDES[0] in Home.tsx so
      the browser can reuse the preloaded image for both.
    -->
    <div id="root">
      <!-- Navbar shell -->
      <nav id="app-nav-shell" aria-label="Main navigation">
        <a id="app-nav-logo" href="/">
          <span><span class="logo-hal">HAL</span><span class="logo-yo">YO</span></span>
        </a>
      </nav>

      <!-- Hero shell with preloaded LCP image -->
      <div id="app-hero-shell">
        <img
          id="app-hero-img"
          src="https://images.pexels.com/photos/16151770/pexels-photo-16151770.jpeg?auto=compress&cs=tinysrgb&w=640"
          srcset="https://images.pexels.com/photos/16151770/pexels-photo-16151770.jpeg?auto=compress&cs=tinysrgb&w=640 640w, https://images.pexels.com/photos/16151770/pexels-photo-16151770.jpeg?auto=compress&cs=tinysrgb&w=1200 1200w, https://images.pexels.com/photos/16151770/pexels-photo-16151770.jpeg?auto=compress&cs=tinysrgb&w=1920 1920w"
          sizes="(max-width: 640px) 640px, (max-width: 1200px) 1200px, 1920px"
          alt="Indian Wedding Ceremony"
          width="1920"
          height="1080"
          fetchpriority="high"
          decoding="sync"
        />
        <div id="app-hero-overlay"></div>
        <div id="app-hero-content">
          <h1 id="app-hero-h1">India's Trusted<br>Wedding Marketplace</h1>
          <p id="app-hero-sub">Venues, photographers, caterers &amp; more — real prices, direct contact.</p>
        </div>
      </div>
    </div>
  </body>
</html>
