/* global React */

// ============================================================
// News — 3 rows with date, tag, title + "お知らせ一覧 →"
// ============================================================
function NewsSection() {
  const rows = [
    ["2026.04.15", "休診", "ゴールデンウィーク期間中の診療についてのお知らせ"],
    ["2026.04.02", "お知らせ", "小児歯科のフッ素塗布キャンペーンを開始いたしました"],
    ["2026.03.18", "コラム", "歯ぎしり・食いしばりが気になる方へ(マウスピース外来)"],
    ["2026.03.01", "お知らせ", "新しい口腔内スキャナーを導入しました"],
  ];
  return (
    <section className="hx-sec" id="news" style={{ padding: "48px 0 72px" }}>
      <div className="hx-news-grid" style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 48, alignItems: "start" }}>
        <SectionTitle jp="お知らせ" en="NEWS" align="left" />
        <div>
          {rows.map(([date, tag, title], i) => (
            <div key={i} className="hx-news-row" style={{
              display: "grid",
              gridTemplateColumns: "120px 90px 1fr auto",
              gap: 20,
              alignItems: "center",
              padding: "18px 0",
              borderBottom: "1px dashed var(--border-hairline)",
              borderTop: i === 0 ? "1px dashed var(--border-hairline)" : "none",
            }}>
              <span style={{ fontFamily: "var(--font-latin)", fontSize: 13, color: "var(--fg-3)", letterSpacing: "0.04em" }}>{date}</span>
              <span className="hx-tag" style={{ justifySelf: "start" }}>{tag}</span>
              <span style={{ fontFamily: "var(--font-jp-sans)", fontSize: 14, color: "var(--fg-1)" }}>{title}</span>
              <span style={{ color: "var(--hasu-teal-700)", fontSize: 13 }}>→</span>
            </div>
          ))}
          <div style={{ textAlign: "right", marginTop: 22 }}>
            <a style={{ color: "var(--fg-brand)", fontFamily: "var(--font-jp-sans)", fontSize: 13 }}>
              お知らせ一覧
              <span style={{ display:"inline-flex", width:26, height:26, borderRadius:"50%", background:"var(--hasu-teal-600)", color:"#fff", alignItems:"center", justifyContent:"center", marginLeft: 10 }}>→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// About — big cream panel; centered title + paragraph of reassurance
// ============================================================
function About() {
  return (
    <section className="hx-sec" id="about" style={{ padding: "40px 0 80px", position: "relative" }}>
      <WatercolorBranch seed={5} style={{ position: "absolute", top: 40, right: -20, width: 180, opacity: 0.85, pointerEvents: "none" }} />
      <WatercolorBranch seed={11} style={{ position: "absolute", bottom: 80, left: -20, width: 160, opacity: 0.85, transform: "scaleX(-1)", pointerEvents: "none" }} />
      <div style={{ textAlign: "center", position: "relative" }}>
        <SectionTitle jp="当院について" en="ABOUT US" />
        <h3 style={{
          fontFamily: "var(--font-jp-sans)",
          fontSize: 28,
          fontWeight: 700,
          color: "var(--fg-brand)",
          letterSpacing: "0.08em",
          lineHeight: 1.7,
          margin: "36px 0 0",
        }}>
          歯の健康から、<br/>
          毎日の笑顔をまもる。
        </h3>
        <div style={{
          maxWidth: 620,
          margin: "28px auto 0",
          fontFamily: "var(--font-jp-sans)",
          fontSize: 14,
          lineHeight: 2.1,
          color: "var(--fg-2)",
        }}>
          痛みが出てから通うのではなく、<br/>
          ずっと健康な歯でいるために通える場所へ。<br/><br/>
          葉須木クリニックは、乳歯のケアから大人の予防、<br/>
          インプラントや矯正まで、ご家族の歯の一生を見守る<br/>
          地域の「かかりつけ歯科医」でありたいと考えています。<br/><br/>
          はじめての方も、長いブランクのある方も、<br/>
          どうぞお気軽にご相談ください。
        </div>
        <div style={{ marginTop: 36 }}>
          <a className="hx-btn hx-btn--ghost">当院について詳しく <span className="arr">→</span></a>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Features — 3 "当院の特徴" cards on cream panel
// ============================================================
function Features() {
  const items = [
    ["01", "痛みの少ない治療", "表面麻酔と極細の電動注射器で、できる限り痛みを抑えた治療を心がけています。", "assets/img_feature01.webp"],
    ["02", "一人ひとりに合わせた予防ケア", "リスク検査をもとに、ご自身に合ったメンテナンス計画をご提案します。", "assets/img_feature02.webp"],
    ["03", "家族で通える安心の院内", "キッズスペース・バリアフリー・個室診療室で、どなたでも落ち着いてお過ごしいただけます。", "assets/img_feature03.webp"],
  ];
  return (
    <section className="hx-sec" id="feature" style={{ padding: "40px 0" }}>
      <div className="hx-panel-cream">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <SectionTitle jp="当院の特徴" en="FEATURE" />
        </div>
        <div className="hx-feature-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {items.map(([num, title, body, img]) => (
            <div key={num} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{
                width: "100%",
                aspectRatio: "4 / 3",
                borderRadius: 14,
                overflow: "hidden",
                boxShadow: "var(--shadow-sm)",
              }}>
                <img src={img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                <span style={{ fontFamily: "var(--font-latin)", fontSize: 24, color: "var(--hasu-orange)", fontWeight: 700, letterSpacing: "0.06em" }}>{num}</span>
                <h3 style={{
                  fontFamily: "var(--font-jp-sans)",
                  fontSize: 17,
                  fontWeight: 700,
                  color: "var(--fg-brand)",
                  margin: 0,
                  letterSpacing: "0.06em",
                }}>{title}</h3>
              </div>
              <p style={{ fontFamily: "var(--font-jp-sans)", fontSize: 13, lineHeight: 1.9, color: "var(--fg-2)", margin: 0 }}>{body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.NewsSection = NewsSection;
window.About = About;
window.Features = Features;