// Home page — refined orthodox layout (was V1)
const Home = ({ lang, t, go }) => {
  const T = TOKENS;
  const fs = lang === 'jp' ? fontJP : fontEN;
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);
  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return (
    <div style={{ fontFamily: fs, color: T.ink, background: T.paper, letterSpacing: lang === 'jp' ? 0.02 : 0 }}>
      {/* Hero */}
      {isMobile ? (
        /* ── スマホ：写真背景＋テキストオーバーレイ ── */
        <section id="hero-section" style={{ position: 'relative' }}>
          <img src="images/exterior.png" alt="三浦医院 外観" style={{
            width: '100%', height: 'auto', display: 'block',
          }} />
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(to top, rgba(10,30,60,0.88) 0%, rgba(10,30,60,0.55) 45%, rgba(10,30,60,0.1) 100%)',
          }} />
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '24px 20px 32px' }}>
            <h1 style={{ fontSize: 32, fontWeight: 700, lineHeight: 1.3, margin: '0 0 20px', color: '#fff', letterSpacing: lang === 'jp' ? 2 : -1 }}>
              {t.tagline.split('\n').map((line, i, arr) => (
                <React.Fragment key={i}>{line}{i < arr.length - 1 && <br />}</React.Fragment>
              ))}
            </h1>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <a href={`tel:${t.phone.replace(/-/g,'')}`} style={{
                padding: '16px', background: T.primary, color: '#fff', fontWeight: 700, fontSize: 16,
                borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, textDecoration: 'none',
              }}>{Icon.phone(14, '#fff')} {t.phone}</a>
              <button onClick={() => go('depts')} style={{
                padding: '14px', background: 'rgba(255,255,255,0.15)', color: '#fff', border: '1px solid rgba(255,255,255,0.5)',
                cursor: 'pointer', fontWeight: 700, fontSize: 15, borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, fontFamily: 'inherit',
              }}>{t.departmentsTitle} {Icon.arrow(14, '#fff')}</button>
            </div>
          </div>
        </section>
      ) : (
        /* ── PC：左テキスト＋右写真の2カラム ── */
        <section style={{ background: T.bgWarm }}>
          <div style={{ maxWidth: 1480, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 0 }}>
            <div style={{ padding: '88px 56px 96px 40px' }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 11.5, color: T.primary, fontWeight: 700, marginBottom: 26, letterSpacing: 2, fontFamily: fontMono }}>
                <span style={{ width: 28, height: 1, background: T.primary }}></span>
                {lang === 'jp' ? '内科クリニック · 唐津市呼子町' : 'INTERNAL MEDICINE · YOBUKO'}
              </div>
              <h1 style={{ fontSize: 56, fontWeight: 700, lineHeight: 1.3, margin: 0, color: T.ink, letterSpacing: lang === 'jp' ? 3 : -1, textWrap: 'balance' }}>
                {t.tagline.split('\n').map((line, i, arr) => (
                  <React.Fragment key={i}>{line}{i < arr.length - 1 && <br />}</React.Fragment>
                ))}
              </h1>
              <p style={{ fontSize: 16, lineHeight: 2, color: T.body, marginTop: 32, maxWidth: 540, textWrap: 'pretty' }}>{t.leadParagraph}</p>
              <div style={{ display: 'flex', gap: 12, marginTop: 40 }}>
                <a href={`tel:${t.phone.replace(/-/g,'')}`} style={{
                  padding: '17px 28px', background: T.primary, color: '#fff',
                  fontWeight: 700, fontSize: 15, borderRadius: 4, display: 'inline-flex', alignItems: 'center', gap: 10, textDecoration: 'none',
                }}>{Icon.phone(14, '#fff')} {t.phone}</a>
                <button onClick={() => go('depts')} style={{
                  padding: '17px 28px', background: '#fff', color: T.primary, border: `1px solid ${T.primary}`, cursor: 'pointer',
                  fontWeight: 700, fontSize: 15, borderRadius: 4, display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: 'inherit',
                }}>{t.departmentsTitle} {Icon.arrow(14, T.primary)}</button>
              </div>
            </div>
            <div style={{ position: 'relative' }}>
              <img src="images/exterior.png" alt="三浦医院 外観" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 70%', display: 'block' }} />
              <div style={{
                position: 'absolute', bottom: 36, left: -56, background: T.paper, padding: '22px 28px',
                boxShadow: '0 16px 36px rgba(15,40,80,0.12)', borderLeft: `4px solid ${T.primary}`, minWidth: 300,
              }}>
                <div style={{ fontSize: 11, color: T.muted, fontWeight: 700, letterSpacing: 1.5, fontFamily: fontMono }}>{t.quickPhone.toUpperCase()}</div>
                <div style={{ fontSize: 30, fontWeight: 700, color: T.primary, marginTop: 6, display: 'flex', alignItems: 'center', gap: 12, fontFamily: fontMono, letterSpacing: -0.5 }}>
                  {Icon.phone(20, T.primary)} {t.phone}
                </div>
                <div style={{ fontSize: 12, color: T.muted, marginTop: 6, lineHeight: 1.7 }}>{t.phoneNote}</div>
              </div>
            </div>
          </div>
        </section>
      )}

      <NoticeBar lang={lang} t={t} />

      {/* Hours */}
      <section style={{ padding: '96px 40px', background: T.paper }}>
        <div style={{ maxWidth: 1480, margin: '0 auto' }}>
          <SectionHead lang={lang} kicker={lang === 'jp' ? '01 — 診療時間' : '01 · HOURS'} title={t.hoursTitle} />
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 56, marginTop: 40 }}>
            <div style={{ border: `1px solid ${T.hairline}` }}>
              <div style={{ display: 'grid', gridTemplateColumns: '120px repeat(6, 1fr)', background: T.bgWarm, borderBottom: `1px solid ${T.hairline}` }}>
                <div></div>
                {t.days.slice(0, 6).map((d, i) => (
                  <div key={i} style={{
                    padding: '16px 0', textAlign: 'center', fontWeight: 700, fontSize: 14,
                    color: i === 5 ? '#2576c8' : T.body,
                    borderLeft: `1px solid ${T.hairline}`,
                  }}>{d}</div>
                ))}
              </div>
              {[
                { label: '8:30〜12:00', cells: ['○','◎','○','○','○','※'] },
                { label: '13:30〜17:00', cells: ['○','◎','','△','○',''] },
              ].map((row, ri, arr) => (
                <div key={ri} style={{ display: 'grid', gridTemplateColumns: '120px repeat(6, 1fr)', borderBottom: ri < arr.length - 1 ? `1px solid ${T.hairline}` : 'none' }}>
                  <div style={{ padding: '22px 16px', fontSize: 13, color: T.muted, fontWeight: 700, background: T.bgWarm, fontFamily: fontMono }}>
                    {row.label}
                  </div>
                  {row.cells.map((v, i) => (
                    <div key={i} style={{
                      padding: '22px 0', textAlign: 'center', fontWeight: 700, borderLeft: `1px solid ${T.hairline}`,
                      fontSize: v === '※' ? 13 : 20,
                      color: v === '' ? T.muted : v === '※' ? '#d97706' : v === '◎' ? '#0e7490' : v === '△' ? '#7c3aed' : T.primary,
                    }}>{v}</div>
                  ))}
                </div>
              ))}
              <div style={{ padding: '14px 20px', borderTop: `1px solid ${T.hairline}`, display: 'flex', gap: 10, flexWrap: 'wrap', background: '#f8fbff' }}>
                {[
                  { sym: '○', color: T.primary, bg: '#e8f4e8', label: lang === 'jp' ? '診療あり' : 'Open' },
                  { sym: '◎', color: '#0e7490', bg: '#e0f5f8', label: lang === 'jp' ? '火曜：〜19:00' : 'Tue: until 19:00' },
                  { sym: '△', color: '#7c3aed', bg: '#f0ecfd', label: lang === 'jp' ? '木曜午後：14:00〜' : 'Thu PM: from 14:00' },
                  { sym: '※', color: '#d97706', bg: '#fef3e0', label: lang === 'jp' ? '第2・第4土曜のみ' : '2nd & 4th Sat only' },
                ].map(({ sym, color, bg, label }) => (
                  <span key={sym} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: bg, border: `1px solid ${color}22`, borderRadius: 4, padding: '3px 10px', fontSize: 13 }}>
                    <span style={{ color, fontWeight: 800, fontSize: 15 }}>{sym}</span>
                    <span style={{ color: '#444', fontWeight: 500 }}>{label}</span>
                  </span>
                ))}
              </div>
              <div style={{ padding: '12px 20px', borderTop: `1px solid ${T.hairline}`, fontSize: 13, fontWeight: 700, color: T.primaryDeep, background: '#eef4fb', display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 16 }}>🗓</span>
                {t.closed}
              </div>
            </div>
            <div>
              <div style={{ marginTop: 28, display: 'grid', gap: 12 }}>
                {[
                  { i: Icon.phone(18, T.primary), l: t.quickPhone, v: t.phone, mono: true },
                  { i: Icon.pin(18, T.primary), l: t.nav.access, v: t.bus, action: () => go('access') },
                  { i: Icon.cross(16, T.primary), l: lang === 'jp' ? '院内CT' : 'CT Imaging', v: lang === 'jp' ? '撮影可能' : 'Available', action: () => go('facil') },
                ].map((r, i) => (
                  <button key={i} onClick={r.action} style={{ background: T.paper, border: `1px solid ${T.hairline}`, cursor: r.action ? 'pointer' : 'default', padding: '16px 20px', display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'inherit', textAlign: 'left' }}>
                    <div style={{ width: 38, height: 38, borderRadius: 19, background: T.accentSoft, display: 'grid', placeItems: 'center' }}>{r.i}</div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 11, color: T.muted, letterSpacing: 1.2, fontWeight: 700, fontFamily: fontMono }}>{r.l.toUpperCase()}</div>
                      <div style={{ fontSize: 16, fontWeight: 700, color: T.ink, marginTop: 3, fontFamily: r.mono ? fontMono : 'inherit' }}>{r.v}</div>
                    </div>
                    {r.action && Icon.arrow(14, T.muted)}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Departments */}
      <section style={{ padding: '96px 40px', background: T.bgWarm }}>
        <div style={{ maxWidth: 1480, margin: '0 auto' }}>
          <SectionHead lang={lang} kicker={lang === 'jp' ? '02 — 診療内容' : '02 · CARE'} title={t.departmentsTitle} action={t.moreDepts} onAction={() => go('depts')} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, marginTop: 40, border: `1px solid ${T.hairline}`, background: T.paper }}>
            {t.departments.map((d, i) => {
              const cols = 2;
              const total = t.departments.length;
              const lastRowStart = total - ((total % cols) || cols);
              const isLastInRow = ((i + 1) % cols === 0) || i === total - 1;
              const inLastRow = i >= lastRowStart;
              return (
              <div key={i} style={{
                padding: '44px 40px',
                borderRight: !isLastInRow ? `1px solid ${T.hairline}` : 'none',
                borderBottom: !inLastRow ? `1px solid ${T.hairline}` : 'none',
                minHeight: 280, display: 'flex', flexDirection: 'column',
              }}>
                <div style={{ fontSize: 26, fontWeight: 700, color: T.primarySoft, fontFamily: fontMono, lineHeight: 1, letterSpacing: 1 }}>{String(i+1).padStart(2,'0')}</div>
                <div style={{ fontSize: 19, fontWeight: 700, color: T.ink, marginTop: 28, lineHeight: 1.4 }}>{d.name}</div>
                <ul style={{ marginTop: 16, padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px 24px' }}>
                  {d.items.map((it, j) => (
                    <li key={j} style={{ display: 'flex', gap: 10, fontSize: 14, color: T.body, lineHeight: 1.7 }}>
                      <span style={{ color: T.accent, flexShrink: 0 }}>—</span>{it}
                    </li>
                  ))}
                </ul>
                {d.note && (
                  <div style={{ marginTop: 20, padding: '8px 14px', background: T.bgWarm, borderLeft: `3px solid ${T.primary}`, fontSize: 13, color: T.primaryDeep, fontWeight: 600, lineHeight: 1.6 }}>
                    {d.note}
                  </div>
                )}
              </div>
            );})}
          </div>
          <div style={{ marginTop: 24, textAlign: 'center', fontSize: 13, color: T.muted }}>{t.departmentsNote}</div>
        </div>
      </section>



      {/* News + Facilities */}
      <section style={{ padding: '96px 40px', background: T.bgWarm }}>
        <div style={{ maxWidth: 1480, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64 }}>
          <div>
            <SectionHead lang={lang} kicker={lang === 'jp' ? '04 — お知らせ' : '04 · NEWS'} title={t.newsTitle} action={t.moreNews} onAction={() => go('news')} />
            <div style={{ marginTop: 36, background: T.paper, border: `1px solid ${T.hairline}` }}>
              {t.news.map((n, i) => (
                <button key={i} onClick={() => go('news', { id: i })} style={{
                  display: 'grid', gridTemplateColumns: '120px 100px 1fr 20px', gap: 18, alignItems: 'center', width: '100%',
                  padding: '20px 22px', borderBottom: i < t.news.length - 1 ? `1px solid ${T.hairline}` : 'none',
                  background: 'transparent', border: 'none', borderBottomWidth: i < t.news.length - 1 ? 1 : 0, cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit',
                }}>
                  <div style={{ fontSize: 13, color: T.muted, fontFamily: fontMono }}>{n.date}</div>
                  <div style={{ fontSize: 11, fontWeight: 700, color: T.primary, padding: '5px 10px', border: `1px solid ${T.primary}`, textAlign: 'center', letterSpacing: 1 }}>{n.tag}</div>
                  <div style={{ fontSize: 14.5, color: T.ink, lineHeight: 1.6 }}>{n.t}</div>
                  {Icon.arrow(13, T.muted)}
                </button>
              ))}
            </div>
          </div>
          <div>
            <SectionHead lang={lang} kicker={lang === 'jp' ? '05 — 院内設備' : '05 · FACILITIES'} title={t.facilitiesTitle} action={t.moreFacilities} onAction={() => go('facil')} />
            <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 6 }}>
              <img src="images/entrance.png" alt={lang === 'jp' ? '玄関' : 'Entrance'} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', maxHeight: 380 }} />
              <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 6 }}>
                <img src="images/waiting-room-1.png" alt={lang === 'jp' ? '待合室' : 'Waiting room'} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                <img src="images/waiting-room-2.png" alt={lang === 'jp' ? '待合室' : 'Waiting room'} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </div>
            </div>
            <div style={{ marginTop: 16, fontSize: 12.5, color: T.body, padding: '12px 16px', background: T.paper, border: `1px solid ${T.hairline}`, display: 'flex', gap: 10, alignItems: 'flex-start', lineHeight: 1.7 }}>
              <span style={{ width: 8, height: 8, borderRadius: 4, background: T.ok, marginTop: 6, flexShrink: 0 }}></span>{t.facilitiesNote}
            </div>
          </div>
        </div>
      </section>

      {/* Specialty Clinics */}
      <section style={{ padding: '96px 40px', background: T.bgWarm }}>
        <div style={{ maxWidth: 1480, margin: '0 auto' }}>
          <SectionHead lang={lang} kicker={lang === 'jp' ? '06 — 専門外来' : '06 · SPECIALTY CLINIC'} title={lang === 'jp' ? '専門外来のご案内' : 'Specialty Clinics'} />
          <p style={{ marginTop: 16, fontSize: 14, color: T.muted, lineHeight: 1.8 }}>
            {lang === 'jp' ? '各専門病院の医師が当院にて診察を行っております。受診を希望される方は受付にお声がけください。' : 'Visiting specialists from partner hospitals are available at our clinic.'}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, marginTop: 36 }}>
            {[
              {
                dept: lang === 'jp' ? '循環器専門外来' : 'Cardiology',
                schedule: lang === 'jp' ? '毎週水曜日' : 'Every Wednesday',
                doctor: lang === 'jp' ? '藤見幹太 先生' : 'Dr. Fujimi Kanta',
                hospital: lang === 'jp' ? '福岡大学病院 循環器科' : 'Fukuoka University Hospital, Cardiology',
              },
              {
                dept: lang === 'jp' ? '呼吸器専門外来' : 'Pulmonology',
                schedule: lang === 'jp' ? '毎月第2土曜日' : '2nd Saturday monthly',
                doctor: lang === 'jp' ? '若松謙太郎 先生' : 'Dr. Wakamatsu Kentaro',
                hospital: lang === 'jp' ? '大牟田病院 呼吸器科' : 'Omuta Hospital, Respiratory Medicine',
              },
            ].map((clinic) => (
              <div key={clinic.dept} style={{ background: T.paper, border: `1px solid ${T.hairline}`, padding: '32px 36px', display: 'flex', gap: 24 }}>
                <div style={{ width: 4, flexShrink: 0, background: T.primary, borderRadius: 2 }} />
                <div>
                  <div style={{ fontSize: 11, fontWeight: 700, color: T.primary, letterSpacing: 2, fontFamily: fontMono, marginBottom: 8 }}>{clinic.schedule.toUpperCase()}</div>
                  <div style={{ fontSize: 20, fontWeight: 700, color: T.ink, marginBottom: 10 }}>{clinic.dept}</div>
                  <div style={{ fontSize: 14, color: T.muted, lineHeight: 1.7 }}>{clinic.hospital}</div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: T.body, marginTop: 6 }}>{clinic.doctor}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Access */}
      <section style={{ padding: '96px 40px', background: T.paper }}>
        <div style={{ maxWidth: 1480, margin: '0 auto' }}>
          <SectionHead lang={lang} kicker={lang === 'jp' ? '07 — アクセス' : '07 · ACCESS'} title={t.accessTitle} action={lang === 'jp' ? '地図ページへ' : 'Map page'} onAction={() => go('access')} />
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, marginTop: 40 }}>
            <div>
              <iframe
                src="https://maps.google.com/maps?q=%E4%B8%89%E6%B5%A6%E5%8C%BB%E9%99%A2+%E4%BD%90%E8%B3%80%E7%9C%8C%E5%94%90%E6%B4%A5%E5%B8%82%E5%91%BC%E5%AD%90%E7%94%BA&z=16&output=embed"
                style={{ width: '100%', height: 440, border: 0, display: 'block' }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                title="三浦医院 地図"
              />
            </div>
            <div>
              <InfoRow icon={Icon.pin(16, T.primary)} label={lang === 'jp' ? '住所' : 'Address'} value={t.address} />
              <InfoRow icon={Icon.cross(14, T.primary)} label={lang === 'jp' ? 'バス' : 'Bus'} value={t.bus} />
              <InfoRow icon={Icon.cross(14, T.primary)} label={lang === 'jp' ? '駐車場' : 'Parking'} value={t.parking} />
              <InfoRow icon={Icon.phone(14, T.primary)} label={lang === 'jp' ? '電話' : 'Phone'} value={t.phone} />
              <InfoRow icon={Icon.cross(14, T.primary)} label={lang === 'jp' ? '決済' : 'Payment'} value={t.pay} />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

window.Home = Home;