// Shared helpers + Header + Footer + PageHero for the （有）滝沢工務店 site.
const { Button, Badge, SectionLabel } = window.DesignSystem_82a491;

// ---- Lucide icon wrapper ----
function Icon({ name, size = 20, color = "currentColor", stroke = 2, style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const host = ref.current;
    if (!host || !window.lucide) return;
    host.innerHTML = "";
    const i = document.createElement("i");
    i.setAttribute("data-lucide", name);
    host.appendChild(i);
    window.lucide.createIcons({ attrs: { width: size, height: size, "stroke-width": stroke } });
    const svg = host.querySelector("svg");
    if (svg) { svg.style.color = color; svg.style.display = "block"; }
  });
  return <span ref={ref} style={{ display: "inline-flex", width: size, height: size, ...style }} />;
}

const NAV = [
  { href: "services.html", label: "事業内容" },
  { href: "works.html", label: "施工事例" },
  { href: "company.html", label: "会社案内" },
  { href: "contact.html", label: "無料相談" },
];

// Header is dark by default (sits over an indigo banner) unless `solid`.
function Header({ current, solid = false }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", fn, { passive: true });
    fn();
    return () => window.removeEventListener("scroll", fn);
  }, []);
  const onLight = solid || scrolled;
  const linkColor = onLight ? "var(--text-body)" : "rgba(255,255,255,0.88)";
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50, height: "var(--header-height)",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "0 40px", background: onLight ? "rgba(251,248,242,0.94)" : "transparent",
      backdropFilter: onLight ? "saturate(180%) blur(10px)" : "none",
      borderBottom: "1px solid " + (onLight ? "var(--border-default)" : "transparent"),
      transition: "all var(--duration-base) var(--ease-out)",
    }}>
      <a href="index.html" style={{ display: "flex", alignItems: "center", gap: 11 }}>
        {onLight
          ? <img src="../../assets/logo-horizontal.svg" alt="（有）滝沢工務店" style={{ height: 46 }} />
          : (<>
              <img src="../../assets/logo-mark.svg" alt="" style={{ width: 42, height: 42 }} />
              <span style={{ fontFamily: "var(--font-mincho)", fontWeight: 700, fontSize: 24, color: "#fff", letterSpacing: 2 }}>滝沢工務店</span>
            </>)}
      </a>
      <nav style={{ display: "flex", alignItems: "center", gap: 4 }}>
        {NAV.map(n => {
          const active = current === n.href;
          return (
            <a key={n.href} href={n.href}
              style={{ padding: "9px 16px", fontSize: "var(--text-sm)", fontWeight: 700, color: active ? "var(--text-accent)" : linkColor, borderRadius: "var(--radius-md)", position: "relative", transition: "color var(--duration-fast) var(--ease-out)" }}
              onMouseEnter={e => e.currentTarget.style.color = "var(--text-accent)"}
              onMouseLeave={e => e.currentTarget.style.color = active ? "var(--text-accent)" : linkColor}>
              {n.label}
              {active && <span style={{ position: "absolute", left: 16, right: 16, bottom: 2, height: 2, background: "var(--color-accent)" }} />}
            </a>
          );
        })}
      </nav>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <a href="tel:0468560263" style={{ display: "flex", alignItems: "center", gap: 7, fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: "var(--text-md)", color: onLight ? "var(--text-brand)" : "#fff" }}>
          <Icon name="phone" size={16} stroke={2.2} />046-856-0263
        </a>
        <Button variant="accent" size="sm" href="contact.html" iconLeft={<Icon name="mail" size={15} stroke={2.2} />}>無料相談</Button>
      </div>
    </header>
  );
}

// Slim indigo page banner for interior pages.
function PageHero({ en, title, sub, photo }) {
  return (
    <section style={{ position: "relative", padding: "calc(var(--header-height) + 44px) 40px 56px", marginTop: "calc(var(--header-height) * -1)", overflow: "hidden", background: "var(--ai-800)" }}>
      {photo && <Photo src={photo} blur={7} style={{ position: "absolute", inset: 0, zIndex: 0 }} />}
      <div style={{ position: "absolute", inset: 0, zIndex: 1, background: photo ? "linear-gradient(180deg, rgba(18,38,56,0.86), rgba(23,48,73,0.92))" : "none" }} />
      <div style={{ position: "relative", zIndex: 2, maxWidth: "var(--container-lg)", margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
          <span style={{ width: 28, height: 2, background: "var(--color-accent)" }} />
          <span style={{ fontSize: "var(--text-xs)", fontWeight: 700, letterSpacing: "var(--tracking-widest)", textTransform: "uppercase", color: "var(--kaki-300)" }}>{en}</span>
        </div>
        <h1 style={{ fontFamily: "var(--font-mincho)", fontWeight: 700, fontSize: "var(--text-4xl)", color: "#fff", margin: 0, lineHeight: "var(--leading-tight)" }}>{title}</h1>
        {sub && <p style={{ fontSize: "var(--text-md)", color: "rgba(255,255,255,0.82)", marginTop: 14, maxWidth: 620, lineHeight: "var(--leading-relaxed)" }}>{sub}</p>}
      </div>
    </section>
  );
}

// Breadcrumb under the page banner.
function Crumb({ label }) {
  return (
    <div style={{ background: "var(--surface-card)", borderBottom: "1px solid var(--border-default)" }}>
      <div style={{ maxWidth: "var(--container-lg)", margin: "0 auto", padding: "12px 40px", fontSize: "var(--text-xs)", color: "var(--text-muted)", display: "flex", gap: 8, alignItems: "center" }}>
        <a href="index.html" style={{ color: "var(--text-muted)" }}>ホーム</a>
        <span style={{ color: "var(--text-subtle)" }}>›</span>
        <span style={{ color: "var(--text-body)", fontWeight: 700 }}>{label}</span>
      </div>
    </div>
  );
}

// Persimmon CTA band reused at the foot of interior pages.
function CTABand() {
  return (
    <section style={{ background: "var(--kaki-500)", padding: "56px 40px" }}>
      <div style={{ maxWidth: "var(--container-lg)", margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 28, flexWrap: "wrap" }}>
        <div>
          <h2 style={{ fontFamily: "var(--font-mincho)", fontWeight: 700, fontSize: "var(--text-2xl)", color: "#fff", margin: "0 0 6px" }}>見積もり・ご相談は無料です</h2>
          <p style={{ fontSize: "var(--text-sm)", color: "rgba(255,255,255,0.9)", margin: 0 }}>家のことなら何でも、お気軽にご相談ください。</p>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
          <a href="tel:0468560263" style={{ fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: "var(--text-xl)", color: "#fff" }}>046-856-0263</a>
          <Button variant="secondary" size="lg" href="contact.html" style={{ background: "#fff", borderColor: "#fff", color: "var(--kaki-700)" }}>無料相談フォーム</Button>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: "var(--ai-900)", color: "rgba(255,255,255,0.78)", padding: "56px 40px 32px" }}>
      <div style={{ maxWidth: "var(--container-lg)", margin: "0 auto", display: "flex", justifyContent: "space-between", gap: 40, flexWrap: "wrap" }}>
        <div style={{ maxWidth: 320 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
            <img src="../../assets/logo-mark.svg" alt="" style={{ width: 40, height: 40 }} />
            <span style={{ fontFamily: "var(--font-mincho)", fontWeight: 700, fontSize: 22, color: "#fff" }}>滝沢工務店</span>
          </div>
          <p style={{ fontSize: "var(--text-sm)", lineHeight: "var(--leading-relaxed)", margin: 0 }}>
            地域に根ざし創業35年。造り手の顔が見える、心のこもった住まい造りを。
          </p>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-sm)", color: "var(--kaki-300)", marginTop: 16 }}>is-takizawa@takizawakoumuten.jp</div>
        </div>
        <div style={{ display: "flex", gap: 56, flexWrap: "wrap" }}>
          <div>
            <div style={{ fontSize: "var(--text-xs)", letterSpacing: "var(--tracking-wider)", color: "var(--kaki-300)", fontWeight: 700, marginBottom: 14 }}>MENU</div>
            {NAV.map(n => (
              <a key={n.href} href={n.href}
                style={{ display: "block", fontSize: "var(--text-sm)", padding: "5px 0", color: "rgba(255,255,255,0.78)" }}>{n.label}</a>
            ))}
          </div>
          <div style={{ fontSize: "var(--text-sm)", lineHeight: "var(--leading-relaxed)" }}>
            <div style={{ fontSize: "var(--text-xs)", letterSpacing: "var(--tracking-wider)", color: "var(--kaki-300)", fontWeight: 700, marginBottom: 14 }}>INFO</div>
            〒238-0313<br />神奈川県横須賀市武1-31-8<br />
            <span style={{ fontFamily: "var(--font-mono)" }}>TEL 046-856-0263</span><br />
            <span style={{ fontFamily: "var(--font-mono)" }}>営業 8:00–18:00 / 定休 日・祝</span>
          </div>
        </div>
      </div>
      <div style={{ maxWidth: "var(--container-lg)", margin: "40px auto 0", paddingTop: 20, borderTop: "1px solid rgba(255,255,255,0.12)", display: "flex", justifyContent: "space-between", fontSize: "var(--text-xs)", color: "rgba(255,255,255,0.5)" }}>
        <span>建設業：神奈川県知事免許（般1）第10945号</span>
        <span>© 1970 （有）滝沢工務店</span>
      </div>
    </footer>
  );
}

function Photo({ cap, ai, src, blur, style }) {
  if (src) {
    return (
      <div style={{ position: "relative", overflow: "hidden", background: "var(--ai-800)", ...style }}>
        <img src={src} alt={cap || ""} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", filter: blur ? `blur(${blur}px)` : "none", transform: blur ? "scale(1.15)" : "none" }} />
      </div>
    );
  }
  return <div className={"photo" + (ai ? " ai" : "")} data-cap={cap || "PHOTO"} style={style} />;
}

Object.assign(window, { Icon, Header, Footer, Photo, PageHero, Crumb, CTABand, NAV });