// sc-components.jsx — shared Nav, Footer, AnimateIn, UI primitives

const LINE_URL = "https://lin.ee/1YA6KpG";
const LOGO_URL = "images/logo.png";

const PAGE_URLS = {
  home:    "index.html",
  begin:   "begin.html",
  course:  "service.html",
  voice:   "voice.html",
  bio:     "about.html",
  contact: "contact.html",
};
function pageUrl(id) { return PAGE_URLS[id] || "index.html"; }

/* ── AnimateIn ─────────────────────────────────────────────── */
function AnimateIn({ children, delay = 0, className = "", style = {} }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } },
      { threshold: 0.08 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <div ref={ref} className={"ai" + (visible ? " ai-vis" : "") + (className ? " " + className : "")}
      style={{ transitionDelay: delay + "ms", ...style }}>
      {children}
    </div>
  );
}

/* ── SectionHeader ─────────────────────────────────────────── */
function SectionHeader({ label, title, sub, center = false, light = false }) {
  const align = center ? "center" : "left";
  return (
    <div style={{ textAlign: align, marginBottom: "56px" }}>
      {label && (
        <p style={{
          fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.18em",
          color: "var(--accent)", textTransform: "uppercase", fontWeight: 500,
          marginBottom: "12px"
        }}>{label}</p>
      )}
      <h2 style={{
        fontFamily: "var(--font-serif)", fontSize: "clamp(24px,3.5vw,38px)",
        fontWeight: 600, color: light ? "#fff" : "var(--text)",
        lineHeight: 1.45, letterSpacing: "0.02em", marginBottom: sub ? "20px" : 0
      }}>{title}</h2>
      {sub && (
        <p style={{
          fontFamily: "var(--font-sans)", fontSize: "15px", lineHeight: 1.9,
          color: light ? "rgba(255,255,255,0.65)" : "var(--text-muted)",
          maxWidth: center ? "560px" : "none", margin: center ? "0 auto" : 0
        }}>{sub}</p>
      )}
    </div>
  );
}

/* ── LineButton — CTA → contact.html ──────────────────────── */
function LineButton({ children = "１週間の無料トライアルはこちら", large = false, ghost = false }) {
  const base = {
    display: "inline-flex", alignItems: "center", gap: "10px",
    fontFamily: "var(--font-sans)", fontWeight: 500, letterSpacing: "0.06em",
    borderRadius: "2px", cursor: "pointer", textDecoration: "none",
    transition: "all 0.25s ease",
  };
  const filled = {
    background: "var(--accent)", color: "#fff",
    padding: large ? "18px 44px" : "14px 32px",
    fontSize: large ? "15px" : "14px",
    border: "1.5px solid var(--accent)",
  };
  const ghostStyle = {
    background: "transparent", color: "var(--accent)",
    padding: large ? "18px 44px" : "14px 32px",
    fontSize: large ? "15px" : "14px",
    border: "1.5px solid var(--accent)",
  };
  return (
    <a href="contact.html"
      style={{ ...base, ...(ghost ? ghostStyle : filled) }}
      onMouseEnter={e => { e.currentTarget.style.opacity = "0.82"; e.currentTarget.style.transform = "translateY(-1px)"; }}
      onMouseLeave={e => { e.currentTarget.style.opacity = "1"; e.currentTarget.style.transform = "none"; }}>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
      </svg>
      {children}
    </a>
  );
}

/* ── GoldLine ──────────────────────────────────────────────── */
function GoldLine({ width = "48px", margin = "0" }) {
  return <div style={{ width, height: "2px", background: "var(--accent)", margin }} />;
}

/* ── Nav ───────────────────────────────────────────────────── */
function Nav({ currentPage }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { id: "home",   label: "ホーム" },
    { id: "begin",  label: "初めての方へ" },
    { id: "course", label: "サービス内容" },
    { id: "voice",  label: "利用者の声" },
    { id: "bio",    label: "運営者" },
  ];

  const navBg     = scrolled || mobileOpen ? "rgba(255,255,255,0.97)" : "transparent";
  const navBorder = scrolled || mobileOpen ? "1px solid var(--border)" : "1px solid transparent";
  const linkColor = (!scrolled && !mobileOpen && currentPage === "home") ? "#fff" : "var(--text)";

  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      background: navBg, borderBottom: navBorder,
      backdropFilter: scrolled ? "blur(12px)" : "none",
      transition: "all 0.3s ease",
    }}>
      <div style={{
        maxWidth: "var(--max-w)", margin: "0 auto",
        padding: "0 24px", height: "68px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <a href="index.html" style={{ lineHeight: 0 }}>
          <img src={LOGO_URL} alt="スポッターコーチング" style={{ height: "32px", objectFit: "contain" }} />
        </a>

        {/* Desktop links */}
        <div style={{ display: "flex", alignItems: "center", gap: "32px" }} className="nav-desktop">
          {links.map(l => (
            <a key={l.id} href={pageUrl(l.id)} style={{
              fontFamily: "var(--font-sans)", fontSize: "13px",
              fontWeight: currentPage === l.id ? 600 : 400,
              color: currentPage === l.id ? "var(--accent)" : linkColor,
              letterSpacing: "0.04em", transition: "color 0.2s", textDecoration: "none",
              borderBottom: currentPage === l.id ? "1px solid var(--accent)" : "1px solid transparent",
              paddingBottom: "2px",
            }}>{l.label}</a>
          ))}
          <a href="contact.html" style={{
            fontFamily: "var(--font-sans)", fontSize: "12px", fontWeight: 500,
            letterSpacing: "0.08em", color: "#fff", background: "var(--accent)",
            padding: "8px 20px", borderRadius: "2px", textDecoration: "none",
            transition: "opacity 0.2s",
          }}
            onMouseEnter={e => e.currentTarget.style.opacity = "0.8"}
            onMouseLeave={e => e.currentTarget.style.opacity = "1"}>
            無料トライアル
          </a>
        </div>

        {/* Mobile hamburger */}
        <button className="nav-mobile-btn" onClick={() => setMobileOpen(v => !v)} style={{
          background: "none", border: "none", cursor: "pointer", padding: "4px", display: "none",
        }}>
          <div style={{ width: "22px", display: "flex", flexDirection: "column", gap: "5px" }}>
            {[0, 1, 2].map(i => (
              <span key={i} style={{
                display: "block", height: "1.5px",
                background: (!scrolled && currentPage === "home" && !mobileOpen) ? "#fff" : "var(--text)",
                transition: "all 0.3s",
                transform: mobileOpen && i === 0 ? "rotate(45deg) translate(5px,5px)"
                  : mobileOpen && i === 2 ? "rotate(-45deg) translate(5px,-5px)"
                  : mobileOpen && i === 1 ? "scaleX(0)" : "none",
              }} />
            ))}
          </div>
        </button>
      </div>

      {/* Mobile drawer */}
      {mobileOpen && (
        <div style={{ background: "rgba(255,255,255,0.97)", borderTop: "1px solid var(--border)", padding: "16px 24px 24px" }}>
          {links.map(l => (
            <a key={l.id} href={pageUrl(l.id)} style={{
              display: "block", fontFamily: "var(--font-sans)", fontSize: "14px",
              color: currentPage === l.id ? "var(--accent)" : "var(--text)",
              padding: "12px 0", borderBottom: "1px solid var(--border)",
              letterSpacing: "0.04em", textDecoration: "none",
            }}>{l.label}</a>
          ))}
          <a href="contact.html" style={{
            display: "block", textAlign: "center", marginTop: "16px",
            fontFamily: "var(--font-sans)", fontSize: "14px", fontWeight: 500,
            color: "#fff", background: "var(--accent)", padding: "14px",
            borderRadius: "2px", textDecoration: "none", letterSpacing: "0.06em",
          }}>１週間の無料トライアル</a>
        </div>
      )}
    </nav>
  );
}

/* ── Footer ────────────────────────────────────────────────── */
function Footer() {
  const links = [
    { id: "begin",  label: "初めての方へ" },
    { id: "course", label: "サービス内容" },
    { id: "voice",  label: "利用者の声" },
    { id: "bio",    label: "運営者" },
  ];
  return (
    <footer style={{ background: "var(--dark)", color: "rgba(255,255,255,0.6)", padding: "64px 24px 32px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: "48px", justifyContent: "space-between", marginBottom: "48px" }}>
          <div>
            <a href="index.html">
              <img src={LOGO_URL} alt="スポッターコーチング" style={{ height: "28px", marginBottom: "16px", display: "block", filter: "brightness(0) invert(1) opacity(0.85)" }} />
            </a>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "12px", lineHeight: 1.9, maxWidth: "280px" }}>
              起業家・個人事業主の「愚直な実践」を<br />毎日サポートするパートナーサービスです。
            </p>
          </div>
          <div style={{ display: "flex", gap: "48px", flexWrap: "wrap" }}>
            <div>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.15em", color: "var(--accent)", marginBottom: "16px", textTransform: "uppercase" }}>Navigation</p>
              {links.map(l => (
                <a key={l.id} href={pageUrl(l.id)} style={{
                  display: "block", fontFamily: "var(--font-sans)", fontSize: "13px",
                  color: "rgba(255,255,255,0.6)", padding: "5px 0",
                  letterSpacing: "0.03em", textDecoration: "none", transition: "color 0.2s",
                }}
                  onMouseEnter={e => e.currentTarget.style.color = "#fff"}
                  onMouseLeave={e => e.currentTarget.style.color = "rgba(255,255,255,0.6)"}
                >{l.label}</a>
              ))}
            </div>
            <div>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.15em", color: "var(--accent)", marginBottom: "16px", textTransform: "uppercase" }}>Contact</p>
              <a href={LINE_URL} target="_blank" rel="noopener noreferrer" style={{ display: "block", fontFamily: "var(--font-sans)", fontSize: "13px", color: "rgba(255,255,255,0.6)", textDecoration: "none", padding: "5px 0" }}>公式LINE</a>
              <a href="https://twitter.com/SpotterCoaching" target="_blank" rel="noopener noreferrer" style={{ display: "block", fontFamily: "var(--font-sans)", fontSize: "13px", color: "rgba(255,255,255,0.6)", textDecoration: "none", padding: "5px 0" }}>Twitter</a>
              <a href="https://www.facebook.com/spottercoaching" target="_blank" rel="noopener noreferrer" style={{ display: "block", fontFamily: "var(--font-sans)", fontSize: "13px", color: "rgba(255,255,255,0.6)", textDecoration: "none", padding: "5px 0" }}>Facebook</a>
            </div>
          </div>
        </div>
        <div style={{ borderTop: "1px solid rgba(255,255,255,0.1)", paddingTop: "24px", display: "flex", flexWrap: "wrap", gap: "16px", justifyContent: "space-between" }}>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px" }}>©2026 スポッターコーチング. All Rights Reserved.</p>
          <div style={{ display: "flex", gap: "24px" }}>
            <a href="policy.html" style={{ fontFamily: "var(--font-sans)", fontSize: "11px", color: "rgba(255,255,255,0.45)", textDecoration: "none" }}>プライバシーポリシー</a>
            <a href="law.html" style={{ fontFamily: "var(--font-sans)", fontSize: "11px", color: "rgba(255,255,255,0.45)", textDecoration: "none" }}>特定商取引法に基づく表記</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ── CtaSection ────────────────────────────────────────────── */
function CtaSection({ title = "まず、１週間。無料で試してください。", sub = "現状のタスクを整理し、行動の道筋をつける初回セッションから始めます。" }) {
  return (
    <section style={{ background: "var(--dark)", padding: "100px 24px", textAlign: "center" }}>
      <AnimateIn>
        <GoldLine width="40px" margin="0 auto 24px" />
        <h2 style={{
          fontFamily: "var(--font-serif)", fontSize: "clamp(20px,3vw,32px)",
          color: "#fff", fontWeight: 600, marginBottom: "20px", lineHeight: 1.55,
        }}>{title}</h2>
        <p style={{
          fontFamily: "var(--font-sans)", fontSize: "14px", color: "rgba(255,255,255,0.55)",
          marginBottom: "40px", lineHeight: 1.9,
        }}>{sub}</p>
        <LineButton large={true} />
      </AnimateIn>
    </section>
  );
}

Object.assign(window, { AnimateIn, SectionHeader, LineButton, GoldLine, Nav, Footer, CtaSection, LINE_URL, pageUrl, PAGE_URLS });
