/* global React, Icon */
const { useEffect: useEffect2, useRef: useRef2, useState: useState2 } = React;

/* =================== HERO =================== */
function Hero() {
  const ecgRef = useRef2(null);
  // Mouse parallax for orbs
  const wrapRef = useRef2(null);
  useEffect2(() => {
    const w = wrapRef.current;
    if (!w) return;
    const onMove = (e) => {
      const rect = w.getBoundingClientRect();
      const x = (e.clientX - rect.left) / rect.width - 0.5;
      const y = (e.clientY - rect.top) / rect.height - 0.5;
      w.style.setProperty('--mx', x);
      w.style.setProperty('--my', y);
    };
    w.addEventListener('mousemove', onMove);
    return () => w.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <section id="top" ref={wrapRef} style={{ paddingTop: 180, paddingBottom: 80, overflow: 'hidden', position: 'relative', "--mx": "0.49735099337748345", "--my": "-0.027321078601271698" }}>
      {/* Floating orbs */}
      <div className="orb" style={{
        width: 520, height: 520, top: -120, right: -80,
        background: 'radial-gradient(circle, oklch(0.85 0.13 152) 0%, transparent 70%)',
        transform: 'translate(calc(var(--mx, 0) * 30px), calc(var(--my, 0) * 30px))',
        transition: 'transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)'
      }} />
      <div className="orb" style={{
        width: 380, height: 380, bottom: -120, left: -80,
        background: 'radial-gradient(circle, oklch(0.92 0.06 158) 0%, transparent 70%)',
        animationDelay: '-6s',
        transform: 'translate(calc(var(--mx, 0) * -20px), calc(var(--my, 0) * -20px))',
        transition: 'transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)'
      }} />

      {/* Subtle grid */}
      <div className="gridlines" style={{ opacity: 0.6 }} />

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 80, alignItems: 'end' }} className="hero-grid">
          <div>
            <a href="https://rankings.newsweek.com/worlds-best-hospitals-2026" target="_blank" rel="noopener" className="reveal newsweek-badge" style={{ marginBottom: 32, display: 'inline-flex', alignItems: 'center', gap: 12, padding: '8px 16px 8px 8px', background: 'white', border: '1px solid var(--line)', borderRadius: 999, boxShadow: '0 8px 24px -16px rgba(10,22,40,0.18)', textDecoration: 'none', transition: 'transform .25s, box-shadow .25s, border-color .25s' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', background: 'linear-gradient(135deg, var(--accent-cyan), var(--accent-navy))', color: 'white', borderRadius: 999, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600 }}>
                <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l2.39 7.36H22l-6.18 4.49L18.21 22 12 17.27 5.79 22l2.39-8.15L2 9.36h7.61z" /></svg>
                Newsweek
              </span>
              <span style={{ fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.005em' }}>
                World&rsquo;s Best Hospitals 2026
              </span>
              <span style={{ width: 1, height: 14, background: 'var(--line-2)' }} />
              <span style={{ fontFamily: 'var(--serif)', fontSize: 18, color: 'var(--accent-navy)', lineHeight: 1 }}>
                #74
              </span>
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--ink-3)', marginLeft: 2 }} aria-hidden="true"><path d="M7 17L17 7M9 7h8v8" /></svg>
            </a>
            <style>{`
              .newsweek-badge:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(10,22,40,0.22); border-color: rgba(27,158,95,0.4); }
              .newsweek-badge:hover svg[stroke] { color: var(--accent-cyan); }
            `}</style>
            <h1 className="reveal delay-1 serif" style={{ marginBottom: 28, fontSize: "90px" }}>
              Heart problems<br />
              can be <em style={{ fontStyle: 'normal', color: 'var(--accent-navy)', fontSize: "90px" }}>silent.</em><br />
              <span style={{ color: 'var(--ink-3)', fontSize: "80px" }}>Get checked</span><br />
              <span className="hero-lastline" style={{ color: 'var(--ink-3)', fontSize: "80px" }}>before it's too late.</span>
            </h1>
            <p className="reveal delay-2" style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--ink-2)', marginBottom: 14, opacity: "1", maxWidth: 620 }}>
              Complete heart screening in Japan at <strong style={{ color: 'var(--ink)' }}>Kameda Medical Center</strong>,<br />a world-class heart institution.
            </p>
            <p className="reveal delay-2" style={{ fontSize: 16, maxWidth: 560, lineHeight: 1.7, color: 'var(--ink-3)', marginBottom: 40 }}>
              ・Complete diagnosis in 1–2 days<br />
              ・Trusted by international patients across Asia.
            </p>

            <div className="reveal delay-3" style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 36 }}>
              <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
                <Icon.Arrow size={14} />
              </a>
              <a href="#screening" className="btn btn-ghost">
                Explore screening
              </a>
            </div>

            <div className="reveal delay-4" style={{ display: 'flex', gap: 28, flexWrap: 'wrap', alignItems: 'center', color: 'var(--ink-3)', fontSize: 13 }}>
              <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--whatsapp)', boxShadow: '0 0 0 4px rgba(37,211,102,0.18)', animation: 'pulse 2s infinite' }} />
                Online consultation available
              </span>
              <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
                <Icon.Clock size={14} />
                We respond 24/7
              </span>
            </div>
          </div>

          {/* Right: ECG + image card */}
          <div className="reveal delay-2" style={{ position: 'relative', minHeight: 500 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, transform: 'translate(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -10px))', transition: 'transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)' }}>
              {/* Exterior — landscape */}
              <div style={{
                aspectRatio: '16/10',
                borderRadius: 'var(--r-lg)',
                overflow: 'hidden',
                boxShadow: '0 30px 60px -30px rgba(10,22,40,0.25)',
                position: 'relative',
                background: 'var(--accent-soft)'
              }}>
                <img src="assets/hero-exterior.jpg" alt="Kameda Medical Center · main campus" style={{
                  width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 60%', display: 'block'
                }} />
                <div style={{
                  position: 'absolute', inset: 0, pointerEvents: 'none',
                  background: 'linear-gradient(180deg, transparent 55%, rgba(10,22,40,0.28) 100%)'
                }} />
                <div style={{
                  position: 'absolute', left: 16, bottom: 16,
                  fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em',
                  textTransform: 'uppercase', color: 'white',
                  background: 'rgba(10,22,40,0.55)', backdropFilter: 'blur(6px)',
                  padding: '6px 10px', borderRadius: 4
                }}>KAMEDA MEDICAL CENTER · CHIBA, JAPAN</div>
              </div>

              {/* Cath lab — landscape */}
              <div style={{
                aspectRatio: '16/10',
                borderRadius: 'var(--r-lg)',
                overflow: 'hidden',
                boxShadow: '0 30px 60px -30px rgba(10,22,40,0.25)',
                position: 'relative',
                background: 'var(--accent-soft)'
              }}>
                <img src="assets/hero-cathlab.jpg" alt="Cardiac catheterization · advanced imaging" style={{
                  width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center center', display: 'block'
                }} />
                <div style={{
                  position: 'absolute', inset: 0, pointerEvents: 'none',
                  background: 'linear-gradient(180deg, transparent 55%, rgba(10,22,40,0.28) 100%)'
                }} />
                <div style={{
                  position: 'absolute', left: 16, bottom: 16,
                  fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em',
                  textTransform: 'uppercase', color: 'white',
                  background: 'rgba(10,22,40,0.55)', backdropFilter: 'blur(6px)',
                  padding: '6px 10px', borderRadius: 4
                }}>REIMAGINED CARDIOLOGY</div>
              </div>
            </div>

            {/* Floating stat card removed */}

            {/* ECG strip removed */}
          </div>
        </div>

        {/* Bottom marquee strip */}
        <div className="reveal" style={{ marginTop: 96, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 20 }}>
            Trusted by international patients from
          </div>
          <div className="marquee">
            <div className="marquee-track">
              {Array(4).fill(['China', 'Vietnam', 'Philippines', 'South Korea', 'USA']).flat().map((c, i) =>
              <span key={i} className="serif" style={{ fontSize: 32, color: 'var(--ink-2)', fontStyle: 'italic', whiteSpace: 'nowrap' }}>
                  {c} <span style={{ color: 'var(--accent-cyan)', margin: '0 12px' }}>✦</span>
                </span>
              )}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes ecg { 0% { stroke-dashoffset: 600; } 50%, 100% { stroke-dashoffset: 0; } }
        @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); } 50% { box-shadow: 0 0 0 8px rgba(37,211,102,0); } }
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>);

}

/* =================== TRUST INTRO =================== */
function TrustIntro() {
  return (
    <section style={{ padding: '120px 0' }}>
      <div className="container">
        <div className="reveal" style={{ textAlign: 'center', maxWidth: 1100, margin: '0 auto' }}>
          <div className="eyebrow" style={{ marginBottom: 28, justifyContent: 'center', display: 'inline-flex' }}>
            A second opinion that matters
          </div>
          <h2 className="serif" style={{ marginBottom: 32 }}>
            Even when other hospitals
            <br className="br-desk" />{' '}
            <em style={{ color: 'var(--accent-navy)' }}>cannot treat</em> —
            <br className="br-mob" />{' '}
            our specialists<br />
            provide advanced solutions.
          </h2>
          <div className="reveal delay-2" style={{ display: 'inline-flex', gap: 16, marginTop: 16, 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">
              <Icon.WhatsApp size={16} /> Chat on WhatsApp
            </a>
            <a href="#why" className="btn btn-ghost">See why patients trust us</a>
          </div>
        </div>
      </div>
    </section>);

}

/* =================== SYMPTOMS =================== */
function Symptoms() {
  const symptoms = [
  { label: 'Chest pain', sub: 'Pressure, tightness, squeezing — even brief episodes matter.' },
  { label: 'Shortness of breath', sub: 'Difficulty breathing during light activity, or at rest.' },
  { label: 'Irregular heartbeat', sub: 'Fluttering, racing, or skipped beats — recurring or persistent.' }];

  return (
    <section id="symptoms" data-section-bg="alt">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 80, alignItems: 'start' }} className="two-col">
          <div>
            <div className="reveal eyebrow" style={{ marginBottom: 24 }}>01 · Recognize the signs</div>
            <h2 className="reveal delay-1 serif">Do you have<br />any of these?</h2>
            <p className="reveal delay-2" style={{ marginTop: 24, fontSize: 18, maxWidth: 460, color: 'var(--ink-2)' }}>Heart conditions can be silent 
until they become serious.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {symptoms.map((s, i) =>
            <div key={i} className={`reveal delay-${i + 1}`} style={{
              display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 24,
              alignItems: 'center', padding: '28px 0', borderBottom: i < symptoms.length - 1 ? '1px solid var(--line-2)' : 'none'
            }}>
                <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.12em' }}>0{i + 1}</span>
                <div>
                  <div className="serif" style={{ fontSize: 32, lineHeight: 1.15, marginBottom: 6 }}>{s.label}</div>
                  <div style={{ color: 'var(--ink-3)', fontSize: 15 }}>{s.sub}</div>
                </div>
                <Icon.Plus size={20} />
              </div>
            )}
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .two-col { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
      </div>
    </section>);

}

/* =================== SOLUTION + SCREENING =================== */
function Screening() {
  return (
    <section id="screening">
      <div className="container">
        <div className="reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 64, gap: 40, flexWrap: 'wrap' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>02 · Heart Screening Package</div>
            <h2 className="serif">Complete heart check<br />in Japan — <em style={{ color: 'var(--accent-navy)' }}>1 to 2 days.</em></h2>
          </div>
          <p style={{ maxWidth: 380, color: 'var(--ink-2)', fontSize: 16 }}>

          </p>
        </div>

        <div className="reveal" style={{ marginBottom: 32, padding: '20px 24px', background: 'var(--accent-soft)', border: '1px solid rgba(27,158,95,0.25)', borderRadius: 'var(--r-md)', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
          <span className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--accent-navy)', flexShrink: 0, padding: '3px 8px', background: 'white', borderRadius: 4, marginTop: 1 }}>Note</span>
          <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.65, margin: 0 }}>
            The 1-Day course focuses on <strong style={{ color: 'var(--ink)' }}>initial heart investigation</strong>. The 2-Day course includes 24-hour arrhythmia check-up. Both courses include CT scan with contrast. Therefore, patients with worsened kidney function need modification of the course. Please share your kidney function or blood test result if you already know it.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }} className="screening-grid">
          {/* 1-Day */}
          <div className="reveal card" style={{ padding: 48, position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 36 }}>
              <div>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--accent-cyan)', textTransform: 'uppercase', marginBottom: 12 }}>Express · Day 01</div>
                <h3 className="serif" style={{ fontSize: 'clamp(32px, 3vw, 44px)' }}>1-Day Heart Check</h3>
              </div>
              <div className="serif" style={{ fontSize: 72, lineHeight: 0.9, color: 'var(--accent-soft)' }}>01</div>
            </div>

            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 16 }}>Included examinations</div>
            <ul style={{ listStyle: 'none', display: 'grid', gap: 0, marginBottom: 32, flex: 1 }}>
              {[
              'Blood test including heart failure marker',
              'Electrocardiogram (ECG)',
              'Cardiac ultrasound (Echocardiography)',
              'Coronary and whole-body CT scan with contrast',
              'Blood pressure measurement',
              'Physical measurement',
              'Medical examination by cardiologist'].
              map((it, i) =>
              <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', fontSize: 14.5, color: 'var(--ink-2)', padding: '12px 0', borderTop: i === 0 ? '1px solid var(--line)' : '1px solid var(--line)', borderBottom: 'none' }}>
                  <span style={{ color: 'var(--accent-cyan)', flexShrink: 0, marginTop: 2 }}><Icon.Check size={16} /></span>
                  <span>{it}</span>
                </li>
              )}
            </ul>

            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingTop: 24, borderTop: '1px solid var(--line)' }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>From</span>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span className="serif" style={{ fontSize: 56, lineHeight: 1, letterSpacing: '-0.02em' }}>¥113,000</span>
              </div>
            </div>
          </div>

          {/* 2-Day */}
          <div className="reveal delay-1 card" style={{ padding: 48, background: 'linear-gradient(180deg, var(--ink) 0%, var(--accent-deep) 100%)', color: 'white', borderColor: 'transparent', position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            {/* recommended ribbon */}
            <div className="mono" style={{ position: 'absolute', top: 20, right: 20, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink)', background: 'var(--accent-cyan)', padding: '6px 12px', borderRadius: 999 }}>
              Recommended
            </div>

            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 36 }}>
              <div>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--accent-cyan)', textTransform: 'uppercase', marginBottom: 12 }}>Comprehensive · Day 01–02</div>
                <h3 className="serif" style={{ color: 'white', fontSize: 'clamp(32px, 3vw, 44px)' }}>2-Day Heart Check</h3>
              </div>
              <div className="serif" style={{ fontSize: 72, lineHeight: 0.9, color: 'rgba(255,255,255,0.18)' }}>02</div>
            </div>

            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', marginBottom: 16 }}>Included examinations</div>
            <ul style={{ listStyle: 'none', display: 'grid', gap: 0, marginBottom: 32, flex: 1 }}>
              {[
              { t: 'Blood test including heart failure marker' },
              { t: 'Electrocardiogram (ECG)' },
              { t: 'Cardiac ultrasound (Echocardiography)' },
              { t: 'Coronary and whole-body CT scan with contrast' },
              { t: '24-hour Patched ECG monitoring', new: true },
              { t: 'Blood pressure measurement' },
              { t: 'Physical measurement' },
              { t: 'Medical examination by cardiologist' }].
              map((it, i) =>
              <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', fontSize: 14.5, color: it.new ? 'white' : 'rgba(255,255,255,0.82)', padding: '12px 0', borderTop: '1px solid rgba(255,255,255,0.1)', fontWeight: it.new ? 600 : 400 }}>
                  <span style={{ color: 'var(--accent-cyan)', flexShrink: 0, marginTop: 2 }}><Icon.Check size={16} /></span>
                  <span>{it.t}{it.new && <span className="mono" style={{ marginLeft: 10, fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--accent-cyan)', border: '1px solid rgba(14,165,233,0.4)', padding: '2px 6px', borderRadius: 4, verticalAlign: 'middle' }}>added</span>}</span>
                </li>
              )}
            </ul>

            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.16)' }}>
              <span className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>From</span>
              <span className="serif" style={{ fontSize: 56, lineHeight: 1, letterSpacing: '-0.02em' }}>¥160,000</span>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .screening-grid { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </section>);

}

Object.assign(window, { Hero, TrustIntro, Symptoms, Screening });