/* global React */

// ============================================================
// Staff — director + 3 staff cards on cream panel
// ============================================================
function Staff() {
  const staff = [
    ["歯科医師", "副院長", "葉須木 さくら", "assets/img_staff01.webp"],
    ["歯科衛生士", "チーフ", "山本 みどり", "assets/img_staff02.webp"],
    ["歯科衛生士", "STAFF", "田中 ゆい", "assets/img_staff03.webp"],
  ];
  return (
    <section className="hx-sec" id="staff" style={{ padding: "40px 0" }}>
      <div className="hx-panel-cream">
        <div style={{ textAlign: "center", marginBottom: 52 }}>
          <SectionTitle jp="院長・スタッフ紹介" en="STAFF" />
        </div>
        <div className="hx-staff-hero" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, alignItems: "center", marginBottom: 56 }}>
          <div style={{
            width: "100%",
            aspectRatio: "7 / 9",
            borderRadius: 20,
            overflow: "hidden",
            boxShadow: "var(--shadow-sm)",
          }}>
            <img src="assets/img_daihyo01.webp" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
          <div>
            <span className="hx-tag">院長メッセージ</span>
            <h3 style={{ fontFamily: "var(--font-jp-sans)", fontSize: 24, fontWeight: 700, color: "var(--fg-brand)", letterSpacing: "0.08em", lineHeight: 1.7, margin: "18px 0 0" }}>
              ひとつひとつの歯と、<br/>
              ひとりひとりの人生に。
            </h3>
            <p style={{ fontFamily: "var(--font-jp-sans)", fontSize: 14, lineHeight: 2, color: "var(--fg-2)", margin: "24px 0 0" }}>
              お口の健康は、全身の健康と毎日の笑顔に直結します。<br/>
              治療だけで終わらず、その後ずっと健やかな歯でいられるよう、
              患者さま一人ひとりに寄り添った予防・治療計画をご提案いたします。
            </p>
            <div style={{ marginTop: 28, display: "flex", alignItems: "center", gap: 20 }}>
              <div>
                <div style={{ fontFamily: "var(--font-latin)", fontSize: 11, color: "var(--hasu-taupe-500)", letterSpacing: "0.26em" }}>DIRECTOR</div>
                <div style={{ fontFamily: "var(--font-jp-sans)", fontSize: 18, fontWeight: 700, color: "var(--fg-1)", marginTop: 6, letterSpacing: "0.08em" }}>葉須木 太郎</div>
                <div style={{ fontFamily: "var(--font-jp-sans)", fontSize: 12, color: "var(--fg-3)", marginTop: 4 }}>Hasuki Taro, DDS / 日本歯科医師会 所属</div>
              </div>
            </div>
          </div>
        </div>
        <div className="hx-staff-cards" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {staff.map(([role, rank, name, img]) => (
            <div key={name} style={{ background: "#fff", borderRadius: 16, padding: 20, display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{
                width: "100%",
                aspectRatio: "1 / 1",
                borderRadius: 12,
                overflow: "hidden",
              }}>
                <img src={img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-latin)", fontSize: 10, color: "var(--hasu-taupe-500)", letterSpacing: "0.28em", textTransform: "uppercase" }}>{rank}</div>
                <div style={{ fontFamily: "var(--font-jp-sans)", fontSize: 15, fontWeight: 700, color: "var(--fg-brand)", marginTop: 6, letterSpacing: "0.04em" }}>{role}</div>
                <div style={{ fontFamily: "var(--font-jp-sans)", fontSize: 13, color: "var(--fg-1)", marginTop: 4 }}>{name}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Schedule + Access — two-column panel
// ============================================================
function ScheduleTable() {
  const Cell = ({ v, sun }) => (
    <td style={{
      padding: "14px 4px",
      textAlign: "center",
      fontFamily: "var(--font-jp-sans)",
      fontSize: 14,
      color: v === "●" ? "var(--hasu-teal-600)" : v === "▲" ? "var(--hasu-orange)" : "var(--mori-ink-300)",
      background: sun ? "var(--hasu-sand-100)" : "transparent",
      borderRight: "1px solid var(--border-hairline)",
      borderBottom: "1px solid var(--border-hairline)",
    }}>{v}</td>
  );
  return (
    <div className="hx-schedule" style={{ background: "#fff", border: "1px solid var(--border-hairline)", borderRadius: 14, overflow: "hidden" }}>
      <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "var(--font-jp-sans)" }}>
        <thead>
          <tr>
            {["診療時間", "月", "火", "水", "木", "金", "土", "日・祝"].map((h, i) => (
              <th key={h} style={{
                background: i === 7 ? "var(--hasu-sand-100)" : "var(--hasu-teal-050)",
                color: i === 7 ? "var(--hasu-taupe-500)" : "var(--fg-brand)",
                fontWeight: 500,
                fontSize: 13,
                padding: "12px 4px",
                borderRight: "1px solid var(--border-hairline)",
                borderBottom: "1px solid var(--border-hairline)",
                letterSpacing: "0.06em",
              }}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style={{ background: "var(--hasu-sand-050)", padding: "14px 8px", textAlign: "center", fontFamily: "var(--font-latin)", fontSize: 13, letterSpacing: "0.04em", color: "var(--fg-2)", borderRight: "1px solid var(--border-hairline)", borderBottom: "1px solid var(--border-hairline)" }}>9:00 – 13:00</td>
            {["●","●","●","●","●","▲"].map((v,i) => <Cell key={i} v={v} />)}
            <Cell v="—" sun />
          </tr>
          <tr>
            <td style={{ background: "var(--hasu-sand-050)", padding: "14px 8px", textAlign: "center", fontFamily: "var(--font-latin)", fontSize: 13, letterSpacing: "0.04em", color: "var(--fg-2)", borderRight: "1px solid var(--border-hairline)" }}>14:30 – 19:00</td>
            {["●","●","—","●","●","—"].map((v,i) => <Cell key={i} v={v} />)}
            <Cell v="—" sun />
          </tr>
        </tbody>
      </table>
    </div>
  );
}

function Access() {
  return (
    <section className="hx-sec" id="access" style={{ padding: "80px 0" }}>
      <div style={{ textAlign: "center", marginBottom: 48 }}>
        <SectionTitle jp="診療時間・アクセス" en="SCHEDULE & ACCESS" />
      </div>
      <div className="hx-access-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }}>
        <div>
          <div style={{ fontFamily: "var(--font-jp-sans)", fontSize: 15, fontWeight: 700, color: "var(--fg-brand)", marginBottom: 16, letterSpacing: "0.08em" }}>診療時間</div>
          <ScheduleTable />
          <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0", fontFamily: "var(--font-jp-sans)", fontSize: 12, color: "var(--fg-3)", lineHeight: 1.9 }}>
            <li>● 通常診療　▲ 土曜午前は 9:00〜15:00</li>
            <li>※ 休診日：水曜午後・日曜・祝日</li>
            <li>※ 臨時休診がある場合はお知らせにて告知いたします</li>
          </ul>
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-jp-sans)", fontSize: 15, fontWeight: 700, color: "var(--fg-brand)", marginBottom: 16, letterSpacing: "0.08em" }}>アクセス</div>
          <Placeholder label="Google Map / 地図 / 600×260" ratio="12 / 5" radius={14} />
          <div style={{ marginTop: 18, fontFamily: "var(--font-jp-sans)", fontSize: 14, lineHeight: 1.9, color: "var(--fg-2)" }}>
            〒000-0000 〇〇県〇〇市〇〇町1-2-3<br/>
            <span style={{ color: "var(--fg-3)", fontSize: 12 }}>〇〇駅より徒歩5分／駐車場6台完備</span>
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 20, flexWrap: "wrap" }}>
            <a className="hx-btn hx-btn--ghost hx-btn--small">Googleマップで見る ↗</a>
            <a className="hx-btn hx-btn--small">お電話で問い合わせ</a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Staff = Staff;
window.Access = Access;
