// Contact — 大きなネイビーCTAバンド + マーキー風の静謐な繰り返し見出し
function Contact() {
  const [deckOpen, setDeckOpen] = React.useState(false);
  const openDeck = (e) => { e.preventDefault(); setDeckOpen(true); };
  const closeDeck = () => setDeckOpen(false);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setDeckOpen(false); };
    const onOpen = () => setDeckOpen(true);
    window.addEventListener('keydown', onKey);
    window.addEventListener('open-deck', onOpen);
    return () => {
      window.removeEventListener('keydown', onKey);
      window.removeEventListener('open-deck', onOpen);
    };
  }, []);
  return (
    <section id="contact" style={{ background: "var(--navy-900)", color: "#fff", position: "relative", overflow: "hidden" }}>
      <div className="wrap" style={{ paddingTop: 88, paddingBottom: 96 }}>
        <div style={{
          display: "grid", gap: 48,
          gridTemplateColumns: "1fr",
        }} className="contact-grid">
          <div>
            <div className="section-head" style={{ marginBottom: 32 }}>
              <img
                src="assets/b-steep.svg"
                alt="B-Steep"
                style={{
                  height: 36,
                  width: "auto",
                  filter: "brightness(0) invert(1)",
                  marginBottom: 16,
                  display: "block",
                }}
              />
              <span className="en" style={{ color: "#fff" }}>お問い合わせ</span>
              <span className="ja" style={{ color: "rgba(255,255,255,0.8)" }}>— ご相談・ご依頼はこちらから</span>
            </div>
            <p style={{
              margin: 0, maxWidth: 520, fontSize: 15, lineHeight: 2.1,
              color: "rgba(255,255,255,0.85)",
            }}>
              ご相談・お見積もり・登壇のご依頼など、お気軽にどうぞ。<br />
              まずはお話を伺うところから、一緒に小さな一歩を探します。
            </p>
          </div>

          <div>
            <div style={{
              display: "grid",
              gridTemplateColumns: "1fr",
              gap: 14,
            }}>
              <a href="#contact-form" className="btn" style={{
                background: "#fff", color: "var(--navy-900)", height: 56, padding: "0 28px",
                fontSize: 14.5, justifyContent: "space-between",
              }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
                  <Icon.Mail size={16} /> お問い合わせフォームへ
                </span>
                <Icon.ArrowRight size={16} />
              </a>
              <a href="assets/b-steep-deck.pdf" onClick={openDeck} className="btn btn-yellow" style={{
                height: 56, padding: "0 28px", fontSize: 14.5, justifyContent: "space-between",
              }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
                  <Icon.Download size={14} /> 会社紹介資料を見る（無料）
                </span>
                <Icon.ArrowRight size={16} />
              </a>
            </div>


          </div>
        </div>
      </div>

      <style>{`
        @keyframes marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        @media (min-width: 900px) {
          .contact-grid {
            grid-template-columns: 1fr 1fr !important;
            gap: 80px !important;
            align-items: center;
          }
        }
        @keyframes deckFade {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes deckScale {
          from { opacity: 0; transform: scale(0.96); }
          to { opacity: 1; transform: scale(1); }
        }
      `}</style>

      {deckOpen && (
        <div
          onClick={closeDeck}
          style={{
            position: "fixed", inset: 0, background: "rgba(5, 15, 36, 0.82)",
            backdropFilter: "blur(4px)",
            zIndex: 1000,
            display: "flex", alignItems: "center", justifyContent: "center",
            padding: "28px",
            animation: "deckFade 0.2s ease",
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              background: "#ffffff", borderRadius: 6, overflow: "hidden",
              width: "min(1100px, 100%)", height: "min(88vh, 760px)",
              boxShadow: "0 30px 80px rgba(0,0,0,0.4)",
              display: "flex", flexDirection: "column",
              animation: "deckScale 0.25s ease",
            }}
          >
            <div style={{
              display: "flex", alignItems: "center", justifyContent: "space-between",
              padding: "14px 18px", borderBottom: "1px solid #eaeaea",
              background: "#fafafa", flexShrink: 0,
            }}>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 10, color: "#333", fontSize: 13, fontWeight: 600 }}>
                <Icon.Download size={14} /> 会社紹介資料 — B-Steep
              </div>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                <a href="assets/b-steep-deck.pdf" download style={{
                  fontSize: 12, fontWeight: 600, color: "#0c3e8f",
                  textDecoration: "none", padding: "8px 14px",
                  border: "1px solid #0c3e8f", borderRadius: 999,
                }}>
                  ダウンロード
                </a>
                <button onClick={closeDeck} aria-label="閉じる" style={{
                  width: 34, height: 34, borderRadius: "50%",
                  background: "#111", color: "#fff", border: "none",
                  cursor: "pointer", fontSize: 18, lineHeight: 1,
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                }}>×</button>
              </div>
            </div>
            <iframe
              src="assets/b-steep-deck.pdf#toolbar=0&navpanes=0&view=FitH"
              title="B-Steep 会社紹介資料"
              style={{ flex: 1, border: 0, width: "100%", background: "#f5f5f5" }}
            />
          </div>
        </div>
      )}
    </section>
  );
}

window.Contact = Contact;
window.openDeck = () => window.dispatchEvent(new CustomEvent('open-deck'));