// AHC Consulting — Clients, Differentiators, Fit, FAQ, CTA, Contact
const { useState: useStateS2 } = React;

// ============ CLIENTS / SUCCESS STORIES (NABH "Latest Updates" alternating style) ============
function ClientsSection() {
  const clients = [
    {
      name: 'Lifetron Hospital',
      type: 'Multi-specialty Hospital',
      location: 'Chennai, Tamil Nadu',
      beds: 60, months: 5,
      challenge: 'Insurance empanelment was blocked and PMJAY revenue was capped without certification.',
      outcome: 'Achieved NABH Entry Level certification in 5 months. PMJAY revenue increased by 10% and secured 3 new insurance tie-ups.',
      img: 'https://www.lifetronhospital.com/assets/uploads/home_about_photo.jpg',
    },
    {
      name: 'New Life Hospital',
      type: 'Maternity & Child Care',
      location: 'Coimbatore, Tamil Nadu',
      beds: 35, months: 4,
      challenge: 'Had attempted NABH independently but found documentation overwhelming without expert guidance.',
      outcome: 'Certified in 4 months with complete SOP library, trained staff, and a passing mock assessment score.',
      img: 'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=600&auto=format&q=80&fit=crop',
    },
    {
      name: 'MGM Hospital',
      type: 'Orthopaedic & Trauma Centre',
      location: 'Madurai, Tamil Nadu',
      beds: 50, months: 6,
      challenge: 'No existing SOPs or quality systems -- everything needed to be built from scratch.',
      outcome: 'Full quality management system implemented. Certified in 6 months with zero major non-conformities on assessment day.',
      img: 'https://mgmhealthcare.in/wp-content/uploads/2025/04/7-1.webp',
    },
    {
      name: 'Promed Hospital',
      type: 'General & Surgical Care',
      location: 'Tiruchirappalli, Tamil Nadu',
      beds: 40, months: 4,
      challenge: 'New hospital needing quality systems embedded from day one of operations.',
      outcome: 'NABH-aligned systems built into the hospital\'s operational DNA from launch. Certified 4 months after opening.',
      img: 'https://images.unsplash.com/photo-1551190822-a9333d879b1f?w=600&auto=format&q=80&fit=crop',
    },
  ];

  return (
    <section id="clients" style={{ background: '#fff', padding: '80px 32px', borderTop: '1px solid #e0e7f0' }}>
      <Container>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48 }}>
          <div>
            <SectionLabel>Success Stories</SectionLabel>
            <h2 style={{ font: '700 36px var(--font-sans)', letterSpacing: '-0.8px', margin: '10px 0 0', color: '#0a1628' }}>
              Unaccredited then.<br />NABH certified now.
            </h2>
          </div>
          <p style={{ font: '400 16px var(--font-sans)', color: '#5a6e82', lineHeight: 1.65, maxWidth: 400 }}>
            Every hospital below was once where yours might be today. We got them certified.
          </p>
        </div>

        {/* Alternating "Latest Updates" layout (NABH-style) */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {clients.map((c, i) => (
            <div key={c.name} style={{
              display: 'grid',
              gridTemplateColumns: i % 2 === 0 ? '420px 1fr' : '1fr 420px',
              borderRadius: 16, overflow: 'hidden',
              border: '1px solid #e0e7f0',
              boxShadow: '0 2px 16px rgba(21,101,192,0.07)',
              background: '#fff'
            }}>
              {/* Image */}
              <div style={{ order: i % 2 === 0 ? 0 : 1, position: 'relative', minHeight: 280 }}>
                <img src={c.img} alt={c.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                  onError={e => { e.target.src = 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=600&auto=format&q=80&fit=crop'; }} />
                {/* Before/after overlay strip */}
                <div style={{ position: 'absolute', top: 16, left: 16, display: 'flex', gap: 6 }}>
                  <span style={{ background: '#d45656', color: '#fff', font: '600 10px var(--font-sans)', padding: '3px 8px', borderRadius: 4, textTransform: 'uppercase', letterSpacing: 0.5 }}>Unaccredited</span>
                  <span style={{ background: '#1565C0', color: '#fff', font: '600 10px var(--font-sans)', padding: '3px 8px', borderRadius: 4, textTransform: 'uppercase', letterSpacing: 0.5 }}>NABH Certified</span>
                </div>
              </div>

              {/* Content */}
              <div style={{ order: i % 2 === 0 ? 1 : 0, padding: '36px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
                  <span style={{ background: '#EBF4FF', color: '#1565C0', font: '600 11px var(--font-sans)', padding: '3px 10px', borderRadius: 9999, border: '1px solid #b8d8f8' }}>{c.type}</span>
                  <span style={{ background: '#f7f9fc', color: '#5a6e82', font: '500 11px var(--font-sans)', padding: '3px 10px', borderRadius: 9999, border: '1px solid #e0e7f0' }}>{c.beds} beds</span>
                  <span style={{ background: '#f7f9fc', color: '#5a6e82', font: '500 11px var(--font-sans)', padding: '3px 10px', borderRadius: 9999, border: '1px solid #e0e7f0' }}>{c.months} months</span>
                </div>
                <h3 style={{ font: '700 24px var(--font-sans)', color: '#0a1628', letterSpacing: '-0.3px', marginBottom: 6 }}>{c.name}</h3>
                <div style={{ font: '400 13px var(--font-sans)', color: '#8898aa', marginBottom: 20, display: 'flex', alignItems: 'center', gap: 5 }}>
                  <Icon name="map-pin" size={12} color="#8898aa" />{c.location}
                </div>
                <div style={{ marginBottom: 16 }}>
                  <div style={{ font: '600 12px var(--font-sans)', color: '#d45656', textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 6 }}>The Challenge</div>
                  <p style={{ font: '400 14px var(--font-sans)', color: '#344a60', lineHeight: 1.65 }}>{c.challenge}</p>
                </div>
                <div style={{ borderLeft: '3px solid #1565C0', paddingLeft: 14 }}>
                  <div style={{ font: '600 12px var(--font-sans)', color: '#1565C0', textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 6 }}>The Outcome</div>
                  <p style={{ font: '400 14px var(--font-sans)', color: '#344a60', lineHeight: 1.65 }}>{c.outcome}</p>
                </div>
                <a href="#contact" style={{ marginTop: 24, display: 'inline-flex', alignItems: 'center', gap: 6, font: '600 13.5px var(--font-sans)', color: '#1565C0', textDecoration: 'none' }}
                  onMouseOver={e => e.currentTarget.style.textDecoration = 'underline'}
                  onMouseOut={e => e.currentTarget.style.textDecoration = 'none'}>
                  View Details
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="9 18 15 12 9 6"/></svg>
                </a>
              </div>
            </div>
          ))}
        </div>

        {/* CTA strip */}
        <div style={{ marginTop: 48, background: '#EBF4FF', border: '1px solid #b8d8f8', borderRadius: 16, padding: '32px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
          <div>
            <div style={{ font: '700 22px var(--font-sans)', color: '#0E3F8A', marginBottom: 6 }}>Your hospital could be next.</div>
            <p style={{ font: '400 15px var(--font-sans)', color: '#344a60' }}>Start with a free AI assessment and get your readiness score in 5 minutes.</p>
          </div>
          <button onClick={() => window.__openAssessment && window.__openAssessment()} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: '#1565C0', color: '#fff', border: 'none', borderRadius: 9999, padding: '13px 26px', font: '700 14px var(--font-sans)', cursor: 'pointer', whiteSpace: 'nowrap', boxShadow: '0 4px 16px rgba(21,101,192,0.35)' }}>
            <MicSvg size={15} stroke="#fff" />
            Take Free AI Assessment
          </button>
        </div>
      </Container>
    </section>
  );
}

// ============ DIFFERENTIATORS (alternating image + text like NABH "Latest Updates") ============
function DifferentiatorsSection() {
  const items = [
    {
      label: 'On-site presence',
      title: 'We are there with you, not just over email',
      body: 'Our consultants make regular on-site visits to your hospital throughout the engagement. We do not send you a folder of templates and disappear -- we work alongside your team to implement real change.',
      img: 'https://images.unsplash.com/photo-1582750433449-648ed127bb54?w=600&auto=format&q=80&fit=crop',
    },
    {
      label: 'Customised approach',
      title: 'Everything is built for your hospital, not copied',
      body: 'Every SOP, policy, and training programme we develop is customised to your hospital\'s specialty, scale, and patient population. We have seen hundreds of hospitals -- we know what fits yours.',
      img: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=600&auto=format&q=80&fit=crop',
    },
    {
      label: 'Fixed timeline',
      title: 'From engagement to certification in 3-6 months',
      body: 'We give you a week-by-week roadmap at the start of the engagement and stick to it. You will always know exactly where you are in the process and what comes next.',
      img: 'https://images.unsplash.com/photo-1551601651-2a8555f1a136?w=600&auto=format&q=80&fit=crop',
    },
  ];

  return (
    <section id="why-us" style={{ background: '#f7f9fc', padding: '80px 32px', borderTop: '1px solid #e0e7f0' }}>
      <Container>
        <SectionLabel>Why choose us</SectionLabel>
        <h2 style={{ font: '700 36px var(--font-sans)', letterSpacing: '-0.8px', margin: '10px 0 48px', color: '#0a1628' }}>
          What makes AHC Consulting different
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {items.map((item, i) => (
            <div key={item.title} style={{ display: 'grid', gridTemplateColumns: i % 2 === 0 ? '420px 1fr' : '1fr 420px', borderRadius: 16, overflow: 'hidden', border: '1px solid #e0e7f0', background: '#fff', boxShadow: '0 2px 12px rgba(21,101,192,0.06)' }}>
              <div style={{ order: i % 2 === 0 ? 0 : 1, minHeight: 260, position: 'relative' }}>
                <img src={item.img} alt={item.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                <div style={{ position: 'absolute', inset: 0, background: 'rgba(8,30,70,0.30)' }} />
              </div>
              <div style={{ order: i % 2 === 0 ? 1 : 0, padding: '36px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div style={{ font: '600 11px var(--font-sans)', color: '#1565C0', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 12 }}>{item.label}</div>
                <h3 style={{ font: '700 22px var(--font-sans)', color: '#0a1628', letterSpacing: '-0.3px', lineHeight: 1.3, marginBottom: 14 }}>{item.title}</h3>
                <p style={{ font: '400 15px var(--font-sans)', color: '#5a6e82', lineHeight: 1.75 }}>{item.body}</p>
                <a href="#contact" style={{ marginTop: 20, display: 'inline-flex', alignItems: 'center', gap: 6, font: '600 13.5px var(--font-sans)', color: '#1565C0', textDecoration: 'none' }}>
                  Learn More <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="9 18 15 12 9 6"/></svg>
                </a>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============ FIT CHECK ============
function FitSection() {
  const fits = [
    'Small to mid-size hospitals (20-200 beds)',
    'Nursing homes seeking PMJAY empanelment',
    'Single-specialty clinics (maternity, ortho, surgery)',
    'Hospitals that have tried NABH independently and need structured support',
    'New hospitals building quality systems from day one',
  ];
  const notFits = [
    'Large corporate chains with in-house quality teams',
    'Hospitals that already hold Full NABH accreditation',
  ];

  return (
    <section style={{ background: '#fff', padding: '80px 32px', borderTop: '1px solid #e0e7f0' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
          <div>
            <SectionLabel>Is this right for you?</SectionLabel>
            <h2 style={{ font: '700 36px var(--font-sans)', letterSpacing: '-0.8px', margin: '10px 0 24px', color: '#0a1628' }}>Who we work best with</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 32 }}>
              {fits.map(f => (
                <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <span style={{ width: 20, height: 20, borderRadius: 9999, background: '#1565C0', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  </span>
                  <span style={{ font: '400 15px var(--font-sans)', color: '#344a60', lineHeight: 1.6 }}>{f}</span>
                </div>
              ))}
            </div>
            {notFits.map(f => (
              <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginBottom: 10 }}>
                <span style={{ width: 20, height: 20, borderRadius: 9999, background: '#e0e7f0', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#8898aa" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </span>
                <span style={{ font: '400 15px var(--font-sans)', color: '#8898aa', lineHeight: 1.6 }}>{f}</span>
              </div>
            ))}
          </div>

          {/* AI Assessment prompt card */}
          <div style={{ background: 'linear-gradient(135deg, #0E3F8A 0%, #1565C0 100%)', borderRadius: 20, padding: 40, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ width: 56, height: 56, borderRadius: 14, background: 'rgba(255,255,255,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24 }}>
              <MicSvg size={26} stroke="#fff" />
            </div>
            <div style={{ font: '700 24px var(--font-sans)', color: '#fff', letterSpacing: '-0.3px', marginBottom: 12 }}>Not sure where you stand?</div>
            <p style={{ font: '400 15px var(--font-sans)', color: 'rgba(255,255,255,0.75)', lineHeight: 1.7, marginBottom: 28 }}>
              Take our free AI assessment. In 5 minutes, our AI consultant will review your hospital's website and ask a few targeted questions to give you an instant NABH readiness score.
            </p>
            <button onClick={() => window.__openAssessment && window.__openAssessment()} style={{
              background: '#fff', color: '#1565C0', border: 'none', borderRadius: 10,
              padding: '14px 24px', font: '700 15px var(--font-sans)', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 8
            }}>
              <MicSvg size={16} stroke="#1565C0" />
              Get Your Free Score
            </button>
            <p style={{ font: '400 12px var(--font-sans)', color: 'rgba(255,255,255,0.45)', marginTop: 16, textAlign: 'center' }}>No sign-up required. Results in 5 minutes.</p>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============ FAQ ============
function FaqSection() {
  const [open, setOpen] = useStateS2(null);
  const faqs = [
    { q: 'What is NABH and why is it important for Indian healthcare?', a: "NABH -- the National Accreditation Board for Hospitals and Healthcare Providers -- is India's apex body for hospital quality accreditation under the Quality Council of India. It is internationally recognised and is the benchmark for hospital quality in India. Entry Level certification was specifically designed for smaller hospitals that want to demonstrate quality care without the complexity of Full NABH." },
    { q: 'How long does the certification process take?', a: 'Most hospitals we work with achieve certification in 3-6 months. The timeline depends on your starting point -- hospitals with some existing documentation may move faster, while hospitals building everything from scratch may take 5-6 months. We give you a week-by-week roadmap at the start.' },
    { q: 'What does AHC Consulting actually do for us?', a: 'We handle everything: initial gap assessment, building all your SOPs and policies, staff training across all departments, a full mock assessment, and we are present with you on the actual assessment day. You run your hospital; we manage the certification process.' },
    { q: 'How much does NABH Entry Level certification cost?', a: 'NABH\'s own application fee for Entry Level is Rs. 15,000 + GST. Our consulting fees are fixed per engagement and depend on the size and starting state of your hospital. We do not charge per-visit fees. Contact us for a quote specific to your hospital.' },
    { q: 'What happens after we get certified?', a: 'NABH certification is valid for 2 years, with an annual surveillance visit in between. We support you through both the surveillance visit and the 2-year renewal -- so your certification never lapses due to lack of support.' },
    { q: 'Can a hospital with no existing quality documentation still get certified?', a: "Yes. Several of our certified clients, including MGM Hospital in Madurai, had no existing SOPs or quality systems when they engaged us. We built everything from scratch and had them certified in 6 months. You don't need to start with anything -- just the commitment to do it." },
  ];

  return (
    <section id="faqs" style={{ background: '#f7f9fc', padding: '80px 32px', borderTop: '1px solid #e0e7f0' }}>
      <Container>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40 }}>
          <div>
            <SectionLabel>FAQs</SectionLabel>
            <h2 style={{ font: '700 36px var(--font-sans)', letterSpacing: '-0.8px', margin: '10px 0 0', color: '#0a1628' }}>Frequently asked questions</h2>
          </div>
          <a href="#contact" style={{ font: '600 13.5px var(--font-sans)', color: '#1565C0', textDecoration: 'none' }}>View All</a>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {faqs.map((f, i) => (
            <div key={i} style={{ background: '#fff', border: `1px solid ${open === i ? '#1565C0' : '#e0e7f0'}`, borderRadius: 12, overflow: 'hidden', boxShadow: open === i ? '0 2px 16px rgba(21,101,192,0.10)' : 'none' }}>
              <button onClick={() => setOpen(open === i ? null : i)} style={{ width: '100%', background: 'none', border: 'none', padding: '20px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer', textAlign: 'left', gap: 16 }}>
                <span style={{ font: '600 16px var(--font-sans)', color: open === i ? '#1565C0' : '#0a1628', lineHeight: 1.4 }}>{f.q}</span>
                <span style={{ width: 28, height: 28, borderRadius: 9999, background: open === i ? '#1565C0' : '#EBF4FF', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'background 0.2s' }}>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={open === i ? '#fff' : '#1565C0'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    {open === i ? <line x1="5" y1="12" x2="19" y2="12"/> : <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>}
                  </svg>
                </span>
              </button>
              {open === i && (
                <div style={{ padding: '0 24px 22px', font: '400 15px var(--font-sans)', color: '#5a6e82', lineHeight: 1.75, borderTop: '1px solid #e0e7f0', paddingTop: 18, animation: 'fadeSlideIn 0.18s ease' }}>
                  {f.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============ CTA BAND ============
function CtaBand() {
  return (
    <section style={{ background: '#1565C0', padding: '72px 32px' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'center' }}>
          <div>
            <h2 style={{ font: '700 40px var(--font-sans)', color: '#fff', letterSpacing: '-1px', lineHeight: 1.1, margin: '0 0 14px' }}>
              Get Accredited. Get Ahead.
            </h2>
            <p style={{ font: '400 18px var(--font-sans)', color: 'rgba(255,255,255,0.78)', lineHeight: 1.6 }}>
              Start with a free AI assessment today. Get your NABH readiness score in 5 minutes -- no obligation, no sign-up required.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 240 }}>
            <button onClick={() => window.__openAssessment && window.__openAssessment()} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
              background: '#fff', color: '#1565C0', border: 'none', borderRadius: 10,
              padding: '15px 28px', font: '700 15px var(--font-sans)', cursor: 'pointer',
              boxShadow: '0 4px 16px rgba(0,0,0,0.16)'
            }}>
              <MicSvg size={16} stroke="#1565C0" />
              Free AI Assessment
            </button>
            <a href="#contact" style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              background: 'rgba(255,255,255,0.12)', color: '#fff',
              border: '1.5px solid rgba(255,255,255,0.35)', borderRadius: 10,
              padding: '13px 28px', font: '600 15px var(--font-sans)', textDecoration: 'none'
            }}>
              Book a Consultation
            </a>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============ CONTACT ============
function ContactSection() {
  const [form, setForm] = useStateS2({ name: '', hospital: '', phone: '', message: '' });
  const [sent, setSent] = useStateS2(false);

  function handleSubmit(e) {
    e.preventDefault();
    setSent(true);
  }

  const inputStyle = {
    width: '100%', height: 46, border: '1.5px solid #d0e4f8', borderRadius: 8,
    padding: '10px 14px', font: '400 15px var(--font-sans)', color: '#0a1628',
    background: '#fff', outline: 'none', boxSizing: 'border-box',
    transition: 'border-color 0.15s'
  };

  return (
    <section id="contact" style={{ background: '#fff', padding: '80px 32px', borderTop: '1px solid #e0e7f0' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'start' }}>
          {/* Left */}
          <div>
            <SectionLabel>Get in Touch</SectionLabel>
            <h2 style={{ font: '700 36px var(--font-sans)', letterSpacing: '-0.8px', margin: '10px 0 20px', color: '#0a1628' }}>
              Talk to our accreditation consultants
            </h2>
            <p style={{ font: '400 16px var(--font-sans)', color: '#5a6e82', lineHeight: 1.75, marginBottom: 36 }}>
              Whether you are just starting to explore NABH or ready to begin, our team will give you a clear picture of what to expect and how we can help.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              {[
                { icon: 'phone', label: 'Sneha (Enquiries)', value: '+91 86673 70744', href: 'tel:+918667370744' },
                { icon: 'phone', label: 'Jaya Alvar (Consulting)', value: '+91 73054 78574', href: 'tel:+917305478574' },
                { icon: 'mail', label: 'Email', value: 'info@ahcconsulting.in', href: 'mailto:info@ahcconsulting.in' },
                { icon: 'map-pin', label: 'Locations', value: 'Chennai · Pan-India service' },
                { icon: 'clock', label: 'Working Hours', value: 'Mon–Sat, 9 AM – 7 PM IST' },
              ].map(c => (
                <div key={c.label} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <span style={{ width: 40, height: 40, borderRadius: 10, background: '#EBF4FF', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name={c.icon} size={18} color="#1565C0" />
                  </span>
                  <div>
                    <div style={{ font: '600 12px var(--font-sans)', color: '#8898aa', textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 2 }}>{c.label}</div>
                    {c.href ? (
                      <a href={c.href} style={{ font: '500 15px var(--font-sans)', color: '#1565C0', textDecoration: 'none' }}>{c.value}</a>
                    ) : (
                      <div style={{ font: '500 15px var(--font-sans)', color: '#0a1628' }}>{c.value}</div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Form */}
          <div style={{ background: '#f7f9fc', borderRadius: 16, padding: 36, border: '1px solid #e0e7f0' }}>
            {sent ? (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <div style={{ width: 60, height: 60, borderRadius: 9999, background: '#1565C0', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <div style={{ font: '700 20px var(--font-sans)', color: '#0a1628', marginBottom: 8 }}>Message received!</div>
                <p style={{ font: '400 14px var(--font-sans)', color: '#5a6e82', lineHeight: 1.65 }}>Our team will reach out within one business day to schedule a conversation.</p>
              </div>
            ) : (
              <form onSubmit={handleSubmit}>
                <div style={{ font: '700 20px var(--font-sans)', color: '#0a1628', marginBottom: 24 }}>Send us a message</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
                  {[
                    { key: 'name', label: 'Your Name', placeholder: 'Dr. / Mr. / Ms.' },
                    { key: 'hospital', label: 'Hospital Name', placeholder: 'Your Hospital' },
                  ].map(f => (
                    <div key={f.key}>
                      <label style={{ display: 'block', font: '600 12px var(--font-sans)', color: '#344a60', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6 }}>{f.label}</label>
                      <input type="text" placeholder={f.placeholder} value={form[f.key]} onChange={e => setForm({ ...form, [f.key]: e.target.value })} style={inputStyle} required />
                    </div>
                  ))}
                </div>
                <div style={{ marginBottom: 14 }}>
                  <label style={{ display: 'block', font: '600 12px var(--font-sans)', color: '#344a60', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6 }}>Phone Number</label>
                  <input type="tel" placeholder="Your mobile number" value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} style={inputStyle} required />
                </div>
                <div style={{ marginBottom: 20 }}>
                  <label style={{ display: 'block', font: '600 12px var(--font-sans)', color: '#344a60', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6 }}>Message</label>
                  <textarea placeholder="Tell us about your hospital and what you need help with..." value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} style={{ ...inputStyle, height: 110, resize: 'none' }} />
                </div>
                <button type="submit" style={{ width: '100%', height: 50, background: '#1565C0', color: '#fff', border: 'none', borderRadius: 10, font: '700 15px var(--font-sans)', cursor: 'pointer', boxShadow: '0 4px 16px rgba(21,101,192,0.30)' }}>
                  Send Message
                </button>
                <p style={{ font: '400 12px var(--font-sans)', color: '#8898aa', textAlign: 'center', marginTop: 14 }}>We respond within 1 business day.</p>
              </form>
            )}
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { ClientsSection, DifferentiatorsSection, FitSection, FaqSection, CtaBand, ContactSection });