/* Breeze.io — Doctor LP, vs/JustDial, Pricing pages */

function DoctorPage({ onNavigate, lang }) {
  return (
    <React.Fragment>
      <section className="doctor-hero">
        <div className="container">
          <div className="doctor-hero-grid">
            <div>
              <span className="chip chip-brand">
                <span style={{width:6, height:6, background:'var(--brand-600)', borderRadius:'50%'}}></span>
                For doctors & clinics
              </span>
              <h1>
                Your clinic's website.<br/>
                <em>Patients book on WhatsApp.</em><br/>
                Own your patient relationship.
              </h1>
              <p className="lede" style={{maxWidth:540, marginBottom:28}}>
                Stop paying Practo ₹2,000–10,000/mo to rent your own patients.
                ₹499/mo flat. Hindi + English. 100+ clinics live.
              </p>
              <div className="hero-cta">
                <button className="btn btn-primary btn-lg" onClick={() => onNavigate('pricing')}>
                  Build my clinic website →
                </button>
                <button className="btn btn-secondary btn-lg">
                  See a real doctor demo ↗
                </button>
              </div>
              <div className="hero-trust">
                100+ clinics · Dentistry, GP, pediatrics, derm · LocalBusiness schema shipped
              </div>
            </div>
            <div className="clinic-mock">
              <div className="mini-site">
                <div className="ms-nav">
                  <span>Services</span><span>Team</span><span>Book</span><span>Reviews</span><span>Contact</span>
                </div>
                <div className="ms-hero">Dr. Sharma's Dental</div>
                <div className="ms-sub">Painless dentistry in Sector 47, Gurugram. Same-day appointments. BDS, MDS (AIIMS).</div>
                <div className="ms-photo">[ clinic reception · natural light ]</div>
                <div style={{display:'flex', gap:6, marginTop:4}}>
                  <span className="ms-btn">Book on WhatsApp →</span>
                  <span style={{padding:'6px 12px', background:'var(--surface-50)', fontSize:11, borderRadius:6, color:'var(--ink-700)', border:'1px solid var(--border-200)'}}>Call clinic</span>
                </div>
                <div className="ms-info-row">
                  <div><b>9 AM – 8 PM</b>Mon–Sat</div>
                  <div><b>3,200+</b>Patients</div>
                  <div><b>4.9 ★</b>Google</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PRACTO TRAP */}
      <section className="bg-cream">
        <div className="container">
          <span className="h-eyebrow">The Practo trap</span>
          <h2 className="display display-2" style={{margin:'12px 0 16px', maxWidth:820}}>
            You're not their customer.<br/>
            <em style={{color:'var(--brand-600)', fontStyle:'italic', fontWeight:500}}>You're their inventory.</em>
          </h2>
          <p className="lede" style={{maxWidth:620}}>
            A 12-month look at what you actually pay, and what you actually own.
          </p>
          <table className="compare-table">
            <thead>
              <tr>
                <th></th>
                <th>Practo Prime</th>
                <th>Breeze Professional</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th className="row-head">Cost (12 months)</th>
                <td className="c-bad">₹24,000 – 1,20,000/yr</td>
                <td className="c-good">₹11,988/yr flat</td>
              </tr>
              <tr>
                <th className="row-head">Commission on bookings</th>
                <td className="c-bad">Yes — per booking</td>
                <td className="c-good">None</td>
              </tr>
              <tr>
                <th className="row-head">Patient relationship</th>
                <td className="c-bad">Owned by Practo</td>
                <td className="c-good">Owned by you</td>
              </tr>
              <tr>
                <th className="row-head">Leaving the platform</th>
                <td className="c-bad">You lose patient history</td>
                <td className="c-good">You keep everything</td>
              </tr>
              <tr>
                <th className="row-head">Listed alongside</th>
                <td className="c-bad">8–15 competitors in the same search</td>
                <td className="c-good">Only you. Your domain. Your brand.</td>
              </tr>
              <tr>
                <th className="row-head">Hindi</th>
                <td className="c-bad">Minimal</td>
                <td className="c-good">First-class</td>
              </tr>
            </tbody>
          </table>
          <div style={{marginTop:32, padding:'24px 28px', background:'var(--ink-900)', color:'#F3EEE4', borderRadius:'var(--radius-lg)', fontFamily:'var(--font-display)', fontSize:22, fontWeight:380, lineHeight:1.3, letterSpacing:'-0.01em', fontVariationSettings:'"SOFT" 30'}}>
            <em style={{color:'var(--brand-600)', fontStyle:'italic'}}>If you leave Practo tomorrow</em>, you lose your patient history.<br/>
            <em style={{color:'var(--trust-600)', fontStyle:'italic'}}>If you leave Breeze tomorrow</em>, you keep everything.
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section>
        <div className="container">
          <span className="h-eyebrow">What your clinic site includes</span>
          <h2 className="display display-2" style={{margin:'12px 0 16px'}}>
            Purpose-built for healthcare.
          </h2>
          <p className="lede" style={{maxWidth:620}}>
            Not a generic site with a "medical template." Schema, compliance, and clinic-specific UX out of the box.
          </p>
          <div className="feature-grid">
            {[
              ['📅', 'Appointment booking', 'Time-slot picker → WhatsApp confirmation. No third-party login needed.'],
              ['★', 'Google Reviews + testimonials', 'Embed reviews directly. Structured data boosts local rankings.'],
              ['₹', 'Services + pricing list', 'Clear fee structure. Or hide it if you prefer — your choice.'],
              ['🕐', 'Hours + holiday closures', 'Holiday calendar built-in. Diwali, Holi, clinic-specific off days.'],
              ['📍', 'Google Maps embed', 'Directions, landmarks, parking notes. Mobile-optimized.'],
              ['⚕', 'MedicalBusiness schema', 'MBBS, MD, MDS, specialty — machine-readable for Google & AI crawlers.'],
              ['👤', 'Doctor profile', 'Person schema for each doctor. Photos, credentials, bio.'],
              ['🏥', 'Multiple locations', 'Branch listings if your clinic has more than one location.'],
              ['🚨', 'Emergency contact', 'Prominent emergency number. After-hours WhatsApp if you offer it.'],
            ].map(([icon, h, p], i) => (
              <div key={i} className="feature-cell">
                <div className="fc-icon">{icon}</div>
                <h4>{h}</h4>
                <p>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DOCTOR FAQ */}
      <section className="bg-cream">
        <div className="container" style={{maxWidth:820}}>
          <span className="h-eyebrow">Doctor-specific questions</span>
          <h2 className="display display-2" style={{margin:'12px 0 16px'}}>
            FAQ for clinics.
          </h2>
          <FAQ items={[
            { q: 'Will patients book appointments directly?', a: 'Yes. They pick a time slot on your site → a WhatsApp message lands in your inbox confirming details. No third-party booking platform, no commission.' },
            { q: 'What if I use Practo Ray? Can I migrate?', a: 'Yes. We\'ll import your patient directory (if exportable from Practo Ray) and help you notify existing patients of your new site. Typical migration: 1 week.' },
            { q: 'Can I add multiple doctors from my clinic?', a: 'Yes. Each doctor gets their own Person-schema profile. Specialty, credentials, photo, available slots.' },
            { q: 'What about DCI / MCI registration display?', a: 'Registration numbers can be displayed (state-mandated in most cases). We surface them cleanly in the footer and in each doctor\'s profile.' },
            { q: 'Will my site rank on Google for "dentist near me"?', a: 'With MedicalBusiness schema, local SEO, and a fast static site, yes — within 4–8 weeks, given consistent Google Business profile + reviews. We help with all three.' },
          ]} />
        </div>
      </section>

      {/* PRICING REPEAT + CTA */}
      <section>
        <div className="container" style={{textAlign:'center'}}>
          <span className="h-eyebrow">Ready?</span>
          <h2 className="display display-1" style={{margin:'16px auto 20px', maxWidth:780}}>
            ₹499/mo.<br/>
            <em style={{color:'var(--brand-600)', fontStyle:'italic', fontWeight:500}}>Your patients. Your data. Forever.</em>
          </h2>
          <div style={{display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap', marginTop:32}}>
            <button className="btn btn-primary btn-lg" onClick={() => onNavigate('pricing')}>See full pricing →</button>
            <button className="btn btn-secondary btn-lg" onClick={() => onNavigate('vs')}>Or: vs JustDial ↗</button>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

/* ---------- VS PAGE (JustDial / IndiaMart tabs) ---------- */
const VS_DATA = {
  justdial: {
    label: 'JustDial',
    tag: 'Local directory',
    quote: "Sir, leads are leads. We don't guarantee conversions.",
    cite: '— JustDial customer service representative, May 2025 · source: Infotyke complaint on MouthShut',
    rows: [
      ['Price', '₹999/mo (₹2,997 prepaid, auto-renews) → ₹8,000–25,000/yr', '₹499/mo flat'],
      ['Leads', 'Shared with 10–15 competitors simultaneously', 'Yours. Direct to your WhatsApp.'],
      ['Auto-renewal', 'ECS debit. Reports of cancellation difficulty.', 'Month-to-month. Cancel in-app.'],
      ['Fake-lead rate', '"99.99% irrelevant" — customer reviews', '0. Customers contact you directly.'],
      ['Ownership', 'Your listing sits on their platform.', 'You own the domain, content, customer data.'],
      ['Google visibility', 'Visible through their 20-year domain authority — to their benefit.', 'You build your own authority over time.'],
      ['Hindi support', 'Platform mostly English.', 'Hindi + English, first-class.'],
    ],
    framing: "Not trying to replace JustDial. Adding to it.",
    framingBody: "Keep your JustDial listing if you want. Breeze doesn't compete on directory listings — it gives you an owned digital property alongside. Your Breeze site + your existing listings + your Google Business = a customer-acquisition stack you actually control.",
  },
  indiamart: {
    label: 'IndiaMart',
    tag: 'B2B marketplace',
    quote: "99% of the enquiries are irrelevant or bots. You pay for noise.",
    cite: '— IndiaMart customer review, MouthShut · 2025. CEO admitted 40% first-year churn on Q3 earnings call.',
    rows: [
      ['Price', '₹5,250/mo → ₹63,000/yr (Star subscription)', '₹499/mo flat'],
      ['Lead quality', 'Mass-sent to all suppliers on keyword match. Copy-paste enquiries.', 'Customers find you, then WhatsApp directly.'],
      ['Churn', '40% in year one (admitted publicly by CEO)', '< 5% monthly — customers keep their domain'],
      ['Pricing escalation', 'Starter packages upsold to Star/Supreme aggressively', 'One flat price. Always.'],
      ['Ownership', 'Catalog and leads live on indiamart.com', 'Catalog and domain live under your name.'],
      ['What you\'re buying', '"Visibility" in a marketplace you don\'t control', 'A website, SEO, and WhatsApp inbox — yours.'],
      ['Escaping the platform', 'You lose your supplier reputation score', 'You keep your domain, your content, your customers.'],
    ],
    framing: "IndiaMart solves discovery for B2B wholesale. Not for service businesses.",
    framingBody: "If you sell industrial pumps or bulk textiles, IndiaMart makes sense — their audience is wholesale buyers. If you're a service business (CA, salon, clinic, tiffin service), your customers aren't searching IndiaMart. They're searching Google. Your Breeze site is where they land.",
  },
};

function VsPage({ onNavigate }) {
  const { useState } = React;
  const [tab, setTab] = useState('justdial');
  const d = VS_DATA[tab];
  return (
    <React.Fragment>
      <section className="vs-hero">
        <div className="container">
          <span className="chip chip-caution">
            <span style={{width:6, height:6, background:'var(--caution-600)', borderRadius:'50%'}}></span>
            Competitive · Factual · Receipts in footnotes
          </span>
          <h1 className="display display-1" style={{margin:'16px 0 20px', maxWidth:900}}>
            {d.label} <em style={{color:'var(--ink-400)', fontStyle:'italic', fontWeight:400}}>vs</em> Your Own Website.
          </h1>
          <p className="lede" style={{maxWidth:680}}>
            You pay {d.label} to send leads to your competitors too. Here's what you get for a fraction of the price — for yourself only.
          </p>
          <div className="vs-tabs" role="tablist">
            <button className={tab === 'justdial' ? 'on' : ''} onClick={() => setTab('justdial')}>vs JustDial</button>
            <button className={tab === 'indiamart' ? 'on' : ''} onClick={() => setTab('indiamart')}>vs IndiaMart</button>
          </div>
          <div className="vs-quote-card">
            <blockquote>{d.quote}</blockquote>
            <cite>{d.cite}</cite>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <span className="h-eyebrow">Line by line</span>
          <h2 className="display display-2" style={{margin:'12px 0 16px'}}>
            Where the money actually goes.
          </h2>
          <table className="compare-table">
            <thead>
              <tr>
                <th></th>
                <th>{d.label}</th>
                <th>Breeze</th>
              </tr>
            </thead>
            <tbody>
              {d.rows.map((r, i) => (
                <tr key={i}>
                  <th className="row-head">{r[0]}</th>
                  <td className="c-bad">{r[1]}</td>
                  <td className="c-good">{r[2]}</td>
                </tr>
              ))}
            </tbody>
          </table>

          <div style={{marginTop:48, padding:'32px 36px', background:'var(--surface-50)', border:'1px solid var(--border-200)', borderRadius:'var(--radius-lg)', maxWidth:820}}>
            <span className="h-eyebrow">Honest framing</span>
            <h3 className="display display-3" style={{margin:'12px 0 12px'}}>{d.framing}</h3>
            <p className="muted" style={{margin:0, fontSize:15}}>{d.framingBody}</p>
          </div>

          <div style={{marginTop:48, textAlign:'center'}}>
            <button className="btn btn-primary btn-lg" onClick={() => onNavigate('doctors')}>
              Get my website + leads to my WhatsApp →
            </button>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

/* ---------- PRICING PAGE ---------- */
function PricingPage({ onNavigate }) {
  return (
    <React.Fragment>
      <section className="pricing-page-hero">
        <div className="container">
          <span className="h-eyebrow">Pricing</span>
          <h1>
            One flat price.<br/>
            <em style={{color:'var(--brand-600)', fontStyle:'italic', fontWeight:500}}>No renewal tricks.</em>
          </h1>
          <p className="lede" style={{maxWidth:580, margin:'20px auto 0'}}>
            Month-to-month. Cancel anytime. Prices in INR. GST extra, shown honestly.
          </p>
        </div>
      </section>

      <section style={{paddingTop:24}}>
        <div className="container">
          <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">Perfect first site. Free subdomain. Upgrade anytime.</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 bilingual</li>
                <li><span className="price-check">✓</span> Custom domain OR breezesites.io subdomain</li>
                <li><span className="price-check">✓</span> Cloudflare edge hosting (sub-100ms)</li>
                <li><span className="price-check">✓</span> Google Business setup help</li>
              </ul>
              <button className="btn btn-secondary" style={{marginTop:16}}>Start Starter →</button>
            </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 pc-muted">For businesses that want their own domain and branded email.</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 (you@yours.com)</li>
                <li><span className="price-check">✓</span> Priority WhatsApp support</li>
                <li><span className="price-check">✓</span> Advanced schema (LocalBusiness, etc)</li>
                <li><span className="price-check">✓</span> Analytics dashboard via WhatsApp</li>
              </ul>
              <button className="btn btn-primary" style={{marginTop:16, background:'var(--brand-600)'}}>Start Professional →</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 + team build it with you. WhatsApp-first onboarding.</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>
                <li><span className="price-check">✓</span> Dedicated WhatsApp line</li>
              </ul>
              <button className="btn btn-secondary" style={{marginTop:16}}>Enquire Pro →</button>
            </div>
          </div>

          {/* Annual */}
          <div className="annual-card">
            <div className="left">
              <h3>Go annual, lock in today's price</h3>
              <p>₹4,999/yr = ₹417 effective/mo. Starter only. Price-locked for life of subscription.</p>
            </div>
            <div className="right">
              ₹4,999<span className="unit sub" style={{marginLeft:6}}>/yr</span>
              <div className="sub">Save ₹989 vs monthly</div>
            </div>
          </div>

          {/* Cost comparison */}
          <div style={{marginTop:64}}>
            <span className="h-eyebrow">What this costs vs everything else</span>
            <h3 className="display display-3" style={{margin:'12px 0 24px', maxWidth:700}}>
              Compared, honestly.
            </h3>
            <div className="cost-list">
              <div className="cost-row">
                <span>JustDial paid listing</span>
                <span className="price">₹8,000 – 25,000/yr</span>
              </div>
              <div className="cost-row">
                <span>Practo Prime</span>
                <span className="price">₹24,000 – 1,20,000/yr</span>
              </div>
              <div className="cost-row">
                <span>Freelancer WordPress (first year)</span>
                <span className="price">₹27K – 1.1L</span>
              </div>
              <div className="cost-row">
                <span>Agency WordPress (first year)</span>
                <span className="price">₹66K – 2.7L</span>
              </div>
              <div className="cost-row highlight">
                <span>Breeze Starter — annual</span>
                <span className="price">₹5,988/yr</span>
              </div>
            </div>
            <div style={{marginTop:16, fontSize:13, color:'var(--ink-400)', fontFamily:'var(--font-mono)'}}>
              * Breeze pricing includes hosting, AI generation, WhatsApp management, and support. GST extra.
            </div>
          </div>

          {/* FAQ */}
          <div style={{marginTop:80, maxWidth:820}}>
            <span className="h-eyebrow">Pricing questions</span>
            <h3 className="display display-3" style={{margin:'12px 0 0'}}>Before you buy.</h3>
            <FAQ items={[
              { q: 'Can I cancel anytime?', a: 'Yes. Cancel from the dashboard or by sending "cancel" on WhatsApp. Your site stays live until the end of the current billing period. No cancellation fees.' },
              { q: 'Do you offer refunds?', a: 'Full refund within 7 days of signup, no questions. After 7 days, no pro-rated refunds — but you can cancel anytime and avoid future charges.' },
              { q: 'Annual vs monthly — which should I pick?', a: 'Monthly if you\'re trying it out. Annual (₹4,999) if you\'re committed — you save ~20% and lock in today\'s price. Annual is only available on Starter at signup.' },
              { q: 'What happens to my site if I cancel?', a: 'Your site goes offline at the end of the billing cycle. We keep a backup for 90 days in case you change your mind. You can export your content (HTML + images) at any time — it\'s yours.' },
            ]} />
          </div>

          <div style={{marginTop:40, padding:'16px 20px', background:'var(--surface-50)', border:'1px solid var(--border-200)', borderRadius:'var(--radius)', fontSize:13, color:'var(--ink-600)', textAlign:'center'}}>
            No renewal surprises. No hidden fees. Prices in INR. GST extra. Cancel anytime.
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { DoctorPage, VsPage, PricingPage });