/* global React */
const { useState } = React;

// ============================================================
// FAQ — accordion, 6 common dental Q&As
// ============================================================
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    ["はじめての受診でも予約は必要ですか?", "ご予約なしでもご来院いただけますが、お待ちいただく時間を短縮するため、WEB予約またはお電話でのご予約をおすすめしております。"],
    ["子どもだけで通わせても大丈夫ですか?", "はい、お子さまだけでのご来院も可能です。キッズスペースを備えており、スタッフが丁寧にサポートいたします。初回は保護者さまとご一緒にお越しいただけると安心です。"],
    ["保険は使えますか?", "一般歯科・小児歯科・予防歯科など、ほとんどの診療は健康保険の適用内で行っております。自費診療となる処置は事前に丁寧にご説明いたします。"],
    ["痛みが苦手ですが、できるだけ痛くない治療は可能ですか?", "表面麻酔に加え、極細の電動注射器を使用するなど、できる限り痛みを抑えた治療を心がけております。ご不安な点はお気軽にご相談ください。"],
    ["駐車場はありますか?", "医院前に6台分の駐車スペースをご用意しております。満車の際は近隣の提携駐車場をご案内いたします。"],
    ["定期検診の頻度はどのくらいが目安ですか?", "お口の状態に合わせて3〜6ヶ月に一度を目安にご案内しております。リスク検査の結果をもとに、ご自身に合った間隔をご提案します。"],
  ];
  return (
    <section className="hx-sec" id="faq" style={{ padding: "80px 0" }}>
      <div style={{ textAlign: "center", marginBottom: 48 }}>
        <SectionTitle jp="よくあるご質問" en="FAQ" />
      </div>
      <div style={{ maxWidth: 880, margin: "0 auto", display: "flex", flexDirection: "column", gap: 12 }}>
        {items.map(([q, a], i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{
              background: "#fff",
              border: "1px solid var(--border-soft)",
              borderRadius: 14,
              overflow: "hidden",
              transition: "box-shadow var(--dur-fast)",
              boxShadow: isOpen ? "var(--shadow-md)" : "none",
            }}>
              <button
                onClick={() => setOpen(isOpen ? -1 : i)}
                className="hx-faq-head"
                style={{
                  width: "100%",
                  background: "transparent",
                  border: 0,
                  display: "grid",
                  gridTemplateColumns: "36px 1fr 28px",
                  alignItems: "center",
                  gap: 16,
                  padding: "20px 24px",
                  cursor: "pointer",
                  fontFamily: "var(--font-jp-sans)",
                  textAlign: "left",
                }}
              >
                <span style={{ fontFamily: "var(--font-latin)", fontSize: 22, color: "var(--hasu-orange)", fontWeight: 700 }}>Q</span>
                <span style={{ fontSize: 15, color: "var(--fg-1)", letterSpacing: "0.04em", fontWeight: 500 }}>{q}</span>
                <span style={{
                  width: 28, height: 28, borderRadius: "50%",
                  background: isOpen ? "var(--hasu-teal-600)" : "var(--hasu-teal-050)",
                  color: isOpen ? "#fff" : "var(--hasu-teal-700)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: 14,
                  transition: "all var(--dur-fast)",
                }}>{isOpen ? "−" : "+"}</span>
              </button>
              {isOpen && (
                <div className="hx-faq-body" style={{
                  display: "grid",
                  gridTemplateColumns: "36px 1fr 28px",
                  gap: 16,
                  padding: "0 24px 22px",
                  fontFamily: "var(--font-jp-sans)",
                }}>
                  <span style={{ fontFamily: "var(--font-latin)", fontSize: 22, color: "var(--hasu-teal-600)", fontWeight: 700 }}>A</span>
                  <p style={{ margin: 0, fontSize: 14, lineHeight: 1.95, color: "var(--fg-2)" }}>{a}</p>
                  <span />
                </div>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ============================================================
// CTA — full-width reservation call to action
// ============================================================
function CTABand() {
  return (
    <section className="hx-sec hx-cta" style={{ padding: "40px 0" }}>
      <div className="hx-panel-mint hx-cta-panel" style={{ padding: "64px 56px", textAlign: "center" }}>
        <WatercolorBranch seed={7} style={{ position: "absolute", right: -24, top: -18, width: 180, opacity: 0.85, pointerEvents: "none" }} />
        <WatercolorBranch seed={3} style={{ position: "absolute", left: -24, bottom: -18, width: 160, opacity: 0.85, transform: "scaleX(-1) rotate(4deg)", pointerEvents: "none" }} />
        <div className="hx-eyebrow-latin">RESERVATION</div>
        <h3 style={{
          fontFamily: "var(--font-jp-sans)",
          fontSize: 32,
          fontWeight: 700,
          color: "var(--fg-brand)",
          letterSpacing: "0.08em",
          lineHeight: 1.6,
          margin: "18px 0 0",
        }}>
          まずはお気軽に<br/>ご予約・ご相談ください。
        </h3>
        <p style={{ fontFamily: "var(--font-jp-sans)", fontSize: 14, lineHeight: 2, color: "var(--fg-2)", maxWidth: 520, margin: "24px auto 0" }}>
          WEB予約は24時間受付中です。<br/>
          お急ぎの方やご不明な点は、お電話でもお気軽にどうぞ。
        </p>
        <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 36, flexWrap: "wrap" }}>
          <a className="hx-btn">WEB予約 <span className="arr">→</span></a>
          <a className="hx-btn hx-btn--dark">📞 TEL 0000-00-0000</a>
        </div>
        <div style={{ fontFamily: "var(--font-jp-sans)", fontSize: 12, color: "var(--fg-3)", marginTop: 14 }}>受付時間 9:00〜13:00 / 14:30〜19:00(水曜午後・日祝休診)</div>
      </div>
    </section>
  );
}

// ============================================================
// Footer — brand column + link columns + map + bottom bar
// ============================================================
function FooterCol({ heading, links }) {
  return (
    <div>
      <h4 style={{ fontFamily: "var(--font-jp-sans)", fontSize: 13, fontWeight: 700, color: "var(--fg-brand)", margin: "0 0 14px", letterSpacing: "0.08em" }}>{heading}</h4>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {links.map(l => <li key={l} style={{ fontFamily: "var(--font-jp-sans)", fontSize: 12, color: "var(--fg-2)" }}>{l}</li>)}
      </ul>
    </div>
  );
}

function Footer() {
  return (
    <footer style={{ position: "relative", background: "var(--hasu-sand-100)", marginTop: 80, paddingTop: 64, paddingBottom: 32 }}>
      <div className="hx-footer-top" style={{ maxWidth: 1200, margin: "0 auto", padding: "20px 60px", display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 64 }}>
        <div>
          <Wordmark />
          <div style={{ display: "flex", gap: 4, flexWrap: "wrap", margin: "22px 0 20px" }}>
            {["一般歯科","小児歯科","予防歯科","矯正歯科","インプラント"].map(t => <span key={t} className="hx-tag">{t}</span>)}
          </div>
          <div style={{ fontFamily: "var(--font-jp-sans)", fontSize: 13, color: "var(--fg-2)", lineHeight: 1.9 }}>
            〒000-0000 〇〇県〇〇市〇〇町1-2-3
          </div>
          <div style={{ fontFamily: "var(--font-latin)", fontSize: 24, color: "var(--fg-brand)", fontWeight: 500, letterSpacing: "0.04em", marginTop: 10 }}>TEL.0000-00-0000</div>
          <div style={{ fontFamily: "var(--font-jp-sans)", fontSize: 12, color: "var(--fg-3)", marginTop: 4 }}>受付 9:00〜13:00 / 14:30〜19:00</div>
          <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
            <a className="hx-btn hx-btn--small" style={{ flex: 1 }}>WEB予約 ↗</a>
            <a className="hx-btn hx-btn--dark hx-btn--small" style={{ flex: 1 }}>LINE予約 ↗</a>
          </div>
        </div>
        <div className="hx-footer-cols" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 28 }}>
          <FooterCol heading="当院について" links={["診療理念", "当院の特徴", "院長・スタッフ紹介", "院内紹介"]} />
          <FooterCol heading="診療案内" links={["一般歯科", "小児歯科", "予防歯科", "矯正歯科", "インプラント", "ホワイトニング"]} />
          <FooterCol heading="ご来院の方へ" links={["はじめての方へ", "診療時間・アクセス", "よくあるご質問", "個人情報保護方針"]} />
          <div style={{ gridColumn: "1 / -1", marginTop: 10 }}>
            <Placeholder label="Google Map / 地図" ratio="16 / 5" radius={12} />
          </div>
        </div>
      </div>
      <div className="hx-footer-bottom" style={{
        maxWidth: 1200, margin: "0 auto",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "28px 60px 0", borderTop: "1px dashed var(--border-strong)", marginTop: 40,
      }}>
        <div style={{ fontFamily: "var(--font-latin)", fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.14em" }}>© 2026 HASUKI DENTAL CLINIC</div>
        <div style={{ fontFamily: "var(--font-jp-sans)", fontSize: 11, color: "var(--fg-3)" }}>
          <span style={{ marginRight: 18 }}>プライバシーポリシー</span>
          <span>サイトマップ</span>
        </div>
      </div>
    </footer>
  );
}

// ============================================================
// Floating reservation pill (bottom-right)
// ============================================================
function FloatingCTA() {
  return (
    <div className="hx-floating">
      <div style={{
        alignSelf: "flex-end",
        background: "rgba(255,255,255,0.95)",
        color: "var(--fg-3)",
        fontFamily: "var(--font-jp-sans)",
        fontSize: 11,
        letterSpacing: "0.08em",
        padding: "6px 12px",
        borderRadius: 999,
        border: "1px solid var(--border-soft)",
        boxShadow: "0 4px 12px rgba(31, 70, 55, 0.12)",
        whiteSpace: "nowrap",
      }}>
        ※ サンプルサイトです
      </div>
      <a className="hx-btn">WEB予約 →</a>
    </div>
  );
}

window.FAQ = FAQ;
window.CTABand = CTABand;
window.Footer = Footer;
window.FloatingCTA = FloatingCTA;