// AHC Consulting — Hero, Offerings, WhatIsNabh, Benefits, Process
// Blue-dominant design matching NABH.in visual language

// ============ HERO ============
function Hero() {
  return (
    <section id="top" style={{ position: 'relative', overflow: 'hidden', background: '#08122A', height: 'calc(100vh - 68px)', display: 'flex', flexDirection: 'column' }}>

      {/* Soft blue glow — left side behind text */}
      <div style={{ position: 'absolute', top: '-10%', left: '-5%', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(21,101,192,0.22) 0%, transparent 70%)', pointerEvents: 'none' }} />

      {/* Split layout: left text | right image — flex:1 fills all space above stats bar */}
      <div style={{ position: 'relative', maxWidth: 1240, width: '100%', margin: '0 auto', padding: '0 32px', boxSizing: 'border-box', display: 'grid', gridTemplateColumns: '1fr 400px', gap: 56, alignItems: 'center', flex: 1 }}>

        {/* ── LEFT: content ── */}
        <div>
          {/* Urgency pill */}
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(248,113,113,0.12)', border: '1px solid rgba(248,113,113,0.35)', borderRadius: 9999, padding: '6px 14px', marginBottom: 20 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f87171', display: 'inline-block', animation: 'ai-pulse 1.2s ease-in-out infinite' }} />
            <span style={{ font: '600 12px var(--font-sans)', color: '#fca5a5', letterSpacing: 0.4 }}>CGHS · ECHS · PMJAY · All Insurers Now Require NABH</span>
          </div>

          {/* Headline */}
          <h1 style={{ font: '800 54px var(--font-sans)', lineHeight: 1.05, letterSpacing: '-2.5px', color: '#fff', margin: '0 0 16px' }}>
            You're losing ₹lakhs<br />
            every month.<br />
            <span style={{ color: '#42A5F5' }}>Your competitor isn't.</span>
          </h1>

          {/* One line */}
          <p style={{ font: '400 17px var(--font-sans)', color: 'rgba(255,255,255,0.52)', lineHeight: 1.6, margin: '0 0 28px', maxWidth: 460 }}>
            No NABH certification means blocked insurance empanelments and patients walking past your door.
          </p>

          {/* CTAs */}
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 18 }}>
            <button
              onClick={() => window.__openAssessment && window.__openAssessment()}
              style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: '#1565C0', color: '#fff', border: 'none', borderRadius: 10, padding: '16px 30px', font: '700 15px var(--font-sans)', cursor: 'pointer', boxShadow: '0 6px 28px rgba(21,101,192,0.55)' }}
              onMouseOver={e => e.currentTarget.style.background = '#1255A8'}
              onMouseOut={e => e.currentTarget.style.background = '#1565C0'}>
              <MicSvg size={15} stroke="#fff" />
              Check My Hospital Status — Free
            </button>
            <a href="tel:+918667370744"
              style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: 'transparent', color: '#fff', border: '1.5px solid rgba(255,255,255,0.25)', borderRadius: 10, padding: '15px 28px', font: '700 15px var(--font-sans)', textDecoration: 'none' }}
              onMouseOver={e => e.currentTarget.style.borderColor = 'rgba(255,255,255,0.55)'}
              onMouseOut={e => e.currentTarget.style.borderColor = 'rgba(255,255,255,0.25)'}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2A19.79 19.79 0 0 1 11.61 19a19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
              Call Now
            </a>
          </div>

          <p style={{ font: '400 12px var(--font-sans)', color: 'rgba(255,255,255,0.25)', margin: 0 }}>
            Free · No obligation · 5 minutes · 25+ hospitals certified across Tamil Nadu
          </p>
        </div>

        {/* ── RIGHT: hospital image card ── */}
        <div style={{ position: 'relative' }}>
          {/* Glow behind image */}
          <div style={{ position: 'absolute', inset: -20, borderRadius: 24, background: 'radial-gradient(circle, rgba(21,101,192,0.35) 0%, transparent 70%)', filter: 'blur(24px)' }} />
          <div style={{ position: 'relative', borderRadius: 20, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.10)', boxShadow: '0 32px 80px rgba(0,0,0,0.55)' }}>
            <img
              src="https://images.unsplash.com/photo-1504439468489-c8920d796a29?w=700&auto=format&q=85&fit=crop"
              alt="Hospital"
              style={{ width: '100%', height: 300, objectFit: 'cover', display: 'block' }}
            />
            {/* Overlay card on image */}
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'linear-gradient(to top, rgba(8,18,42,0.95) 0%, transparent 100%)', padding: '32px 24px 24px' }}>
              <div style={{ font: '700 15px var(--font-sans)', color: '#fff', marginBottom: 6 }}>Is your hospital NABH ready?</div>
              <div style={{ font: '400 13px var(--font-sans)', color: 'rgba(255,255,255,0.55)' }}>Get your AI readiness report in 5 minutes.</div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom stats strip */}
      <div style={{ borderTop: '1px solid rgba(255,255,255,0.07)', background: 'rgba(0,0,0,0.25)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', width: '100%', boxSizing: 'border-box' }}>
          {[
            { num: '−10%',   label: 'PMJAY revenue lost per claim' },
            { num: 'CGHS',   label: 'Empanelment blocked' },
            { num: 'ECHS',   label: 'Ex-servicemen patients lost' },
            { num: '3–5 mo', label: 'To get you fully certified' },
          ].map((s, i) => (
            <div key={s.num} style={{ padding: '22px 20px', borderRight: i < 3 ? '1px solid rgba(255,255,255,0.07)' : 'none', textAlign: 'center' }}>
              <div style={{ font: '700 26px var(--font-mono)', color: i < 3 ? '#fca5a5' : '#60a5fa', letterSpacing: '-0.5px' }}>{s.num}</div>
              <div style={{ font: '400 12px var(--font-sans)', color: 'rgba(255,255,255,0.42)', marginTop: 4 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ OFFERINGS (replaces Problems -- NABH "Our Offerings" card style) ============
function ProblemsSection() {
  const offerings = [
    {
      title: 'For Hospital Owners',
      subtitle: 'Revenue & Empanelment',
      body: 'Unlock PMJAY empanelment, earn 10% higher reimbursement rates, and qualify for government health schemes that directly improve your bottom line.',
      cta: 'View Details',
      img: 'https://images.unsplash.com/photo-1551601651-2a8555f1a136?w=600&auto=format&q=80&fit=crop',
      links: ['PMJAY Empanelment', 'Insurance Tie-ups', 'Revenue Growth'],
    },
    {
      title: 'For Quality Managers',
      subtitle: 'Systems & Compliance',
      body: 'We build all your SOPs, policies, and training programmes from scratch -- customised for your hospital, not generic templates.',
      cta: 'View Details',
      img: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=600&auto=format&q=80&fit=crop',
      links: ['SOP Development', 'Staff Training', 'Mock Assessment'],
    },
    {
      title: 'For Patients\' Benefit',
      subtitle: 'Quality & Trust',
      body: 'NABH certification means safer care, fewer infections, and standardised treatment protocols -- a visible trust signal for every patient who walks in.',
      cta: 'View Details',
      img: 'https://images.unsplash.com/photo-1579684385127-1ef15d508118?w=600&auto=format&q=80&fit=crop',
      links: ['Patient Safety', 'Care Standards', 'Trust Building'],
    },
  ];

  return (
    <section style={{ background: '#f7f9fc', padding: '80px 32px' }}>
      <Container>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 36 }}>
          <div>
            <SectionLabel>Our Offerings</SectionLabel>
            <h2 style={{ font: '700 36px var(--font-sans)', letterSpacing: '-0.8px', margin: '10px 0 0', color: '#0a1628' }}>
              Who we help and how
            </h2>
          </div>
          <button onClick={() => window.__openAssessment && window.__openAssessment()} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, background: '#1565C0', color: '#fff', border: 'none', borderRadius: 9999, padding: '10px 20px', font: '600 13.5px var(--font-sans)', cursor: 'pointer' }}>
            <MicSvg size={13} stroke="#fff" />
            Free Assessment
          </button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {offerings.map(o => (
            <div key={o.title} style={{ position: 'relative', borderRadius: 14, overflow: 'hidden', minHeight: 420 }}>
              <img src={o.img} alt={o.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              {/* Dark gradient overlay */}
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(8,30,70,0.95) 0%, rgba(8,30,70,0.65) 50%, rgba(8,30,70,0.20) 100%)' }} />
              <div style={{ position: 'relative', padding: '28px 24px', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', boxSizing: 'border-box' }}>
                <div style={{ font: '500 11px var(--font-sans)', color: '#42A5F5', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8 }}>{o.subtitle}</div>
                <div style={{ font: '700 22px var(--font-sans)', color: '#fff', lineHeight: 1.2, marginBottom: 12 }}>{o.title}</div>
                <p style={{ font: '400 13.5px var(--font-sans)', color: 'rgba(255,255,255,0.78)', lineHeight: 1.6, marginBottom: 20 }}>{o.body}</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 20 }}>
                  {o.links.map(l => (
                    <a key={l} href="#" style={{ font: '500 13px var(--font-sans)', color: 'rgba(255,255,255,0.80)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6 }}
                      onMouseOver={e => e.currentTarget.style.color = '#fff'}
                      onMouseOut={e => e.currentTarget.style.color = 'rgba(255,255,255,0.80)'}>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
                      {l}
                    </a>
                  ))}
                </div>
                <button onClick={() => window.__openAssessment && window.__openAssessment()} style={{ background: '#1565C0', color: '#fff', border: 'none', borderRadius: 8, padding: '12px 0', font: '600 13.5px var(--font-sans)', cursor: 'pointer', width: '100%' }}>
                  {o.cta}
                </button>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============ WHAT IS NABH ============
function WhatIsNabh() {
  const [activeTab, setActiveTab] = React.useState(0);
  const tabs = [
    { label: 'For Healthcare Providers', content: 'NABH Entry Level certification demonstrates that your hospital meets defined quality and safety standards across all operational domains -- enabling better empanelment, higher trust, and measurable financial benefits.' },
    { label: 'For Quality Teams', content: 'The 10 NABH domains give your quality team a structured framework for continuous improvement -- from clinical protocols and medication management to infection control and staff credentialing.' },
  ];
  const domains = [
    ['Access & Patient Care', 'Registration, assessment, discharge'],
    ['Clinical Protocols', 'Treatment plans, patient safety'],
    ['Medication Management', 'Prescribing, dispensing, storage'],
    ['Patient Rights', 'Consent, privacy, education'],
    ['Infection Control', 'Sterilisation, biomedical waste'],
    ['Patient Safety & Quality', 'Incident reporting, safety goals'],
    ['Management', 'Governance, legal compliance'],
    ['Facility & Safety', 'Infrastructure, fire safety'],
    ['Human Resources', 'Credentialing, training'],
    ['Information Management', 'Medical records, data security'],
  ];

  return (
    <section id="what-is-nabh" style={{ background: '#fff', padding: '80px 32px' }}>
      <Container>
        <SectionLabel>Why NABH?</SectionLabel>
        <h2 style={{ font: '700 36px var(--font-sans)', letterSpacing: '-0.8px', margin: '10px 0 28px', color: '#0a1628', maxWidth: 680 }}>
          Understanding NABH Entry Level certification
        </h2>

        {/* Tabs */}
        <div style={{ display: 'flex', gap: 0, borderBottom: '2px solid #e0e7f0', marginBottom: 0 }}>
          {tabs.map((t, i) => (
            <button key={i} onClick={() => setActiveTab(i)} style={{
              background: 'none', border: 'none', cursor: 'pointer', padding: '12px 24px 14px',
              font: `600 14px var(--font-sans)`,
              color: activeTab === i ? '#1565C0' : '#5a6e82',
              borderBottom: activeTab === i ? '2px solid #1565C0' : '2px solid transparent',
              marginBottom: '-2px', transition: 'color 0.15s'
            }}>{t.label}</button>
          ))}
        </div>

        {/* Tab content + image */}
        <div style={{ position: 'relative', borderRadius: '0 0 14px 14px', overflow: 'hidden', marginBottom: 48 }}>
          <img src="https://static.vecteezy.com/system/resources/previews/073/041/180/non_2x/two-doctors-are-looking-at-paperwork-free-photo.jpg" alt="NABH assessment" style={{ width: '100%', height: 340, objectFit: 'cover', display: 'block' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, rgba(8,30,70,0.88) 0%, rgba(8,30,70,0.60) 50%, rgba(8,30,70,0.20) 100%)' }} />
          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', padding: '40px 48px' }}>
            <div style={{ maxWidth: 520 }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.25)', borderRadius: 9999, padding: '5px 12px', font: '500 12px var(--font-sans)', color: '#fff', marginBottom: 20 }}>
                <Icon name="award" size={13} color="#42A5F5" />
                Recognised by ISQua -- International Society for Quality in Healthcare
              </div>
              <p style={{ font: '400 17px var(--font-sans)', color: 'rgba(255,255,255,0.88)', lineHeight: 1.7, marginBottom: 24 }}>
                {tabs[activeTab].content}
              </p>
              <div style={{ borderLeft: '3px solid #42A5F5', paddingLeft: 16, font: '500 15px var(--font-sans)', color: '#fff', lineHeight: 1.6 }}>
                NABH Entry Level is valid for 2 years, has lower fees than Full NABH, and is explicitly designed as a stepping stone to Full NABH accreditation.
              </div>
            </div>
          </div>
        </div>

        {/* 10 domains grid */}
        <div>
          <h3 style={{ font: '700 22px var(--font-sans)', color: '#0a1628', letterSpacing: '-0.3px', marginBottom: 20 }}>The 10 quality domains</h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
            {domains.map(([title, desc], i) => (
              <div key={title} style={{ background: '#f7f9fc', border: '1px solid #e0e7f0', borderRadius: 12, padding: '18px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 24, height: 24, borderRadius: 6, background: '#EBF4FF', color: '#1565C0', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 11px var(--font-mono)' }}>{String(i+1).padStart(2,'0')}</span>
                </div>
                <div style={{ font: '600 14px var(--font-sans)', color: '#0a1628', lineHeight: 1.3 }}>{title}</div>
                <div style={{ font: '400 12.5px var(--font-sans)', color: '#5a6e82', lineHeight: 1.5 }}>{desc}</div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============ BENEFITS ============
function BenefitsSection() {
  const items = [
    { icon: 'indian-rupee', title: '10% higher PMJAY reimbursement', body: 'Every Ayushman Bharat claim processed after certification earns 10% more than the standard package rate. For a hospital with 50+ PMJAY patients a month, this recovers the cost of certification within weeks.', foot: 'Most hospitals recover consulting costs in 2-3 months', accent: true },
    { icon: 'building-2', title: 'Insurance empanelment', body: 'NABH certification is increasingly a prerequisite for cashless empanelment with private insurance companies. It also opens eligibility for CGHS and ECHS programmes.' },
    { icon: 'star', title: 'Patient trust & competitive edge', body: 'In a locality where two hospitals offer similar services, patients choose the NABH-certified one. The certification is a visible signal of safety and quality.' },
    { icon: 'activity', title: 'Reduced infections & errors', body: 'Standardised infection control and medication protocols directly reduce hospital-acquired infections, medication errors, and near-misses.' },
    { icon: 'settings', title: 'Operational efficiency', body: 'Clear staff roles, better equipment maintenance, and standardised inventory management reduce day-to-day costs, breakdowns, and wastage.' },
    { icon: 'target', title: 'A stepping stone to Full NABH', body: "Entry Level is designed as the first step. Once your systems are aligned, the path to Full NABH -- which brings 15% higher PMJAY rates -- becomes far shorter." },
  ];
  return (
    <section id="benefits" style={{ background: '#f7f9fc', padding: '80px 32px', borderTop: '1px solid #e0e7f0' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end', marginBottom: 48 }}>
          <div>
            <SectionLabel>Why it matters</SectionLabel>
            <h2 style={{ font: '700 36px var(--font-sans)', letterSpacing: '-0.8px', margin: '10px 0 0', color: '#0a1628' }}>
              What NABH Entry Level unlocks for your hospital
            </h2>
          </div>
          <p style={{ font: '400 17px var(--font-sans)', color: '#5a6e82', lineHeight: 1.65 }}>
            Certification is not just a plaque on the wall. It has direct, measurable financial and operational impact from the day it is granted.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {items.map((it, i) => (
            <div key={it.title} style={{
              background: '#fff', border: `1px solid ${it.accent ? '#1565C0' : '#e0e7f0'}`,
              borderRadius: 12, padding: 28, display: 'flex', flexDirection: 'column', gap: 14,
              boxShadow: it.accent ? '0 4px 24px rgba(21,101,192,0.12)' : 'var(--shadow-card)'
            }}>
              <span style={{ width: 42, height: 42, borderRadius: 10, background: it.accent ? '#1565C0' : '#EBF4FF', color: it.accent ? '#fff' : '#1565C0', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={it.icon} size={20} color={it.accent ? '#fff' : '#1565C0'} />
              </span>
              <div style={{ font: '700 18px var(--font-sans)', color: '#0a1628', letterSpacing: '-0.2px', lineHeight: 1.3 }}>{it.title}</div>
              <div style={{ font: '400 14px var(--font-sans)', color: '#5a6e82', lineHeight: 1.7 }}>{it.body}</div>
              {it.foot && <div style={{ marginTop: 4, paddingTop: 14, borderTop: '1px dashed #e0e7f0', font: '600 13px var(--font-sans)', color: '#1565C0' }}>{it.foot}</div>}
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============ PROCESS ============
function ProcessSection() {
  const steps = [
    { t: 'Gap Assessment', d: 'We visit your hospital and assess your current state against every NABH Entry Level requirement. You receive a prioritised gap report -- what needs to be done, in what order, and how long it will take.', when: 'Week 1-2' },
    { t: 'System Building', d: 'Our consultants build your policies, SOPs, forms, and registers -- all customised for your hospital, not generic templates. Department-by-department process improvements are implemented.', when: 'Month 1-3' },
    { t: 'Staff Training', d: 'We train your doctors, nurses, pharmacists, housekeeping, and admin staff on what NABH requires from their roles. Hands-on, ward-level training -- not classroom lectures.', when: 'Month 2-4' },
    { t: 'Mock Assessment', d: 'We run a full internal mock assessment replicating the actual NABH process -- interviewing staff, inspecting wards, reviewing documents. Every gap is fixed before the real assessment.', when: 'Month 4-5' },
    { t: 'Assessment Support', d: 'We coordinate your NABH application, prepare all submission documents, and are present with you on the day of your assessment. You go in prepared, not anxious.', when: 'Month 5-6' },
    { t: 'Certification & Beyond', d: 'After certification, we support you through your surveillance visit and renewal. Your certification never lapses due to lack of support.', when: 'Ongoing' },
  ];
  return (
    <section id="process" style={{ background: '#fff', padding: '80px 32px' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 72, alignItems: 'start' }}>
          {/* Sticky left column */}
          <div style={{ position: 'sticky', top: 96 }}>
            <SectionLabel>Our Process</SectionLabel>
            <h2 style={{ font: '700 36px var(--font-sans)', letterSpacing: '-0.8px', margin: '10px 0 16px', color: '#0a1628' }}>
              How we get your hospital certified
            </h2>
            <p style={{ font: '400 16px var(--font-sans)', color: '#5a6e82', lineHeight: 1.7, marginBottom: 28 }}>
              Getting NABH certified on your own means writing hundreds of SOPs, training every department, and navigating the assessment process -- while running a hospital. We handle all of it.
            </p>
            <img src="https://images.unsplash.com/photo-1582750433449-648ed127bb54?w=560&auto=format&q=80&fit=crop" alt="AHC Consulting team" style={{ width: '100%', borderRadius: 12, objectFit: 'cover', height: 280 }} />
          </div>
          {/* Steps */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {steps.map((s, i) => (
              <div key={s.t} style={{ background: '#f7f9fc', border: '1px solid #e0e7f0', borderRadius: 12, padding: 24, display: 'flex', gap: 20, alignItems: 'flex-start' }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: '#1565C0', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 16px var(--font-mono)', flexShrink: 0 }}>{String(i+1).padStart(2,'0')}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
                    <div style={{ font: '700 17px var(--font-sans)', color: '#0a1628' }}>{s.t}</div>
                    <span style={{ font: '500 12px var(--font-mono)', color: '#1565C0', background: '#EBF4FF', border: '1px solid #b8d8f8', padding: '3px 10px', borderRadius: 9999, flexShrink: 0, marginLeft: 16 }}>{s.when}</span>
                  </div>
                  <p style={{ font: '400 14px var(--font-sans)', color: '#5a6e82', lineHeight: 1.65 }}>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { Hero, ProblemsSection, WhatIsNabh, BenefitsSection, ProcessSection });
