/* global React, Icon */
const { useEffect: useEffect3, useRef: useRef3, useState: useState3 } = React;

/* =================== WHY KAMEDA =================== */
function WhyKameda() {
  const facts = [
  {
    n: '01',
    big: '74',
    bigPrefix: '#',
    bigSuffix: ' globally',
    title: 'Ranked 4th in Japan',
    sub: 'Newsweek\u2019s World\u2019s Best Hospitals 2026 ranked Kameda 74th globally and 4th in Japan \u2014 a recognition of long-term clinical excellence.',
    chips: [
      { k: 'Global', v: '#74' },
      { k: 'Japan', v: '#4' },
      { k: 'Source', v: 'Newsweek 2026' }
    ]
  },
  {
    n: '02',
    big: '4,015',
    bigSuffix: ' full-time staff',
    title: 'A complete care team',
    sub: 'A comprehensive general hospital covering every major discipline \u2014 from internal medicine and surgery to emergency, oncology and rehabilitation.',
    chips: [
      { k: 'Physicians & Dentists', v: '595' },
      { k: 'Nurses', v: '1,326' },
      { k: 'Full-time staff', v: '4,015' }
    ]
  }];

  return (
    <section id="why" data-section-bg="alt">
      <div className="container">
        <div className="reveal" style={{ marginBottom: 64 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>03 · Why Kameda</div>
          <h2 className="serif" style={{ maxWidth: 1100 }}>
            Many patients come to
            <br className="br-mob" />{' '}
            us
            <br className="br-desk" />{' '}
            when treatment is
            <br className="br-mob" />{' '}
            <em style={{ color: 'var(--accent-navy)' }}>difficult elsewhere.</em>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }} className="why-grid">
          {facts.map((f, i) => (
            <div key={i} className={`reveal delay-${i + 1}`} style={{
              background: 'white',
              border: '1px solid var(--line)',
              borderRadius: 'var(--r-lg)',
              padding: 32,
              display: 'flex',
              flexDirection: 'column',
              gap: 18,
              minHeight: 220,
              position: 'relative',
              overflow: 'hidden'
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--accent-cyan)', textTransform: 'uppercase' }}>
                  {f.n} · {i === 0 ? 'Ranking' : 'Capacity'}
                </div>
                {i === 0 && (
                  <span className="mono why-newsweek" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>Newsweek 2026</span>
                )}
              </div>

              <div style={{
                display: 'flex',
                alignItems: 'flex-end',
                gap: 12,
                flexWrap: 'wrap'
              }}>
                <div className="serif why-big" style={{
                  fontSize: 'clamp(56px, 6vw, 88px)',
                  lineHeight: 0.9,
                  letterSpacing: '-0.03em',
                  color: 'var(--ink)',
                  display: 'inline-flex',
                  alignItems: 'baseline'
                }}>
                  {f.bigPrefix && <span style={{ color: 'var(--accent-cyan)' }}>{f.bigPrefix}</span>}
                  <span>{f.big}</span>
                </div>
                <span style={{
                  fontSize: 14,
                  fontFamily: 'var(--sans)',
                  color: 'var(--ink-3)',
                  fontWeight: 500,
                  paddingBottom: 10,
                  letterSpacing: 0,
                  margin: '0 0 0 6px'
                }}>{f.bigSuffix.trim()}</span>
              </div>

              <div>
                <div className="serif why-title" style={{ fontSize: 'clamp(18px, 1.6vw, 22px)', marginBottom: 6 }}>{f.title}</div>
                <p style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.55, maxWidth: 480, margin: 0 }}>{f.sub}</p>
              </div>

              <div style={{ marginTop: 'auto', paddingTop: 18, borderTop: '1px solid var(--line)', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                {f.chips.map((c, j) => (
                  <div key={j}>
                    <div className="mono" style={{ fontSize: 9, letterSpacing: '0.14em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 3 }}>{c.k}</div>
                    <div className="serif why-chip-val" style={{ fontSize: 18, color: 'var(--ink)', lineHeight: 1 }}>{c.v}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Secondary row: JCI + 24/7 */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20, marginTop: 20 }} className="why-grid-sub">
          {[
            { num: 'JCI', label: 'Accredited', sub: 'Joint Commission International \u2014 the gold standard for global healthcare quality.' },
            { num: '24/7', label: 'Care', sub: 'Always-on multilingual patient support \u2014 reach a coordinator anytime, in any timezone.' }
          ].map((s, i) => (
            <div key={i} className={`reveal delay-${i + 3}`} style={{
              background: 'white',
              border: '1px solid var(--line)',
              borderRadius: 'var(--r-lg)',
              padding: '36px 40px',
              display: 'flex',
              alignItems: 'center',
              gap: 32
            }}>
              <div className="serif" style={{ fontSize: 'clamp(56px, 6vw, 88px)', lineHeight: 1, color: 'var(--ink)', flexShrink: 0, minWidth: 140 }}>{s.num}</div>
              <div style={{ borderLeft: '1px solid var(--line)', paddingLeft: 28 }}>
                <div className="serif" style={{ fontSize: 'clamp(20px, 2vw, 24px)', marginBottom: 6 }}>{s.label}</div>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6, margin: 0 }}>{s.sub}</p>
              </div>
            </div>
          ))}
        </div>

        <div className="reveal" style={{ marginTop: 56, display: 'flex', justifyContent: 'center', gap: 14, flexWrap: 'wrap' }}>
          <a href="https://wa.me/817073815194?text=Hi%20Kameda%2C%20I%20would%20like%20to%20learn%20more%20about%20the%20Heart%20Screening%20program." target="_blank" rel="noopener" className="btn btn-wa">
            <Icon.WhatsApp size={16} /> Get Your Heart Check Plan
          </a>
          <a href="#process" className="btn btn-ghost">How it works</a>
        </div>

        <style>{`@media (max-width: 900px) { .why-grid, .why-grid-sub { grid-template-columns: 1fr !important; } .why-grid-sub > div { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; } .why-grid-sub > div > div:last-child { border-left: none !important; padding-left: 0 !important; } }`}</style>
      </div>
    </section>);

}

/* =================== DOCTORS =================== */
function Doctors() {
  const docs = [
  { name: 'Dr. Akira Mizukami', dept: 'Speciality: Cardiology, Arrhythmia', img: 'assets/doctors/mizukami.jpg', points: [
      'Advanced expertise in TAVI, PCI, and catheter ablation.',
      'Full-suite electrophysiology lab with pulsed-field, radiofrequency, and cryoablation.',
      'High-precision cardiac imaging with MRI / CT / Echo.',
      'Multidisciplinary cardiac care with ICU and rehabilitation integration.'
    ] },
  { name: 'Dr. Daisuke Ueshima', dept: 'Speciality: Interventional Cardiology', img: 'assets/doctors/ueshima.jpg' },
  { name: 'Dr. Maki Ono', dept: 'Speciality: Cardiology, Arrhythmia', img: 'assets/doctors/ono.jpg' }];

  return (
    <section id="doctors">
      <div className="container">
        <div className="reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 56, gap: 40, flexWrap: 'wrap' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>04 · Top cardiologists</div>
            <h2 className="serif">Specialists who have<br />seen <em style={{ color: 'var(--accent-navy)' }}>everything.</em></h2>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="docs-grid">
          {docs.map((d, i) =>
          <div key={i} className={`reveal delay-${i + 1}`} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div style={{
              aspectRatio: '3/4', borderRadius: 'var(--r-lg)', overflow: 'hidden',
              position: 'relative', background: 'var(--accent-soft)',
              boxShadow: '0 20px 40px -24px rgba(10,22,40,0.18)'
            }}>
                <img src={d.img} alt={d.name} loading="lazy" style={{
                width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 18%',
                display: 'block', transition: 'transform 0.6s cubic-bezier(0.2,0.8,0.2,1)'
              }} onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.04)'}
              onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'} />
                <div style={{
                position: 'absolute', inset: 0, pointerEvents: 'none',
                background: 'linear-gradient(180deg, transparent 55%, rgba(10,22,40,0.18) 100%)'
              }} />
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--accent-cyan)', textTransform: 'uppercase', marginBottom: 8 }}>0{i + 1} · Cardiologist</div>
                <div className="serif" style={{ fontSize: 24, lineHeight: 1.15 }}>{d.name}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 6 }}>{d.dept}</div>
                {d.points && (
                  <ul style={{ listStyle: 'none', display: 'grid', gap: 10, marginTop: 16, padding: 0 }}>
                    {d.points.map((p, k) => (
                      <li key={k} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                        <span style={{ color: 'var(--accent-cyan)', flexShrink: 0, marginTop: 3 }}><Icon.Check size={14} /></span>
                        <span>{p}</span>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            </div>
          )}
        </div>
        <style>{`@media (max-width: 900px) { .docs-grid { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </section>);

}

/* =================== SUPPORT =================== */
function Support() {
  return (
    <section id="support">
      <div className="container">
        <div style={{
          background: 'linear-gradient(135deg, var(--ink) 0%, var(--accent-deep) 55%, var(--accent-cyan) 175%)',
          borderRadius: 'var(--r-xl)', padding: '80px 64px', color: 'white', position: 'relative', overflow: 'hidden'
        }}>
          <div className="orb" style={{ width: 500, height: 500, top: -200, right: -160, background: 'radial-gradient(circle, rgba(27,158,95,0.6), transparent 70%)', opacity: 0.4 }} />
          <div style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }} className="support-grid">
            <div>
              <div className="reveal eyebrow" style={{ marginBottom: 24, color: 'rgba(255,255,255,0.7)' }}>05 · Patient support</div>
              <h2 className="reveal delay-1 serif" style={{ color: 'white', marginBottom: 28 }}>
                We speak your<br />language — <em style={{ color: 'var(--accent-cyan)' }}>around the clock.</em>
              </h2>
              <p className="reveal delay-2" style={{ color: 'rgba(255,255,255,0.75)', fontSize: 17, maxWidth: 460 }}>
                English-speaking coordinators support you from first message to discharge. Indonesian patients are supported via our medical translation devices.
              </p>
            </div>
            <div className="reveal delay-2" style={{ display: 'grid', gap: 12 }}>
              {[
              { icon: <Icon.Clock />, label: '24/7 patient support', sub: 'Reach a coordinator any time, any timezone.' },
              { icon: <Icon.WhatsApp />, label: 'WhatsApp first-line', sub: 'Most patients prefer it — so do we.' },
              { icon: <Icon.Globe />, label: 'English-speaking team', sub: 'No translation app required.' },
              { icon: <Icon.Translate />, label: 'Indonesian via translation device', sub: 'On-site medical translation.' }].
              map((b, i) =>
              <div key={i} style={{
                display: 'flex', gap: 18, alignItems: 'flex-start', padding: 20,
                background: 'rgba(255,255,255,0.05)', borderRadius: 'var(--r-md)',
                border: '1px solid rgba(255,255,255,0.1)', backdropFilter: 'blur(8px)'
              }}>
                  <span style={{ color: 'var(--accent-cyan)', flexShrink: 0 }}>{b.icon}</span>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 600, color: 'white' }}>{b.label}</div>
                    <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.65)', marginTop: 2 }}>{b.sub}</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .support-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
      </div>
    </section>);

}

/* =================== PROCESS =================== */
function Process() {
  const steps = [
  { n: '01', t: 'Contact us', d: 'Reach out via WhatsApp or our online form. No commitment.' },
  { n: '02', t: 'Share your info', d: 'Symptoms, medical history, prior reports. We review confidentially.' },
  { n: '03', t: 'Consultation', d: 'Consult with our coordinator.' },
  { n: '04', t: 'Get your plan', d: 'A personalized screening plan with cost estimate and timeline.' },
  { n: '05', t: 'Visit Japan', d: 'Arrive, screen, get answers — typically in 1–2 days.' }];

  return (
    <section id="process" data-section-bg="alt">
      <div className="container">
        <div className="reveal" style={{ marginBottom: 64 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>06 · How it works</div>
          <h2 className="serif">From first message<br />to <em style={{ color: 'var(--accent-navy)' }}>final answer.</em></h2>
        </div>

        <div style={{ position: 'relative' }}>
          <div style={{ position: 'absolute', top: 36, left: '10%', right: '10%', height: 1, background: 'linear-gradient(90deg, transparent, var(--accent-cyan), transparent)' }} className="process-line" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 24, position: 'relative' }} className="process-grid">
            {steps.map((s, i) =>
            <div key={i} className={`reveal delay-${i + 1}`} style={{ textAlign: 'center' }}>
                <div style={{
                width: 72, height: 72, margin: '0 auto 20px',
                borderRadius: '50%', background: 'white', border: '1px solid var(--line-2)',
                display: 'grid', placeItems: 'center', position: 'relative',
                boxShadow: '0 8px 24px -8px rgba(10,22,40,0.08)'
              }}>
                  <span className="serif" style={{ fontSize: 24 }}>{s.n}</span>
                </div>
                <div className="serif" style={{ fontSize: 22, marginBottom: 8 }}>{s.t}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)', maxWidth: 200, margin: '0 auto', lineHeight: 1.5 }}>{s.d}</div>
              </div>
            )}
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .process-grid { grid-template-columns: 1fr 1fr !important; } .process-line { display:none; } }`}</style>
      </div>
    </section>);

}

/* =================== STAY =================== */
function Stay() {
  const spots = [
    { name: 'Kamogawa Sea World', label: '[marine park]', d: 'Iconic marine park with dolphin and orca shows — perfect for families.' },
    { name: 'Maehara Beach', label: '[white-sand beach]', d: 'Scenic white-sand beach with calm waters, ideal for swimming and sunset views.' },
    { name: 'Oyama Senmaida', label: '[terraced rice paddies]', d: 'Stunning terraced rice paddies changing with the seasons — a designated cultural landscape.' },
    { name: 'Kamogawa SEASIDE BASE', label: '[beachfront cafe complex]', d: 'A beachfront complex with seafood BBQ, craft beer, baked goods and an oceanfront terrace — open all day, pet-friendly.' },
  ];
  return (
    <section id="stay">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }} className="stay-grid">
          {/* Left: title, intro + numbered list */}
          <div>
            <div className="reveal eyebrow" style={{ marginBottom: 24 }}>07 · Experience Japan</div>
            <h2 className="reveal delay-1 serif" style={{ fontSize: 'clamp(34px, 3.6vw, 52px)', textWrap: 'balance', marginBottom: 24 }}>
              Make your visit more than a check-up — <em style={{ color: 'var(--accent-navy)' }}>experience Japan.</em>
            </h2>
            <p className="reveal delay-2" style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.7, marginBottom: 12 }}>
              From strolling along the serene Kamogawa Coastal Promenade, to enjoying the freshest local seafood and exploring lively morning markets, Kamogawa offers a perfect blend of oceanfront leisure and cultural charm. Just around two hours from Tokyo by train, this coastal city combines warm hospitality, scenic landscapes, and a welcoming atmosphere — making it an ideal getaway alongside world-class care at Kameda Medical Center.
            </p>
            <div className="reveal delay-2" style={{ display: 'flex', flexDirection: 'column', marginTop: 24 }}>
              {spots.map((s, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 24, alignItems: 'start',
                  padding: '24px 0', borderTop: '1px solid var(--line-2)',
                  borderBottom: i === spots.length - 1 ? '1px solid var(--line-2)' : 'none'
                }}>
                  <span className="mono" style={{ fontSize: 13, color: 'var(--accent-cyan)', letterSpacing: '0.12em', paddingTop: 6 }}>0{i + 1}</span>
                  <div>
                    <div className="serif" style={{ fontSize: 'clamp(20px, 2vw, 26px)', lineHeight: 1.15, marginBottom: 6 }}>{s.name}</div>
                    <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55, margin: 0 }}>{s.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Right: two photos */}
          <div className="reveal delay-2" style={{ display: 'flex', flexDirection: 'column', gap: 16, position: 'sticky', top: 100 }}>
            {[
              { src: 'assets/stay/maehara-beach.jpg', name: 'Maehara Beach' },
              { src: 'assets/stay/seaside.png', name: 'Kamogawa SEASIDE BASE' },
            ].map((im, i) => (
              <figure key={i} style={{ margin: 0 }}>
                <div style={{
                  position: 'relative', overflow: 'hidden', borderRadius: 'var(--r-lg)',
                  aspectRatio: '16/10', background: 'var(--accent-soft)',
                  boxShadow: '0 20px 40px -24px rgba(12,26,20,0.22)'
                }}>
                  <div className="placeholder" data-label={`[${im.name}]`} style={{ position: 'absolute', inset: 0, borderRadius: 0, border: 'none' }} />
                  <img src={im.src} alt={im.name} style={{
                    position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
                    display: 'block', transition: 'transform 0.7s cubic-bezier(0.2,0.8,0.2,1)'
                  }}
                    onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.05)'}
                    onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'} />
                </div>
                <figcaption className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-3)', marginTop: 12 }}>{im.name}</figcaption>
              </figure>
            ))}
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .stay-grid { grid-template-columns: 1fr !important; gap: 40px !important; } .stay-grid > div:last-child { position: static !important; } }`}</style>
      </div>
    </section>);

}

/* =================== FINAL CTA + FOOTER =================== */
function FinalCTA() {
  return (
    <section id="cta" style={{ paddingBottom: 60 }}>
      <div className="container">
        <div style={{
          textAlign: 'center', maxWidth: 900, margin: '0 auto', padding: '80px 40px',
          background: 'white', borderRadius: 'var(--r-xl)', border: '1px solid var(--line)',
          position: 'relative', overflow: 'hidden',
          boxShadow: '0 40px 80px -40px rgba(10,22,40,0.15)'
        }}>
          <div className="orb" style={{ width: 400, height: 400, top: -180, left: '50%', transform: 'translateX(-50%)', background: 'radial-gradient(circle, oklch(0.85 0.13 152), transparent 70%)', opacity: 0.5 }} />
          <div style={{ position: 'relative', zIndex: 1 }}>
            <div className="reveal eyebrow" style={{ justifyContent: 'center', display: 'inline-flex', marginBottom: 28 }}>Get started in 30 seconds</div>
            <h2 className="reveal delay-1 serif" style={{ marginBottom: 24, fontSize: 'clamp(40px, 5vw, 72px)' }}>
              Your heart is worth<br />a <em style={{ color: 'var(--accent-navy)' }}>second look.</em>
            </h2>
            <p className="reveal delay-2" style={{ fontSize: 'clamp(14px, 1.35vw, 18px)', color: 'var(--ink-2)', maxWidth: 'none', margin: '0 auto 36px', whiteSpace: 'nowrap', textWrap: 'nowrap' }}>
              We respond within 30 minutes — even at midnight, even on holidays.
            </p>
            <div className="reveal delay-3" style={{ display: 'inline-flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
              <a href="https://wa.me/817073815194?text=Hi%20Kameda%2C%20I%20would%20like%20to%20learn%20more%20about%20the%20Heart%20Screening%20program." target="_blank" rel="noopener" className="btn btn-wa" style={{ padding: '20px 32px', fontSize: 16 }}>
                <Icon.WhatsApp size={18} /> Chat on WhatsApp Now <Icon.Arrow size={16} />
              </a>
            </div>
            <div className="reveal delay-4 mono" style={{ marginTop: 32, fontSize: 11, letterSpacing: '0.16em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>

            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start', marginBottom: 56 }} className="footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, background: 'linear-gradient(135deg, var(--accent-cyan), var(--accent-navy))', display: 'grid', placeItems: 'center' }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12h4l2-4 3 8 2-4h7" /></svg>
              </div>
              <div>
                <div className="serif" style={{ fontSize: 22, color: 'white', lineHeight: 1.1 }}>Kameda Medical Center</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', marginTop: 4 }}>World&rsquo;s Best Hospitals 2026 · Rank 74</div>
              </div>
            </div>
            <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', marginTop: 20, lineHeight: 1.6 }}>
              929 Higashi-cho, Kamogawa,<br />Chiba 296-8602, Japan
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
              <a href="https://wa.me/817073815194?text=Hi%20Kameda%2C%20I%20would%20like%20to%20learn%20more%20about%20the%20Heart%20Screening%20program." target="_blank" rel="noopener" className="btn btn-wa" style={{ padding: '12px 20px', fontSize: 13 }}>
                <Icon.WhatsApp size={14} /> Chat on WhatsApp
              </a>
            </div>
          </div>
          <div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', marginBottom: 16 }}>Disclaimer</div>
            <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', lineHeight: 1.7 }}>
              This page is for screening purposes only. Final medical decisions are made by physicians during consultation. All patient data is handled securely under Japanese privacy regulation.
            </p>
          </div>
        </div>
        <div style={{ paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.1)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16, fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>
          <div>© 2026 Kameda Medical Center · International Patient Program</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="#">Privacy</a><a href="#">Terms</a><a href="#">Cookies</a>
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
      </div>
    </footer>);

}

Object.assign(window, { WhyKameda, Doctors, Support, Process, Stay, FinalCTA, Footer });