����JFIF�


�`�`�����<CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 100
���C�































































���C
































































����d�d
"�

�����






��������

����JFIF�


�`�`�����<CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 100
���C�































































���C
































































����d�d
"�

�����






��������

����JFIF�


�`�`�����<CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 100
���C�































































���C
































































����d�d
"�

�����






��������

����JFIF�


�`�`�����<CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 100
���C�































































���C
































































����d�d
"�

�����






��������

<?php
require_once __DIR__ . '/api/config.php';
header('Content-Type: text/html; charset=utf-8');
$stmt = db()->query("SELECT file_path FROM media WHERE kind='hero' ORDER BY id DESC LIMIT 3");
$heroUrls = $stmt->fetchAll(PDO::FETCH_COLUMN);
$heroUrl = !empty($heroUrls) ? $heroUrls[0] : null;
?>
<?php include 'header.php'; ?>
<script>window.HERO_IMAGES = <?php echo json_encode($heroUrls ?: []); ?>;</script>

<!-- HERO -->
<header class="hero" id="heroSec">
  <div class="hero-bg" id="heroBg" <?php if(!empty($heroUrl)) echo 'style="background-image:url('.$heroUrl.')" '; ?>>
    <svg class="hero-bike" <?php if(!empty($heroUrl)) echo 'style="display:none;" '; ?> viewBox="0 0 900 480" fill="none">
      <defs>
        <linearGradient id="hTank" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#C8102E"/><stop offset="60%" stop-color="#8a0a20"/><stop offset="100%" stop-color="#3a040d"/>
        </linearGradient>
        <radialGradient id="hGlow" cx="55%" cy="55%" r="60%">
          <stop offset="0%" stop-color="#C8102E" stop-opacity=".22"/><stop offset="55%" stop-color="#EBAB00" stop-opacity=".06"/><stop offset="100%" stop-opacity="0"/>
        </radialGradient>
      </defs>
      <rect width="900" height="480" fill="url(#hGlow)"/>
      <ellipse cx="460" cy="420" rx="380" ry="20" fill="#000" opacity=".5"/>
      <circle cx="235" cy="345" r="102" stroke="#0c0c0c" stroke-width="30"/>
      <circle cx="235" cy="345" r="102" stroke="#3a3a40" stroke-width="7"/>
      <circle cx="235" cy="345" r="52" stroke="#55555c" stroke-width="4"/>
      <circle cx="235" cy="345" r="13" fill="#77777e"/>
      <circle cx="685" cy="345" r="102" stroke="#0c0c0c" stroke-width="30"/>
      <circle cx="685" cy="345" r="102" stroke="#3a3a40" stroke-width="7"/>
      <circle cx="685" cy="345" r="52" stroke="#55555c" stroke-width="4"/>
      <circle cx="685" cy="345" r="13" fill="#77777e"/>
      <path d="M235 243 L340 155 L480 125 L600 145 L685 243" stroke="#26262c" stroke-width="13"/>
      <path d="M340 155 L392 243 L235 243" stroke="#26262c" stroke-width="9"/>
      <ellipse cx="470" cy="146" rx="118" ry="42" fill="url(#hTank)" stroke="#000" stroke-width="4"/>
      <ellipse cx="452" cy="132" rx="62" ry="15" fill="#fff" opacity=".14"/>
      <path d="M368 152 Q470 118 572 152" stroke="#EBAB00" stroke-width="4"/>
      <circle cx="470" cy="146" r="15" fill="#EBAB00"/>
      <circle cx="470" cy="146" r="15" stroke="#0c0c0c" stroke-width="2.5"/>
      <path d="M348 172 Q470 140 592 172" stroke="#0c0c0c" stroke-width="9"/>
      <path d="M600 145 L655 92 L718 82" stroke="#26262c" stroke-width="8"/>
      <circle cx="705" cy="170" r="27" fill="#F2E9CE" stroke="#0c0c0c" stroke-width="6"/>
      <circle cx="705" cy="170" r="14" fill="#fff" opacity=".7"/>
      <rect x="388" y="208" width="132" height="92" rx="12" fill="#1c1c22" stroke="#000" stroke-width="4"/>
      <rect x="402" y="222" width="104" height="10" rx="5" fill="#3f3f46"/>
      <rect x="402" y="242" width="104" height="10" rx="5" fill="#3f3f46"/>
      <rect x="402" y="262" width="104" height="10" rx="5" fill="#3f3f46"/>
      <path d="M400 325 Q310 318 245 368" stroke="#8a8a92" stroke-width="11"/>
      <path d="M330 168 Q470 142 590 168" stroke="#EBAB00" stroke-width="2" opacity=".6"/>
    </svg>
  </div>
  <div class="hero-shade"></div>
  <div class="hero-inner">
    <div class="hero-badge">✦ &nbsp;12 certified motorcycles · Bengaluru · Showroom &amp; Service Centre</div>
    <h1>Re-Own the <em>Legend.</em></h1>
    <div class="hero-sub">India&rsquo;s certified pre-owned Royal Enfield programme &mdash; now in Bengaluru</div>
    <div class="hero-cta">
      <button class="btn btn-dark" onclick="go('buy')">Browse bikes</button>
      <button class="btn btn-hero-ghost" onclick="go('sell')">Sell your bike</button>
    </div>
  </div>
  <button class="hero-upload" id="heroUploadBtn" style="display:none;" onclick="document.getElementById('heroFile').click()">📷 Set hero photo</button>
  <input type="file" id="heroFile" accept="image/*" hidden onchange="setHeroPhoto(this.files)"/>
</header>

<!-- ═══════ DELIVERY WALL (auto-scrolling) ═══════ -->
<section class="dwall">
  <div class="dwall-head">
    <span class="dwall-title">🏍️ Recent deliveries — legends finding new riders</span>
    <button class="btn btn-sm" id="dwallAdd" style="display:none;background:var(--gold);color:#fff;" onclick="openDeliveryModal()">+ Add delivery photo</button>
  </div>
  <div class="marquee">
    <div class="marquee-track" id="dwallTrack"></div>
  </div>
</section>


<div class="trust">
  <div><svg fill="none" stroke-width="2" viewBox="0 0 24 24"><path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round"/></svg><b style="color:var(--gold);">100-min delivery</b>&nbsp;in Bengaluru</div>
  <div><svg fill="none" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4v5h5M20 20v-5h-5M4 9a8 8 0 0114-3M20 15a8 8 0 01-14 3" stroke-linecap="round" stroke-linejoin="round"/></svg>6-month buyback @ 80%</div>
  <div><svg fill="none" stroke-width="2" viewBox="0 0 24 24"><path d="M8 7h12m0 0l-4-4m4 4l-4 4M16 17H4m0 0l4 4m-4-4l4-4" stroke-linecap="round" stroke-linejoin="round"/></svg>Instant exchange</div>
  <div><svg fill="none" stroke-width="2" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"/></svg>Reown 200-checkpoint Certified</div>
  <div><svg fill="none" stroke-width="2" viewBox="0 0 24 24"><path d="M12 8v8m-4-4h8M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"/></svg>EMI from ₹2,500/mo</div>
</div>

<!-- ═══════ BUY ═══════ -->
<section class="section" id="buy">
  <div class="sec-head">
    <div>
      <h2>The <em>showroom</em></h2>
      <p>Tap any bike to view its photos, spin it in 360°, and calculate your EMI.</p>
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap;">
      <button class="btn btn-sm" id="addBikeBtn" style="display:none;background:var(--green);color:#fff;" onclick="openAddBike()">+ Add motorcycle</button>
      <button class="btn btn-sm" id="monitorBtn" style="display:none;background:#141412;color:#fff;" onclick="openMonitor()">📊 Activity</button>
      <button class="btn btn-light btn-sm" id="showroomBookBtn" onclick="openBook()">Book a visit</button>
    </div>
  </div>
  <div class="chips" id="chips">
    <button class="chip on" data-f="all" onclick="setChip('all',this)">All</button>
    <button class="chip" data-f="350" onclick="setChip('350',this)">350cc</button>
    <button class="chip" data-f="411" onclick="setChip('411',this)">Adventure 411</button>
    <button class="chip" data-f="650" onclick="setChip('650',this)">650 Twins</button>
    <button class="chip" data-f="under15" onclick="setChip('under15',this)">Under ₹1.5L</button>
  </div>
  <div class="grid" id="grid"></div>
</section>

<!-- ═══════ SELL ═══════ -->
<section class="section" id="sell" style="background:linear-gradient(180deg,transparent,#f5f4ef 30%,#f5f4ef 70%,transparent);">
  <div class="sec-head" style="justify-content:center;text-align:center;">
    <div style="margin:0 auto;">
      <h2>Sell your bike in <em>three steps</em></h2>
      <p style="margin-left:auto;margin-right:auto;">Get an instant estimate. Upload photos. We handle the rest — inspection, paperwork, payment.</p>
    </div>
  </div>
  <div class="sell-wrap">
    <div class="steps" id="sellSteps">
      <div class="step on" id="st1"><div class="step-dot">1</div><div class="step-name">Your bike</div></div>
      <div class="step-line"></div>
      <div class="step" id="st2"><div class="step-dot">2</div><div class="step-name">Photos</div></div>
      <div class="step-line"></div>
      <div class="step" id="st3"><div class="step-dot">3</div><div class="step-name">Estimate</div></div>
    </div>

    <!-- STEP 1 -->
    <div class="sell-card" id="sellStep1">
      <div class="f-2col">
        <div class="f-row">
          <label class="f-label">Model</label>
          <select class="f-inp" id="sModel">
            <option>Classic 350</option><option>Bullet 350</option><option>Hunter 350</option>
            <option>Meteor 350</option><option>Scram 411</option><option>Himalayan</option>
            <option>Interceptor 650</option><option>Continental GT 650</option><option>Other</option>
          </select>
        </div>
        <div class="f-row">
          <label class="f-label">Year of purchase</label>
          <select class="f-inp" id="sYear">
            <option>2025</option><option>2024</option><option>2023</option><option selected>2022</option>
            <option>2021</option><option>2020</option><option>2019</option><option>2018 or older</option>
          </select>
        </div>
      </div>
      <div class="f-2col">
        <div class="f-row">
          <label class="f-label">Kilometres driven</label>
          <select class="f-inp" id="sKm">
            <option>Under 5,000 km</option><option selected>5,000 – 15,000 km</option>
            <option>15,000 – 30,000 km</option><option>30,000 – 50,000 km</option><option>50,000+ km</option>
          </select>
        </div>
        <div class="f-row">
          <label class="f-label">Overall condition</label>
          <select class="f-inp" id="sCond">
            <option>Excellent — like new</option><option selected>Good — minor wear</option>
            <option>Fair — visible wear</option><option>Needs work</option>
          </select>
        </div>
      </div>
      <div class="f-row">
        <label class="f-label">Registration number</label>
        <input class="f-inp" id="sReg" placeholder="KA 05 MV 1234" oninput="formatRegVisible(this)"/>
      </div>
      <button class="btn btn-dark btn-block" onclick="sellNext(2)">Continue →</button>
    </div>

    <!-- STEP 2 -->
    <div class="sell-card" id="sellStep2" style="display:none;">
      <div class="dropzone" id="sellDrop" style="cursor:default;">
        <div class="dz-icon"><svg fill="none" stroke-width="2" viewBox="0 0 24 24"><path d="M3 16.5V19a2 2 0 002 2h14a2 2 0 002-2v-2.5M12 3v13m0-13l-4 4m4-4l4 4" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        <div class="dz-title">Add photos of your bike</div>
        <div class="dz-sub" style="margin-bottom:16px;">Drag &amp; drop or use the buttons below</div>
        <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
          <button class="btn btn-dark btn-sm" onclick="document.getElementById('sellFileCam').click()">📷 Take Photo</button>
          <button class="btn btn-light btn-sm" onclick="document.getElementById('sellFileGal').click()">📁 Upload Gallery</button>
        </div>
      </div>
      <input type="file" id="sellFileCam" accept="image/*" capture="environment" multiple hidden onchange="addSellPhotos(this.files)"/>
      <input type="file" id="sellFileGal" accept="image/*" multiple hidden onchange="addSellPhotos(this.files)"/>
      <div class="preview-grid" id="sellPreviews"></div>
      <div class="up-tip">
        <svg fill="none" stroke-width="2" viewBox="0 0 24 24"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <span>Better photos = faster, more accurate quote. Natural daylight works best. You can skip this and send photos on WhatsApp later.</span>
      </div>
      <div style="display:flex;gap:10px;margin-top:20px;">
        <button class="btn btn-light" onclick="sellNext(1)">← Back</button>
        <button class="btn btn-dark" style="flex:1;justify-content:center;" onclick="computeEstimate()">Get my estimate →</button>
      </div>
    </div>

    <!-- STEP 3 -->
    <div class="sell-card" id="sellStep3" style="display:none;">
      <div class="estimate-card">
        <div class="est-label">Estimated value</div>
        <div class="est-value" id="estValue">₹1,18,000</div>
        <div class="est-range" id="estRange">Range: ₹1,10,000 – ₹1,26,000</div>
        <div class="est-note">Final offer after a free 15-minute physical inspection at our Bengaluru showroom. Instant bank transfer on agreement.</div>
      </div>
      <div class="f-row" style="margin-top:22px;">
        <label class="f-label">Your name</label>
        <input class="f-inp" id="sName" placeholder="Full name"/>
      </div>
      <div class="f-row">
        <label class="f-label">Mobile number</label>
        <input class="f-inp" id="sPhone" placeholder="+91"/>
      </div>
      <button class="btn btn-gold btn-block" onclick="submitSell()">Lock my estimate &amp; book inspection</button>
      <button class="btn btn-light btn-block" style="margin-top:10px;" onclick="sellNext(1)">Start over</button>
    </div>
  </div>
</section>

<!-- ═══════ HOW ═══════ -->
<section class="section" id="how">
  <div class="sec-head"><div><h2>How it <em>works</em></h2></div></div>
  <div class="how">
    <div class="how-card">
      <div class="how-num">1</div>
      <h3>Inspect from home</h3>
      <p>Every bike carries real gallery photos and a 36-frame 360° spin. Zoom into the tank, the chain, the odometer — before you leave your couch.</p>
    </div>
    <div class="how-card">
      <div class="how-num">2</div>
      <h3>Ride before you decide</h3>
      <p>Book a test ride slot in two taps. Bikes are fuelled and ready at our Bengaluru showroom. No obligation, ever.</p>
    </div>
    <div class="how-card">
      <div class="how-num">3</div>
      <h3>Paperwork, done for you</h3>
      <p>RC transfer, insurance, finance — our desk handles everything the same day. After the sale, our <b>Bengaluru Service Centre</b> keeps your Enfield in top shape.</p>
    </div>
  </div>
</section>

<!-- ═══════ EXPERT LINE BANNER ═══════ -->
<section style="max-width:1180px;margin:0 auto;padding:0 24px 70px;">
  <div style="background:var(--ink);border-radius:var(--radius);padding:40px 44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;">
    <div>
      <div style="font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mustard);margin-bottom:8px;">Talk to a Re-Own expert</div>
      <div style="font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:clamp(22px,3vw,32px);font-weight:600;letter-spacing:.5px;color:#fff;">Re-Own Expert Line · <a href="tel:+919035045535" onclick="callUs();return false;" style="color:var(--mustard);text-decoration:none;">+91 90350 45535</a></div>
      <div style="font-size:14px;color:rgba(255,255,255,.55);margin-top:8px;max-width:520px;">Not sure which model fits you? Questions on condition, finance, or exchange? Our specialists answer directly — no call centre. Post-sale service &amp; repairs at our <b style="color:rgba(255,255,255,.85);">Bengaluru Service Centre</b>.</div>
    </div>
    <div style="display:flex;gap:12px;flex-wrap:wrap;">
      <a href="tel:+919035045535" class="btn" style="background:var(--gold);color:#fff;" onclick="callUs();return false;">📞 Call the Expert Line</a>
      <button class="btn" style="background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.2);" onclick="window.open('https://wa.me/919035045535?text='+encodeURIComponent('Hi! I have a question for the Re-Own Expert Line.'),'_blank')">WhatsApp instead</button>
    </div>
  </div>
</section>

<?php include 'footer.php'; ?>