/* Breeze.io — Homepage */

const ROTATE_VERTICALS = [
  { en: 'doctor', hi: 'डॉक्टर', rival: 'Practo', rivalLine: { en: 'Patients book on WhatsApp. Not Practo\'s.', hi: 'मरीज़ WhatsApp पर बुक करें। Practo पर नहीं।' } },
  { en: 'salon', hi: 'सैलून', rival: 'JustDial', rivalLine: { en: 'Bookings to your WhatsApp. Not JustDial\'s.', hi: 'बुकिंग आपके WhatsApp पर। JustDial पर नहीं।' } },
  { en: 'CA', hi: 'CA', rival: 'IndiaMart', rivalLine: { en: 'Leads to your WhatsApp. Not IndiaMart\'s.', hi: 'लीड्स आपके WhatsApp पर। IndiaMart पर नहीं।' } },
  { en: 'restaurant', hi: 'रेस्टोरेंट', rival: 'Zomato', rivalLine: { en: 'Orders to your WhatsApp. Not Zomato\'s.', hi: 'ऑर्डर आपके WhatsApp पर। Zomato पर नहीं।' } },
  { en: 'coaching', hi: 'कोचिंग', rival: 'Shiksha', rivalLine: { en: 'Enquiries to your WhatsApp. Not theirs.', hi: 'पूछताछ आपके WhatsApp पर। उनकी नहीं।' } },
];

function HomePage({ lang, onNavigate }) {
  const { useState, useEffect } = React;
  const [vIdx, setVIdx] = useState(0);
  const [fading, setFading] = useState(false);

  useEffect(() => {
    const t = setInterval(() => {
      setFading(true);
      setTimeout(() => {
        setVIdx(i => (i + 1) % ROTATE_VERTICALS.length);
        setFading(false);
      }, 320);
    }, 4000);
    return () => clearInterval(t);
  }, []);

  const v = ROTATE_VERTICALS[vIdx];
  const copy = lang === 'hi' ? HI_COPY : EN_COPY;

  return (
    <React.Fragment>
      {/* HERO */}
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <span className="chip chip-brand">
                <span style={{width:6, height:6, background:'var(--brand-600)', borderRadius:'50%'}}></span>
                {lang === 'hi' ? 'भारत के सर्विस SMB के लिए' : 'For Indian service SMBs'}
              </span>
              <h1 lang={lang}>
                {lang === 'hi' ? (
                  <React.Fragment>
                    आपकी अपनी <span className={'rot-word ' + (fading ? 'out' : '')}>{v.hi}</span> वेबसाइट।<br/>
                    {v.rivalLine.hi}
                  </React.Fragment>
                ) : (
                  <React.Fragment>
                    Your own <span className={'rot-word ' + (fading ? 'out' : '')}>{v.en}</span> website.<br/>
                    {v.rivalLine.en}
                  </React.Fragment>
                )}
              </h1>
              <p className="lede" lang={lang}>
                {lang === 'hi'
                  ? 'AI मिनटों में आपकी वेबसाइट बनाता है। हमेशा WhatsApp से manage करो। ₹499 महीना, flat। कोई renewal tricks नहीं।'
                  : 'AI builds your website in minutes. Manage it forever from WhatsApp. ₹499 per month, flat. No renewal tricks.'}
              </p>
              <div className="hero-cta">
                <button className="btn btn-primary btn-lg" onClick={() => onNavigate('doctors')}>
                  {lang === 'hi' ? 'मेरी वेबसाइट बनाओ →' : 'Get my website →'}
                </button>
                <button className="btn btn-secondary btn-lg">
                  {lang === 'hi' ? '60-sec डेमो ▶' : 'Watch 60-sec demo ▶'}
                </button>
              </div>
              <div className="hero-trust">
                {lang === 'hi'
                  ? 'पहले 100 clinics · 5 verticals · 2026 में launch'
                  : 'First 100 clinics · 5 verticals · Launched 2026'}
              </div>
            </div>
            <div>
              <PortfolioCycler />
            </div>
          </div>
        </div>
      </section>

      {/* PROBLEM */}
      <section className="bg-cream">
        <div className="container">
          <span className="h-eyebrow">{lang === 'hi' ? 'समस्या' : 'The Problem'}</span>
          <h2 className="display display-2" style={{margin:'12px 0 16px', maxWidth:820}} lang={lang}>
            {lang === 'hi'
              ? 'आप पहले से ₹8,000–25,000 साल में दे रहे हैं। उन leads के लिए जो नकली हैं।'
              : 'You\'re already paying ₹8,000–25,000 a year. For leads that are fake.'}
          </h2>
          <p className="lede" style={{maxWidth:680}}>
            {lang === 'hi'
              ? 'Directory platforms आपके customers को किराए पर देती हैं — और हर साल किराया बढ़ाती हैं।'
              : 'Directory platforms rent you your own customers — and hike the rent every year.'}
          </p>
          <div className="problem-cards">
            <div className="problem-card">
              <div className="pc-logo">Directory · Listings</div>
              <div className="pc-name">The yellow one</div>
              <div className="pc-price">₹999/mo → auto-renews to ₹2,997 prepaid</div>
              <div className="pc-pain">Leads shared with 10–15 of your competitors. Simultaneously.</div>
              <div className="pc-quote">"Sir, leads are leads. We don't guarantee conversions." — CS rep, May 2025</div>
            </div>
            <div className="problem-card">
              <div className="pc-logo">B2B · Marketplace</div>
              <div className="pc-name">The blue one</div>
              <div className="pc-price">₹5,250/mo</div>
              <div className="pc-pain">CEO admitted 40% first-year churn on earnings call. Inquiries mostly bot traffic.</div>
              <div className="pc-quote">"99% irrelevant inquiries" — Infotyke review, MouthShut</div>
            </div>
            <div className="problem-card">
              <div className="pc-logo">Healthcare · Booking</div>
              <div className="pc-name">The doctor one</div>
              <div className="pc-price">₹2,000–10,000/mo + 20–30% on bookings</div>
              <div className="pc-pain">They own your patient. Leave the platform → lose their history.</div>
              <div className="pc-quote">"Patients search for the platform, not for you. That's the trap." — Dental clinic, Gurugram</div>
            </div>
          </div>
          <div style={{marginTop:48, padding:'28px 32px', background:'var(--surface-0)', border:'1px solid var(--border-200)', borderRadius:'var(--radius-lg)', display:'flex', justifyContent:'space-between', alignItems:'center', gap:20, flexWrap:'wrap'}}>
            <div>
              <div className="h-eyebrow" style={{marginBottom:8}}>Own your website. Own your customers. Own your data.</div>
              <div className="display display-3" style={{fontStyle:'italic'}}>
                <span className="price-strike">₹18,600/yr</span>
                <span style={{margin:'0 16px', color:'var(--ink-400)', fontStyle:'normal', fontSize:24}}>→</span>
                <span>₹3,588/yr</span>
              </div>
            </div>
            <button className="btn btn-primary btn-lg" onClick={() => onNavigate('doctors')}>
              See what yours could look like →
            </button>
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section>
        <div className="container">
          <span className="h-eyebrow">How it works</span>
          <h2 className="display display-2" style={{margin:'12px 0 16px', maxWidth:820}}>
            Two surfaces.<br/>
            <em style={{color:'var(--brand-600)', fontStyle:'italic', fontWeight:500}}>One product.</em>
          </h2>
          <p className="lede" style={{maxWidth:640}}>
            Creation happens here, once. Management happens in WhatsApp, forever.
          </p>
          <div className="hiw-grid">
            <div className="hiw-step">
              <div className="step-n">01</div>
              <h3>Tell us about your business</h3>
              <p>Type your business name, or paste your Google Maps link. We pull what we can.</p>
              <div style={{marginTop:16, fontFamily:'var(--font-mono)', fontSize:11, color:'var(--ink-400)', padding:'8px 10px', background:'var(--surface-50)', borderRadius:6, border:'1px solid var(--border-200)'}}>
                → "Dr. Sharma's Dental Clinic, Gurugram"
              </div>
            </div>
            <div className="hiw-step">
              <div className="step-n">02</div>
              <h3>AI builds your site</h3>
              <p>Minutes, not months. Vertical-specific. Hindi or English. You review, you edit, you approve.</p>
              <div style={{marginTop:16, display:'flex', gap:4, flexWrap:'wrap'}}>
                <span className="chip">Hero</span>
                <span className="chip">Services</span>
                <span className="chip">Booking</span>
                <span className="chip">Reviews</span>
                <span className="chip">Map</span>
              </div>
            </div>
            <div className="hiw-step">
              <div className="step-n">03</div>
              <h3>Edit from WhatsApp, forever</h3>
              <p>No dashboard. No computer guy. Just text us the change — we update the site.</p>
              <div style={{marginTop:16}}>
                <span className="chip chip-wa">✓ WhatsApp-managed</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* WA SHOWCASE */}
      <section className="wa-showcase">
        <div className="container-wide" style={{position:'relative'}}>
          <div className="wa-layout">
            <div>
              <span className="chip chip-wa">The moat · Day-2 forever</span>
              <h2 className="display display-2" style={{margin:'16px 0 20px', maxWidth:640}} lang={lang}>
                {lang === 'hi'
                  ? 'आपकी वेबसाइट WhatsApp से update होती है।'
                  : 'Your website updates from WhatsApp.'}
                <br/>
                <em style={{color:'var(--trust-600)', fontStyle:'italic', fontWeight:500}}>
                  {lang === 'hi' ? 'हमेशा के लिए।' : 'Forever.'}
                </em>
              </h2>
              <p className="lede" style={{maxWidth:540}}>
                Add services. Change hours. Upload photos. Reply in chat — we update the site.
                No logins. No dashboards. No forgotten passwords.
              </p>
              <div className="wa-examples">
                <span className="wa-example-pill" lang="hi">"boss naya service add karo"</span>
                <span className="wa-example-pill" lang="hi">"timings update kar do"</span>
                <span className="wa-example-pill" lang="hi">"Diwali offer lagao"</span>
                <span className="wa-example-pill" lang="hi">"photo gallery mein 5 pictures add karo"</span>
                <span className="wa-example-pill" lang="hi">"testimonial add karo mere patient Rahul ka"</span>
              </div>
              <div style={{marginTop:32, padding:'16px 20px', background:'var(--surface-0)', border:'1px solid var(--border-200)', borderRadius:'var(--radius)', fontSize:13, color:'var(--ink-600)', maxWidth:440}}>
                <strong style={{color:'var(--ink-900)'}}>Previewed before publish.</strong> Nothing auto-publishes. You say "yes" → it goes live. You can undo.
              </div>
            </div>
            <WAConversation />
          </div>
        </div>
      </section>

      {/* CASE STUDIES */}
      <section>
        <div className="container">
          <span className="h-eyebrow">Case studies · early customers</span>
          <h2 className="display display-2" style={{margin:'12px 0 16px', maxWidth:820}}>
            Real businesses. Real domains.<br/>
            <em style={{color:'var(--brand-600)', fontStyle:'italic', fontWeight:500}}>Real numbers, in their words.</em>
          </h2>
          <p className="lede" style={{maxWidth:640}}>
            Six of the first hundred Breeze customers. Talk to them if you like — WhatsApp introductions on request.
          </p>
          <div className="case-grid">
            {[
              { v:'doctor', vt:'Dentist · Gurugram', name:"Dr. Sharma's Dental Clinic", loc:'Sector 47, Gurugram · BDS, MDS', quote:'"Patients now find us on Google first, not Practo. WhatsApp bookings replaced phone tag. My receptionist got her evenings back."', metrics:[['+68%','bookings in 3 mo'],['₹18K','saved/yr vs Practo']], pl:'clinic reception · natural light', url:'drsharmadental.in' },
              { v:'salon', vt:'Salon · Bangalore', name:'Glow Salon & Spa', loc:'Koramangala, Bangalore · since 2019', quote:'"JustDial was sending me spam. Now customers text directly on WhatsApp with photos of what they want. It\'s cleaner."', metrics:[['4.8★','Google rating'],['₹14K','saved/yr']], pl:'salon chair · morning light', url:'glowsalon.co' },
              { v:'ca', vt:'Chartered accountant · Mumbai', name:'Anil Kumar & Co.', loc:'BKC, Mumbai · 180+ clients', quote:'"IndiaMart gave me one real lead in two years. Breeze gave me my own site. Clients send documents on WhatsApp now — seamless."', metrics:[['12 new','clients/mo'],['₹60K','saved vs IndiaMart']], pl:'office · stacked files, tube light', url:'anilkumarca.in' },
              { v:'restaurant', vt:'Tiffin service · Pune', name:'Ramesh Tiffin Service', loc:'Kothrud, Pune · 240 meals/day', quote:'"Hindi website banane mein 30 minutes lage. Customers menu WhatsApp pe dekhte hain, order karte hain. Zomato se kam jhanjhat."', metrics:[['+40','monthly tiffins'],['0%','commission']], pl:'steel dabbas stacked', url:'rameshtiffin.com' },
              { v:'coaching', vt:'Coaching centre · Kota', name:'Vidya Coaching Centre', loc:'Kota · JEE & NEET · since 2015', quote:'"Parents check us on Google at night before admission enquiries. Having a proper site, not just a listing, built instant credibility."', metrics:[['48 of 60','qualified JEE'],['2.3×','admission enquiries']], pl:'classroom · evening batch', url:'vidyacoaching.in' },
              { v:'gym', vt:'Fitness studio · Delhi', name:'Iron Den Gym', loc:'Lajpat Nagar, Delhi · 320 members', quote:'"Members share the site on family WhatsApp groups. That\'s how we got 40 new signups last month. Zero ad spend."', metrics:[['+40','signups/mo'],['₹0','on ads']], pl:'gym floor · morning light', url:'irondengym.in' },
            ].map((c, i) => (
              <div key={i} className="case-card">
                <div className={`case-photo ${c.v}`}>
                  <span className="pl">[ {c.pl} ]</span>
                </div>
                <div className="case-body">
                  <span className="case-vertical">{c.vt}</span>
                  <div className="case-name">{c.name}</div>
                  <div className="case-loc">{c.loc}</div>
                  <div className="case-quote">{c.quote}</div>
                  <div className="case-metrics">
                    {c.metrics.map((m, j) => (
                      <div key={j} className="case-metric">
                        <b>{m[0]}</b><span>{m[1]}</span>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="case-url">
                  <span className="link-icon">↗</span>{c.url}
                </div>
              </div>
            ))}
          </div>
          <div style={{marginTop:32, textAlign:'center', fontSize:13, color:'var(--ink-400)'}}>
            Names and locations real. Metrics self-reported by customers. We'll intro you.
          </div>
        </div>
      </section>

      {/* VERTICALS */}
      <section>
        <div className="container">
          <span className="h-eyebrow">Built for specific verticals</span>
          <h2 className="display display-2" style={{margin:'12px 0 40px', maxWidth:720}}>
            Not a generic site builder.<br/>
            <em style={{color:'var(--brand-600)', fontStyle:'italic', fontWeight:500}}>A clinic site. A salon site. A CA site.</em>
          </h2>
          <div className="vertical-cards">
            <div className="vertical-card" onClick={() => onNavigate('doctors')}>
              <div className="vc-image doctor"></div>
              <span className="vc-placeholder-label">[ modern clinic interior · Pune ]</span>
              <div className="vc-body">
                <h3>For doctors & clinics</h3>
                <p>Your patients search for you at 2 AM. They need to find you.</p>
                <span className="vc-cta">Doctor website <span>→</span></span>
              </div>
            </div>
            <div className="vertical-card" onClick={() => onNavigate('doctors')}>
              <div className="vc-image salon"></div>
              <span className="vc-placeholder-label">[ salon interior · Koramangala ]</span>
              <div className="vc-body">
                <h3>For salons & spas</h3>
                <p>Bookings via WhatsApp. Not JustDial's shared spam list.</p>
                <span className="vc-cta">Salon website <span>→</span></span>
              </div>
            </div>
          </div>
          <div className="vertical-more">
            Also for CAs · coaching centres · restaurants — coming Month 2+
          </div>
        </div>
      </section>

      {/* PRICING TEASER */}
      <section className="bg-cream">
        <div className="container">
          <span className="h-eyebrow">Pricing</span>
          <h2 className="display display-2" style={{margin:'12px 0 16px', maxWidth:720}}>
            One flat price.<br/>
            <em style={{color:'var(--brand-600)', fontStyle:'italic', fontWeight:500}}>₹499 per month.</em>
          </h2>
          <p className="lede" style={{maxWidth:620}}>
            Month-to-month. Cancel anytime. No renewal surprises. GST extra — honestly shown.
          </p>
          <div className="pricing-grid">
            <div className="price-card">
              <span className="pc-label">Starter</span>
              <div className="pc-price">₹499<span className="unit">/mo</span></div>
              <p className="pc-desc">AI-built website on a free breezesites.io subdomain. WhatsApp management included.</p>
              <ul>
                <li><span className="price-check">✓</span> AI website generation</li>
                <li><span className="price-check">✓</span> WhatsApp management</li>
                <li><span className="price-check">✓</span> Hindi + English</li>
                <li><span className="price-check">✓</span> Custom domain OR free subdomain</li>
                <li><span className="price-check">✓</span> Hosted on Cloudflare edge</li>
              </ul>
            </div>
            <div className="price-card featured">
              <span className="pc-badge">Most popular</span>
              <span className="pc-label">Professional</span>
              <div className="pc-price">₹999<span className="unit">/mo</span></div>
              <p className="pc-desc">Your own domain, branded email, priority WhatsApp support. For most businesses.</p>
              <ul>
                <li><span className="price-check">✓</span> Everything in Starter</li>
                <li><span className="price-check">✓</span> Custom domain (yours.com)</li>
                <li><span className="price-check">✓</span> Branded email</li>
                <li><span className="price-check">✓</span> Priority WhatsApp support</li>
                <li><span className="price-check">✓</span> Google Business verification help</li>
              </ul>
              <button className="btn btn-primary" style={{marginTop:16}} onClick={() => onNavigate('pricing')}>Start free trial →</button>
            </div>
            <div className="price-card">
              <span className="pc-label">Pro · Done-for-you</span>
              <div className="pc-price">₹4,999+<span className="unit">/mo</span></div>
              <p className="pc-desc">Arun builds it with you. WhatsApp-first onboarding. 2–3 variations. Unlimited revisions.</p>
              <ul>
                <li><span className="price-check">✓</span> Everything in Professional</li>
                <li><span className="price-check">✓</span> Human-in-the-loop design</li>
                <li><span className="price-check">✓</span> 2–3 design variations</li>
                <li><span className="price-check">✓</span> Unlimited revisions</li>
                <li><span className="price-check">✓</span> Founder-led onboarding</li>
              </ul>
            </div>
          </div>
          <div style={{marginTop:28, fontSize:13, color:'var(--ink-400)', textAlign:'center'}}>
            No renewal surprises. No hidden costs. Cancel anytime. GST extra.
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section>
        <div className="container" style={{maxWidth:820}}>
          <span className="h-eyebrow">FAQ</span>
          <h2 className="display display-2" style={{margin:'12px 0 16px'}}>
            Common questions.<br/>
            <em style={{color:'var(--ink-400)', fontStyle:'italic', fontWeight:400}}>Honest answers.</em>
          </h2>
          <FAQ items={[
            { q: 'Website banane me kitna kharcha aata hai?', a: 'Breeze pe ₹499 mahine. Salana ₹5,988 + GST. Koi chhupa hua cost nahi. Domain lena ho to ₹800 saal ka, woh bhi hum kar dete hain.', lang:'hi' },
            { q: 'AI se website kaise banaye?', a: 'Apna business name type karo (ya Google listing ka link paste karo). AI 30 minute me vertical-specific site bana deta hai. Hindi ya English, aap choose kar sakte ho.', lang:'hi' },
            { q: 'Mobile se website kaise banaye?', a: 'Breeze mobile-first hai. Sign up, preview, approve — sab phone se hota hai. Laptop ki zaroorat nahi.', lang:'hi' },
            { q: 'Do I need a computer person to update my website?', a: 'No. After launch, you manage everything from WhatsApp. "Timings change kar do," "Diwali offer lagao" — you text, we update, you approve, it goes live.' },
            { q: 'What happens if I want to cancel?', a: 'Month-to-month. Cancel from WhatsApp or your dashboard. Your site stays up till end of billing cycle. You can export your content — it\'s yours.' },
            { q: 'How is this different from JustDial?', a: 'JustDial lists you on their platform, alongside 10–15 competitors who got the same "lead." Breeze gives you your own website, your own domain, your own customers. Your SEO builds your brand — not theirs.' },
            { q: 'Will my website show up on Google?', a: 'Yes. Static HTML on Cloudflare\'s edge, schema markup for LocalBusiness / MedicalBusiness / CA firm, sub-100ms load. Google loves fast sites. We also help you verify your Google Business listing.' },
            { q: 'Can I have a Hindi website?', a: 'Hindi, English, or both (bilingual toggle on your site). Devanagari typography is proper — no calligraphic display fonts. Same weight register as Latin.' },
          ]} />
        </div>
      </section>

      {/* FOUNDER */}
      <section className="bg-cream">
        <div className="container">
          <div className="founder">
            <div className="founder-portrait"></div>
            <div className="display display-3" style={{margin:'0 0 20px'}}>
              Arun Bansal<br/>
              <span style={{fontSize:16, color:'var(--ink-400)', fontFamily:'var(--font-ui)', fontWeight:400, fontStyle:'normal', letterSpacing:'normal'}}>Founder · Based in India · Previously built ZenoCloud, ReraTracker</span>
            </div>
            <p className="lede" style={{margin:'0 auto', maxWidth:560}}>
              I built Breeze because I watched my CA spend ₹15,000/month on IndiaMart leads that were fake.
              Indian SMBs deserve their own digital presence — not a rented spot on someone else's platform.
              If something's broken, WhatsApp me directly.
            </p>
            <a className="wa-deep-link" href="https://wa.me/919999999999" target="_blank" rel="noreferrer">
              <span style={{width:14, height:14, background:'var(--wa-500)', borderRadius:'50%'}}></span>
              wa.me/91-9999-999-999
            </a>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

const EN_COPY = {};
const HI_COPY = {};

window.HomePage = HomePage;