/* global React */

// ============================================================
// Services — 10 specialty tiles in a 5x2 grid (dental menu)
// ============================================================
function Services() {
  // Dental specialty icons — small inline SVGs in house style (2px stroke teal)
  const icons = {
    tooth: (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M24 8c-6 0-11 2-11 8 0 3 1 5 1 8 0 7 2 16 6 16 2 0 3-3 4-8 1 5 2 8 4 8 4 0 6-9 6-16 0-3 1-5 1-8 0-6-5-8-11-8z"/></svg>),
    child: (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="24" cy="14" r="5"/><path d="M14 40c0-6 4-10 10-10s10 4 10 10"/><path d="M20 20c2 1 6 1 8 0"/></svg>),
    shield: (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M24 6l14 5v12c0 8-6 15-14 18-8-3-14-10-14-18V11l14-5z"/><path d="M18 24l4 4 8-8"/></svg>),
    braces: (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="8" y="20" width="32" height="10" rx="2"/><path d="M16 20v10M24 20v10M32 20v10"/><path d="M4 24h4M40 24h4"/></svg>),
    implant: (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M24 6c-5 0-8 2-8 6 0 2 1 3 1 5 0 4 2 9 4 9 1 0 2-2 3-5 1 3 2 5 3 5 3 0 5-5 5-9 0-2 1-3 1-5 0-4-3-6-9-6z"/><path d="M22 32h4M21 36h6M20 40h8"/></svg>),
    sparkle: (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M24 6v10M24 32v10M6 24h10M32 24h10"/><path d="M14 14l6 6M28 28l6 6M14 34l6-6M28 20l6-6"/></svg>),
    diamond: (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 18l6-8h16l6 8-14 20z"/><path d="M10 18h28M20 10l4 8 4-8"/></svg>),
    surgery: (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 38l22-22 6 6-22 22H10z"/><path d="M30 14l4-4 6 6-4 4"/></svg>),
    home: (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M8 22l16-14 16 14"/><path d="M12 20v18h24V20"/><path d="M20 38v-8h8v8"/></svg>),
    mouth: (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M8 22c4-8 12-12 16-12s12 4 16 12c-4 10-12 16-16 16s-12-6-16-16z"/><path d="M8 22c6 4 26 4 32 0"/></svg>),
  };

  const items = [
    ["一般歯科", "General", "tooth", "むし歯・歯周病の治療"],
    ["小児歯科", "Pediatric", "child", "乳歯からの予防と治療"],
    ["予防歯科", "Preventive", "shield", "クリーニング・フッ素"],
    ["矯正歯科", "Orthodontics", "braces", "ワイヤー・マウスピース"],
    ["インプラント", "Implant", "implant", "自然な噛み心地を回復"],
    ["ホワイトニング", "Whitening", "sparkle", "オフィス・ホーム"],
    ["審美歯科", "Aesthetic", "diamond", "セラミック・補綴"],
    ["口腔外科", "Oral Surgery", "surgery", "親知らず・外傷"],
    ["訪問歯科", "Home Visit", "home", "ご自宅・施設への訪問"],
    ["マウスピース", "Mouth Guard", "mouth", "ナイトガード・スポーツ"],
  ];

  return (
    <section className="hx-sec" id="medical" style={{ padding: "40px 0" }}>
      <div className="hx-panel-white">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <SectionTitle jp="診療案内" en="MEDICAL INFORMATION" />
          <p style={{ fontFamily: "var(--font-jp-sans)", fontSize: 14, lineHeight: 2, color: "var(--fg-2)", maxWidth: 560, margin: "28px auto 0" }}>
            一般歯科を中心に、小児歯科・矯正・インプラントなど幅広く対応しています。<br/>
            気になる症状がございましたら、お気軽にご相談ください。
          </p>
        </div>
        <div className="hx-services-grid" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 14 }}>
          {items.map(([jp, en, iconKey, sub]) => (
            <button key={jp} style={{
              background: "var(--hasu-teal-050)",
              border: "1px solid var(--border-soft)",
              borderRadius: 14,
              padding: "24px 14px 18px",
              cursor: "pointer",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: 10,
              fontFamily: "var(--font-jp-sans)",
              transition: "background var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft)",
            }}
            onMouseOver={(e) => { e.currentTarget.style.background = "#fff"; e.currentTarget.style.transform = "translateY(-2px)"; }}
            onMouseOut={(e) => { e.currentTarget.style.background = "var(--hasu-teal-050)"; e.currentTarget.style.transform = "translateY(0)"; }}
            >
              <div style={{
                width: 64, height: 64, borderRadius: "50%", background: "#fff",
                display: "flex", alignItems: "center", justifyContent: "center",
                color: "var(--hasu-teal-700)",
              }}>
                <div style={{ width: 36, height: 36 }}>{icons[iconKey]}</div>
              </div>
              <div style={{ fontFamily: "var(--font-latin)", fontSize: 9, letterSpacing: "0.26em", color: "var(--hasu-taupe-500)", textTransform: "uppercase", marginTop: 4 }}>{en}</div>
              <div style={{ fontSize: 14, fontWeight: 700, color: "var(--fg-1)", letterSpacing: "0.04em" }}>{jp}</div>
              <div style={{ fontSize: 11, color: "var(--fg-3)", lineHeight: 1.5, textAlign: "center" }}>{sub}</div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Gallery — 5 image placeholder tiles with a staggered layout
// ============================================================
function Gallery() {
  const tiles = [
    { src: "assets/img_gallery01.webp", ratio: "4 / 3" },
    { src: "assets/img_gallery02.webp", ratio: "3 / 4" },
    { src: "assets/img_gallery03.webp", ratio: "4 / 3" },
    { src: "assets/img_gallery04.webp", ratio: "3 / 4" },
    { src: "assets/img_gallery05.webp", ratio: "4 / 3" },
  ];
  return (
    <section className="hx-sec" id="clinic" style={{ padding: "80px 0" }}>
      <div style={{ textAlign: "center", marginBottom: 48 }}>
        <SectionTitle jp="院内設備・ギャラリー" en="CLINIC GALLERY" />
        <p style={{ fontFamily: "var(--font-jp-sans)", fontSize: 14, lineHeight: 2, color: "var(--fg-2)", maxWidth: 520, margin: "28px auto 0" }}>
          清潔で落ち着いた院内で、ゆったりとお過ごしいただけます。
        </p>
      </div>
      <div className="hx-gallery-grid" style={{
        display: "grid",
        gridTemplateColumns: "1.1fr 0.8fr 1.1fr 0.8fr 1fr",
        gap: 14,
        alignItems: "center",
      }}>
        {tiles.map((t, i) => (
          <div key={i} style={{
            width: "100%",
            aspectRatio: t.ratio,
            borderRadius: 14,
            overflow: "hidden",
            boxShadow: "var(--shadow-sm)",
            transform: i % 2 ? "translateY(24px)" : "translateY(-16px)",
          }}>
            <img src={t.src} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
        ))}
      </div>
      <div style={{ textAlign: "center", marginTop: 56 }}>
        <a className="hx-btn hx-btn--ghost">院内をもっとみる <span className="arr">→</span></a>
      </div>
    </section>
  );
}

window.Services = Services;
window.Gallery = Gallery;
