// sections.jsx — peak/build sections for つむぎ建築

const { useEffect, useRef, useState } = React;

/* ─── helpers ─────────────────────────────────────────────────────────── */

function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    el.querySelectorAll(".reveal").forEach((n) => io.observe(n));
    return () => io.disconnect();
  }, []);
  return ref;
}

function Placeholder({ label, num, ratio = "4 / 3", style, src }) {
  return (
    <div className="ph" style={{ aspectRatio: ratio, ...style }}>
      {src && <img className="ph-img" src={src} alt={label || ""} loading="lazy" />}
      {!src && <div className="ph-frame" />}
      {num != null && !src && <span className="ph-num">{num}</span>}
      {label && !src && <span className="ph-label">{label}</span>}
    </div>
  );
}

/* ─── Nav ─────────────────────────────────────────────────────────────── */

function Nav({ scrolled }) {
  const [open, setOpen] = useState(false);
  const items = [
    ["想い", "#about", "About"],
    ["対応工事", "#services", "Services"],
    ["施工事例", "#works", "Works"],
    ["家づくりの流れ", "#process", "Process"],
    ["代表の言葉", "#message", "Message"],
    ["会社概要", "#company", "Company"],
  ];

  // Close menu on resize past breakpoint
  useEffect(() => {
    const onResize = () => { if (window.innerWidth > 880) setOpen(false); };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  // Lock body scroll while menu open
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  return (
    <React.Fragment>
    <header
      style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
        background: (scrolled || open) ? "color-mix(in srgb, var(--bg) 92%, transparent)" : "transparent",
        backdropFilter: (scrolled || open) ? "blur(12px)" : "none",
        WebkitBackdropFilter: (scrolled || open) ? "blur(12px)" : "none",
        borderBottom: (scrolled || open) ? "1px solid var(--hairline-soft)" : "1px solid transparent",
        transition: "background .35s, border-color .35s, backdrop-filter .35s",
      }}
    >
      <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 76 }}>
        <a href="#top" onClick={() => setOpen(false)} style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
          <span className="h-mincho-jp" style={{ fontSize: 22, fontWeight: 600, letterSpacing: ".12em" }}>つむぎ建築</span>
          <span className="h-garamond" style={{ fontSize: 12, color: "var(--muted)" }}>Tsumugi Kenchiku</span>
        </a>
        <nav className="nav-cta">
          <ul className="nav-items" style={{ listStyle: "none", margin: 0, padding: 0 }}>
            {items.map(([label, href]) => (
              <li key={href}>
                <a href={href} style={{ fontFamily: "var(--gothic-jp)", fontSize: 12.5, letterSpacing: ".12em", color: "var(--ink-soft)" }}>{label}</a>
              </li>
            ))}
          </ul>
          <a href="#contact" className="nav-contact" style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "10px 18px", border: "1px solid var(--ink)",
            fontFamily: "var(--label)", fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase"
          }}>
            <span>Contact</span>
            <span style={{ fontFamily: "var(--gothic-jp)", letterSpacing: ".12em", textTransform: "none", fontSize: 11.5 }}>お問合せ</span>
          </a>
          <button
            className="nav-burger"
            aria-expanded={open}
            aria-label="メニューを開く"
            onClick={() => setOpen((o) => !o)}
          >
            <span />
          </button>
        </nav>
      </div>
    </header>

      <div className={"mobile-menu " + (open ? "open" : "")}>
        {items.map(([label, href, en]) => (
          <a key={href} href={href} className="m-item" onClick={() => setOpen(false)}>
            <span className="h-mincho-jp">{label}</span>
            <span className="m-en">{en}</span>
          </a>
        ))}
        <a href="#contact" className="m-cta btn-fill" onClick={() => setOpen(false)} style={{ alignSelf: "flex-start" }}>
          <span>お問合せ・Contact</span>
        </a>
        <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 8 }}>
          <div className="h-label">Tel</div>
          <div className="h-num" style={{ fontSize: 26 }}>0566-00-0000</div>
          <span style={{ fontSize: 12, color: "var(--muted)" }}>受付 9:00–18:00 (日・祝休)</span>
        </div>
      </div>
    </React.Fragment>
  );
}

/* ─── Hero ────────────────────────────────────────────────────────────── */

function Hero({ heroLayout }) {
  const ref = useReveal();
  const [yOff, setYOff] = useState(0);
  useEffect(() => {
    const onScroll = () => setYOff(Math.min(window.scrollY * 0.18, 120));
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  if (heroLayout === "split") {
    return (
      <section id="top" ref={ref} style={{ paddingTop: 120, paddingBottom: 0, minHeight: "100vh" }}>
        <div className="wrap grid grid-cols-2" style={{ alignItems: "center", minHeight: "calc(100vh - 120px)", gridTemplateColumns: "1.05fr 1fr" }}>
          <div>
            <div className="reveal h-label hero-meta" style={{ marginBottom: 32 }}>
              <span style={{ color: "var(--ink)" }}>Hekinan · Aichi</span>
              <span className="hero-meta-sep">—</span>
              <span>Est. 1984</span>
            </div>
            <h1 className="reveal reveal-d1 h-display hero-headline-split">
              <span className="h-mincho-jp" style={{ display: "block" }}>家を、</span>
              <span className="h-mincho-jp" style={{ display: "block" }}>編み直す。</span>
            </h1>
            <p className="reveal reveal-d2" style={{ marginTop: 36, maxWidth: "32ch", color: "var(--ink-soft)", fontSize: 15.5, lineHeight: 2 }}>
              碧南で四十年。代々の家を、暮らしの今に合わせて。<br />
              壊さず、捨てず、職人の手でほどき直す工務店です。
            </p>
            <div className="reveal reveal-d3" style={{ marginTop: 48, display: "flex", gap: 24, alignItems: "center", flexWrap: "wrap" }}>
              <a href="#works" className="btn-fill">施工事例を見る</a>
              <a href="#contact" className="btn-line" style={{ paddingRight: 4 }}>無料相談する</a>
            </div>
          </div>
          <div className="reveal reveal-d2 hero-image-wrap" style={{ position: "relative" }}>
            <Placeholder label="Hero — exterior, morning light" num="01" ratio="3 / 4" src="hero.jpg" />
          </div>
        </div>
        <div style={{ marginTop: 56 }}>
          <HeroFooter />
        </div>
      </section>
    );
  }

  // default: full-bleed
  return (
    <section id="top" ref={ref} style={{ paddingTop: 130, paddingBottom: 0, position: "relative" }}>
      <div className="wrap">
        <div className="reveal h-label hero-meta" style={{ marginBottom: 40 }}>
          <span style={{ color: "var(--ink)" }}>Hekinan · Aichi</span>
          <span className="hero-meta-sep">—</span>
          <span>Established 1984</span>
          <span className="hero-meta-sep">—</span>
          <span>Reform & Renovation</span>
        </div>

        <h1 className="reveal reveal-d1 h-display hero-headline">
          <span className="h-mincho-jp">家を、編み直す。</span>
        </h1>

        <div className="reveal reveal-d2 hero-sub-row" style={{ marginTop: 40 }}>
          <p style={{ margin: 0, maxWidth: "34ch", color: "var(--ink-soft)", fontSize: 15.5, lineHeight: 2 }}>
            碧南で四十年。代々の家を、暮らしの今に合わせて。<br />
            壊さず、捨てず、職人の手でほどき直す工務店です。
          </p>
          <div className="cta-row">
            <a href="#works" className="btn-fill">施工事例を見る</a>
            <a href="#contact" className="btn-line">無料相談する</a>
          </div>
        </div>

        <div className="reveal reveal-d3 hero-image-wrap" style={{ marginTop: 72, transform: `translateY(${-yOff}px)`, transition: "transform .1s linear" }}>
          <Placeholder label="Hero — 古家のリノベーション後、午後の光" num="01 / 06" ratio="21 / 9" src="hero.jpg" />
        </div>
      </div>

      <div style={{ marginTop: 56 }}>
        <HeroFooter />
      </div>
    </section>
  );
}

function HeroFooter() {
  const stats = [
    ["1984", "創業", "Founded"],
    ["340+", "施工実績", "Projects"],
    ["12人", "在籍職人", "Craftsmen"],
    ["40年", "地域に根ざして", "In Hekinan"],
  ];
  return (
    <div className="wrap">
      <div className="hl hl-strong" />
      <div className="stats-row">
        {stats.map(([n, jp, en], i) => (
          <div key={i} className="stats-cell">
            <span className="h-num" style={{ fontSize: 38, lineHeight: 1, color: "var(--ink)" }}>{n}</span>
            <div style={{ display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap" }}>
              <span className="h-mincho-jp" style={{ fontSize: 13, color: "var(--ink-soft)" }}>{jp}</span>
              <span className="h-garamond" style={{ fontSize: 12, color: "var(--muted-2)" }}>{en}</span>
            </div>
          </div>
        ))}
      </div>
      <div className="hl hl-strong" />
    </div>
  );
}

/* ─── About / Philosophy ──────────────────────────────────────────────── */

function About() {
  const ref = useReveal();
  return (
    <section id="about" ref={ref}>
      <div className="wrap">
        <div className="sec-head">
          <div className="lbl-col reveal">
            <span className="h-label">01 / About</span>
            <span className="h-garamond" style={{ fontSize: 16, color: "var(--muted)" }}>Our philosophy</span>
          </div>
          <div>
            <h2 className="reveal reveal-d1 h-display h-mincho-jp">
              古さを、価値に。<br />
              暮らしの線を、もう一度引く。
            </h2>
          </div>
        </div>

        <div className="about-grid">
          <div className="reveal reveal-d2" style={{ position: "relative" }}>
            <Placeholder label="Detail — 既存梁を活かした天井" num="02" ratio="4 / 5" src="work-1.jpg" />
          </div>
          <div className="reveal reveal-d3 about-text">
            <p style={{ margin: 0, fontSize: 15.5, lineHeight: 2.1, color: "var(--ink-soft)" }}>
              新しい家を建てることは、ひとつの答えです。<br />
              けれど、今ある家にしか宿らない時間と気配があります。
            </p>
            <p style={{ margin: 0, fontSize: 15.5, lineHeight: 2.1, color: "var(--ink-soft)" }}>
              つむぎ建築は、解体ではなく「ほどき直し」を選びます。柱の傷、土壁の手触り、縁側の高さ。残せるものを残し、今の暮らしに必要なものだけを編み込んでいく。住む人の手癖や家族の動線に合わせて、間取りも素材も、丁寧に組み直します。
            </p>
            <p style={{ margin: 0, fontSize: 15.5, lineHeight: 2.1, color: "var(--ink-soft)" }}>
              全工程に自社の職人が手を入れます。設計者と現場が同じ屋根の下にいるから、図面ではなく、暮らしと向き合う仕事ができる。それが、四十年つづけてきた私たちのやり方です。
            </p>
            <div style={{ marginTop: 12 }}>
              <a href="#message" className="btn-line">代表の言葉を読む</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Services ────────────────────────────────────────────────────────── */

function Services() {
  const ref = useReveal();
  const items = [
    { num: "01", jp: "戸建てリノベーション", en: "Detached house renovation",
      desc: "築30年以上の家を、構造から見直し、断熱・耐震を更新。間取りと素材を組み直して暮らしの軸を引き直します。",
      ex: ["フルリノベーション", "間取り変更", "耐震・断熱改修", "古民家再生"] },
    { num: "02", jp: "マンションリノベーション", en: "Apartment renovation",
      desc: "スケルトンから組み立てる中古マンションのリノベーション。管理規約と既存設備を読み解き、必要な手を入れます。",
      ex: ["スケルトン改修", "間取り変更", "床・天井懐の調整", "防音対策"] },
    { num: "03", jp: "水まわりリフォーム", en: "Kitchen, bath, washroom",
      desc: "キッチン・浴室・洗面・トイレの単発リフォーム。配管・防水まで含めて、20年先まで使える更新を。",
      ex: ["キッチン入替", "ユニットバス更新", "洗面台造作", "トイレ改修"] },
    { num: "04", jp: "部分リフォーム・修繕", en: "Partial work & repairs",
      desc: "屋根・外壁・建具・床・造作家具など、必要な箇所だけの工事。点検と見立てから、最小の手数で。",
      ex: ["屋根葺き替え", "外壁塗装", "建具・造作家具", "床鳴り・雨漏り修繕"] },
  ];
  return (
    <section id="services" ref={ref} style={{ background: "var(--bg-soft)" }}>
      <div className="wrap">
        <div className="sec-head">
          <div className="lbl-col reveal">
            <span className="h-label">02 / Services</span>
            <span className="h-garamond" style={{ fontSize: 16, color: "var(--muted)" }}>What we make</span>
          </div>
          <div>
            <h2 className="reveal reveal-d1 h-display">対応工事</h2>
            <p className="reveal reveal-d2 lead" style={{ marginTop: 16 }}>
              小さな手当てから、家まるごとのリノベーションまで。お見積もりとご相談はすべて無料です。
            </p>
          </div>
        </div>

        <div>
          {items.map((it, i) => (
            <div key={it.num} className="reveal svc-row" style={{
              borderTop: i === 0 ? "1px solid var(--hairline)" : "1px solid var(--hairline-soft)",
              borderBottom: i === items.length - 1 ? "1px solid var(--hairline)" : "none",
            }}>
              <div className="h-num" style={{ fontSize: 22, color: "var(--muted-2)", paddingTop: 4 }}>{it.num}</div>
              <div>
                <div className="h-mincho-jp" style={{ fontSize: 22, lineHeight: 1.4 }}>{it.jp}</div>
                <div className="h-garamond" style={{ fontSize: 13, color: "var(--muted)", marginTop: 4 }}>{it.en}</div>
              </div>
              <p className="svc-desc" style={{ margin: 0, color: "var(--ink-soft)", lineHeight: 2, maxWidth: "44ch" }}>{it.desc}</p>
              <ul className="svc-ex" style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexWrap: "wrap", gap: "6px 14px" }}>
                {it.ex.map((e) => (
                  <li key={e} style={{ fontSize: 12.5, color: "var(--muted)", display: "inline-flex", alignItems: "center", gap: 6 }}>
                    <span style={{ width: 4, height: 4, borderRadius: 0, background: "var(--accent)", display: "inline-block" }} />
                    {e}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Works ───────────────────────────────────────────────────────────── */

function Works() {
  const ref = useReveal();
  const projects = [
    { num: "#0327", jp: "土間と縁側のある家", en: "House with doma & engawa", year: 2025, area: "128㎡", loc: "碧南市新川町", type: "戸建てフルリノベ", tag: "古民家再生" },
    { num: "#0319", jp: "光をひろう住戸", en: "Apartment, scooped light", year: 2025, area: "76㎡", loc: "刈谷市", type: "マンションリノベ", tag: "スケルトン" },
    { num: "#0312", jp: "厨房と本棚の家", en: "Kitchen & shelves", year: 2024, area: "104㎡", loc: "碧南市棚尾町", type: "部分リフォーム", tag: "造作キッチン" },
    { num: "#0305", jp: "湯と木の浴室", en: "Bath of wood & water", year: 2024, area: "—", loc: "高浜市", type: "水まわり", tag: "浴室改修" },
    { num: "#0298", jp: "縁を継ぐ家", en: "Inheriting eaves", year: 2024, area: "112㎡", loc: "西尾市", type: "戸建てリノベ", tag: "耐震改修" },
    { num: "#0291", jp: "二階のひと部屋", en: "One room upstairs", year: 2023, area: "18㎡", loc: "碧南市築山町", type: "部分リフォーム", tag: "子ども部屋" },
  ];
  return (
    <section id="works" ref={ref}>
      <div className="wrap">
        <div className="sec-head">
          <div className="lbl-col reveal">
            <span className="h-label">03 / Works</span>
            <span className="h-garamond" style={{ fontSize: 16, color: "var(--muted)" }}>Selected projects</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
            <h2 className="reveal reveal-d1 h-display">施工事例</h2>
            <a href="#" className="reveal reveal-d2 btn-line" style={{ paddingRight: 4 }}>すべて見る (340件)</a>
          </div>
        </div>

        <div className="works-grid">
          {projects.map((p, i) => (
            <a href="#" key={p.num} className="tile reveal" style={{ display: "block" }}>
              <Placeholder label={`${p.type} · ${p.loc}`} num={p.num} ratio="4 / 5" src={`work-${(i % 3) + 1}.jpg`} />
              <div style={{ paddingTop: 18, display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
                  <h3 className="h-mincho-jp" style={{ margin: 0, fontSize: 19, lineHeight: 1.5 }}>{p.jp}</h3>
                  <span className="h-num" style={{ fontSize: 13, color: "var(--muted-2)" }}>{p.year}</span>
                </div>
                <span className="h-garamond" style={{ fontSize: 13, color: "var(--muted)" }}>{p.en}</span>
                <div style={{ display: "flex", gap: 14, marginTop: 4, color: "var(--muted)", fontSize: 12.5 }}>
                  <span>{p.loc}</span>
                  <span style={{ color: "var(--hairline)" }}>/</span>
                  <span>{p.area}</span>
                  <span style={{ color: "var(--hairline)" }}>/</span>
                  <span>{p.tag}</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Process ─────────────────────────────────────────────────────────── */

function Process() {
  const ref = useReveal();
  const steps = [
    { n: "01", jp: "ご相談・お問合せ", en: "Inquiry", desc: "電話・メール・店舗で。お話だけでもどうぞ。", dur: "随時" },
    { n: "02", jp: "現地調査・お見立て", en: "Site survey", desc: "現地を拝見し、構造と暮らし方を読み解きます。", dur: "1〜2週" },
    { n: "03", jp: "プラン・概算提示", en: "Plan & estimate", desc: "間取り・素材・概算をご提案。納得まで何度でも。", dur: "3〜4週" },
    { n: "04", jp: "ご契約・詳細設計", en: "Contract & design", desc: "図面と仕様、職人の手配を確定します。", dur: "2〜3週" },
    { n: "05", jp: "着工・施工", en: "Construction", desc: "毎週の現場写真をご報告。途中のご相談歓迎。", dur: "1.5〜6ヶ月" },
    { n: "06", jp: "お引渡し・アフター", en: "Handover & care", desc: "10年点検と、いつでも駆けつける窓口。", dur: "永年" },
  ];
  return (
    <section id="process" ref={ref} style={{ background: "var(--bg-soft)" }}>
      <div className="wrap">
        <div className="sec-head">
          <div className="lbl-col reveal">
            <span className="h-label">04 / Process</span>
            <span className="h-garamond" style={{ fontSize: 16, color: "var(--muted)" }}>From inquiry to care</span>
          </div>
          <div>
            <h2 className="reveal reveal-d1 h-display">家づくりの流れ</h2>
            <p className="reveal reveal-d2 lead" style={{ marginTop: 16 }}>
              はじめてのリフォームでも安心して進められるよう、すべての段階で同じ担当者がお話を伺います。
            </p>
          </div>
        </div>

        <div className="process-row">
          <div className="process-line" />
          {steps.map((s, i) => (
            <div key={s.n} className="reveal step-cell">
              <div className="step-circle" style={{
                width: 36, height: 36, borderRadius: "50%",
                background: "var(--bg-soft)",
                border: "1px solid var(--ink)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "var(--serif-en)", fontStyle: "italic", fontSize: 14,
                color: "var(--ink)",
                position: "relative", zIndex: 1, marginBottom: 24,
              }}>{s.n}</div>
              <div className="h-mincho-jp" style={{ fontSize: 17, lineHeight: 1.5 }}>{s.jp}</div>
              <div className="h-garamond" style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>{s.en}</div>
              <p style={{ margin: "16px 0 0", fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.85 }}>{s.desc}</p>
              <div className="h-label" style={{ marginTop: 18, fontSize: 10, color: "var(--muted-2)" }}>{s.dur}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Founder's message ───────────────────────────────────────────────── */

function Message({ vertical }) {
  const ref = useReveal();
  const body = `祖父が建てた家を、孫の代まで住み継ぐ。
そういう仕事をしたくて、私はこの会社を継ぎました。

新築は気持ちのよいものですが、家には、住む人の手癖や、長い年月でしか出ない色気があります。私たちはそれを大切に、必要な手だけを入れていきます。

碧南という土地で、地域の家を、地域の職人の手で。
四十年つづいたつむぎ建築の役目は、これからも変わりません。`;

  return (
    <section id="message" ref={ref}>
      <div className="wrap">
        <div className="sec-head">
          <div className="lbl-col reveal">
            <span className="h-label">05 / Message</span>
            <span className="h-garamond" style={{ fontSize: 16, color: "var(--muted)" }}>From the founder</span>
          </div>
          <div>
            <h2 className="reveal reveal-d1 h-display h-mincho-jp">
              {vertical ? "家を残すという、いちばん新しい仕事。" : "家を残すという、いちばん新しい仕事。"}
            </h2>
          </div>
        </div>

        <div className={"msg-grid" + (vertical ? " vertical" : "")}>
          <div className="reveal reveal-d2 msg-portrait">
            <Placeholder label="代表 — 峰 雅彦 (2代目)" num="03" ratio="4 / 5" src="daihyo.jpg" />
            <div style={{ marginTop: 20 }}>
              <div className="h-mincho-jp" style={{ fontSize: 20 }}>峰 雅彦</div>
              <div style={{ display: "flex", gap: 12, marginTop: 4, fontSize: 12.5, color: "var(--muted)", flexWrap: "wrap" }}>
                <span>代表取締役 / 2代目</span>
                <span style={{ color: "var(--hairline)" }}>—</span>
                <span>一級建築士</span>
              </div>
            </div>
          </div>

          {vertical ? (
            <div className="reveal reveal-d3 msg-body vertical" style={{
              writingMode: "vertical-rl",
              fontFamily: "var(--serif-jp)",
              fontSize: 17,
              lineHeight: 2.6,
              letterSpacing: ".18em",
              maxHeight: "60vh",
              overflowX: "auto",
              paddingBottom: 24,
              color: "var(--ink-soft)",
            }}>
              {body.split("\n\n").map((para, i) => (
                <p key={i} style={{ margin: "0 32px 0 0", whiteSpace: "pre-line" }}>{para}</p>
              ))}
            </div>
          ) : (
            <div className="reveal reveal-d3 msg-body" style={{ display: "flex", flexDirection: "column", gap: 28 }}>
              {body.split("\n\n").map((para, i) => (
                <p key={i} style={{ margin: 0, fontSize: 15.5, lineHeight: 2.2, color: "var(--ink-soft)", whiteSpace: "pre-line" }}>{para}</p>
              ))}
              <div style={{ marginTop: 8, fontFamily: "var(--serif-en)", fontStyle: "italic", fontSize: 22, color: "var(--ink)" }}>
                Masahiko Tsumugi
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ─── Voice (testimonials) ────────────────────────────────────────────── */

function Voice() {
  const ref = useReveal();
  const voices = [
    {
      tag: "戸建てフルリノベ",
      loc: "碧南市新川町 · K様邸",
      quote: "建て替えも考えていたのですが、現地を見て『この梁、活かせますよ』と言ってくださって。仕上がった家に、母の昔の声が残っているような気がします。",
      name: "K様 ご家族 (60代)",
      year: 2025,
    },
    {
      tag: "マンションリノベ",
      loc: "刈谷市 · I様邸",
      quote: "中古マンションの購入と同時にお願いしました。打合せのたびに『暮らしてみてどうですか』と聞いてくれる距離感が、ちょうど良かったです。",
      name: "I様 ご夫婦 (30代)",
      year: 2024,
    },
    {
      tag: "水まわり改修",
      loc: "高浜市 · M様邸",
      quote: "お風呂だけのご相談でも、家全体を見て『ここは10年もちますね』と教えてくださる。職人さんの言葉に、無駄がない。",
      name: "M様 (70代)",
      year: 2024,
    },
  ];

  return (
    <section id="voice" ref={ref}>
      <div className="wrap">
        <div className="sec-head">
          <div className="lbl-col reveal">
            <span className="h-label">06 / Voice</span>
            <span className="h-garamond" style={{ fontSize: 16, color: "var(--muted)" }}>From our clients</span>
          </div>
          <div>
            <h2 className="reveal reveal-d1 h-display">お客様の声</h2>
          </div>
        </div>

        <div className="voice-grid">
          {voices.map((v, i) => (
            <figure key={i} className="reveal" style={{
              margin: 0, padding: "40px 28px 32px",
              background: "var(--bg-soft)",
              display: "flex", flexDirection: "column", gap: 24,
              position: "relative",
              minHeight: 360,
            }}>
              <span style={{
                position: "absolute", top: 18, left: 24,
                fontFamily: "var(--serif-en)", fontStyle: "italic",
                fontSize: 80, lineHeight: 1, color: "var(--hairline)",
              }}>“</span>
              <div className="h-label" style={{ marginTop: 36 }}>{v.tag}</div>
              <blockquote className="h-mincho-jp" style={{
                margin: 0, fontSize: 16, lineHeight: 2,
                color: "var(--ink)", letterSpacing: ".04em",
              }}>{v.quote}</blockquote>
              <figcaption style={{ marginTop: "auto", borderTop: "1px solid var(--hairline-soft)", paddingTop: 16, display: "flex", justifyContent: "space-between", fontSize: 12.5, color: "var(--muted)" }}>
                <span>{v.name}</span>
                <span>{v.loc} / {v.year}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── News ────────────────────────────────────────────────────────────── */

function News() {
  const ref = useReveal();
  const items = [
    { date: "2026.05.18", cat: "施工事例", title: "碧南市新川町に「土間と縁側のある家」を公開しました。" },
    { date: "2026.04.30", cat: "お知らせ", title: "ゴールデンウィーク中の営業について (4/29〜5/6)" },
    { date: "2026.04.12", cat: "イベント", title: "5月18日(土) 完成見学会のご案内 — 棚尾町S様邸" },
    { date: "2026.03.22", cat: "メディア", title: "「碧南の暮らし」誌 2026春号に弊社事例が掲載されました。" },
    { date: "2026.02.08", cat: "採用", title: "大工・若手職人の採用を開始しました。" },
  ];
  return (
    <section id="news" ref={ref}>
      <div className="wrap">
        <div className="sec-head">
          <div className="lbl-col reveal">
            <span className="h-label">07 / News</span>
            <span className="h-garamond" style={{ fontSize: 16, color: "var(--muted)" }}>Recent updates</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
            <h2 className="reveal reveal-d1 h-display">お知らせ</h2>
            <a href="#" className="reveal reveal-d2 btn-line" style={{ paddingRight: 4 }}>一覧を見る</a>
          </div>
        </div>

        <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
          {items.map((it, i) => (
            <li key={i} className="reveal">
              <a href="#" className="news-row" style={{
                borderTop: i === 0 ? "1px solid var(--hairline)" : "1px solid var(--hairline-soft)",
                borderBottom: i === items.length - 1 ? "1px solid var(--hairline)" : "none",
                transition: "color .3s",
              }} onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; }} onMouseLeave={(e) => { e.currentTarget.style.color = ""; }}>
                <time className="news-date h-garamond" style={{ fontSize: 14, color: "var(--muted)" }}>{it.date}</time>
                <span className="news-cat" style={{ fontSize: 11, letterSpacing: ".2em", color: "var(--ink-soft)", border: "1px solid var(--hairline)", padding: "5px 10px", textAlign: "center", width: "fit-content" }}>{it.cat}</span>
                <span className="news-title h-mincho-jp" style={{ fontSize: 16 }}>{it.title}</span>
                <span className="news-arrow" style={{ color: "var(--muted)" }}>→</span>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* ─── Company / Access ────────────────────────────────────────────────── */

function Company() {
  const ref = useReveal();
  const rows = [
    ["商号", "株式会社 つむぎ建築"],
    ["代表者", "峰 雅彦 (2代目) / 一級建築士"],
    ["創業", "1984年 (昭和59年) 4月"],
    ["所在地", "〒447-0857 愛知県碧南市新川町三丁目14-2"],
    ["TEL", "0566-00-0000 (受付 9:00–18:00)"],
    ["事業内容", "戸建て・マンションのリフォーム / リノベーション、水まわり工事、古民家再生、新築住宅"],
    ["許認可", "建設業許可 愛知県知事 (般-2) 第00000号"],
    ["加盟団体", "(一社) 住宅リフォーム推進協議会 / 碧南商工会議所"],
    ["取引銀行", "碧海信用金庫 碧南支店 / 三菱UFJ銀行 刈谷支店"],
  ];

  return (
    <section id="company" ref={ref} style={{ background: "var(--bg-soft)" }}>
      <div className="wrap">
        <div className="sec-head">
          <div className="lbl-col reveal">
            <span className="h-label">08 / Company</span>
            <span className="h-garamond" style={{ fontSize: 16, color: "var(--muted)" }}>Company & access</span>
          </div>
          <div>
            <h2 className="reveal reveal-d1 h-display">会社概要</h2>
          </div>
        </div>

        <div className="company-grid">
          <dl className="reveal reveal-d2" style={{ margin: 0 }}>
            {rows.map(([k, v], i) => (
              <div key={k} className="dl-row" style={{
                borderTop: i === 0 ? "1px solid var(--hairline)" : "1px solid var(--hairline-soft)",
                borderBottom: i === rows.length - 1 ? "1px solid var(--hairline)" : "none",
              }}>
                <dt style={{ fontSize: 13, color: "var(--muted)", letterSpacing: ".1em" }}>{k}</dt>
                <dd style={{ margin: 0, fontSize: 14.5, lineHeight: 1.8, color: "var(--ink-soft)" }}>{v}</dd>
              </div>
            ))}
          </dl>

          <div className="reveal reveal-d3" style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <MapPlaceholder />
            <div className="access-pair">
              <div>
                <div className="h-label">By car</div>
                <p style={{ margin: "8px 0 0", fontSize: 13.5, color: "var(--ink-soft)", lineHeight: 1.85 }}>
                  伊勢湾岸自動車道 「碧南IC」 より<br />車で約8分。専用駐車場 5台。
                </p>
              </div>
              <div>
                <div className="h-label">By train</div>
                <p style={{ margin: "8px 0 0", fontSize: 13.5, color: "var(--ink-soft)", lineHeight: 1.85 }}>
                  名鉄三河線 「碧南駅」 より<br />徒歩 12分 / タクシー 3分。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function MapPlaceholder() {
  return (
    <div className="ph" style={{ aspectRatio: "4 / 3", position: "relative" }}>
      <div className="ph-frame" />
      <svg viewBox="0 0 400 300" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: .35 }}>
        <g fill="none" stroke="currentColor" strokeWidth=".75" style={{ color: "var(--muted)" }}>
          <path d="M0,90 L400,72" />
          <path d="M0,160 L400,148" />
          <path d="M0,230 L400,210" />
          <path d="M80,0 L72,300" />
          <path d="M180,0 L172,300" />
          <path d="M290,0 L284,300" />
          <path d="M0,40 Q200,30 400,55" />
          <path d="M0,260 Q200,280 400,250" strokeDasharray="4 4" />
        </g>
        <circle cx="218" cy="158" r="6" fill="var(--accent)" />
        <circle cx="218" cy="158" r="18" fill="var(--accent)" opacity=".15" />
      </svg>
      <span className="ph-label">Hekinan, Aichi · 35.0067° N, 136.9881° E</span>
      <span className="ph-num">MAP</span>
    </div>
  );
}

/* ─── CTA ─────────────────────────────────────────────────────────────── */

function Cta() {
  const ref = useReveal();
  return (
    <section id="contact" ref={ref} style={{ background: "var(--ink)", color: "var(--bg)" }}>
      <div className="wrap">
        <div className="reveal h-label" style={{ color: "var(--bg-deep)", marginBottom: 32 }}>
          09 / Contact —— 相談・見積もりはすべて無料です
        </div>
        <h2 className="reveal reveal-d1 h-display h-mincho-jp" style={{
          color: "var(--bg)",
          fontSize: "clamp(36px, 6vw, 88px)",
          lineHeight: 1.2, margin: 0, maxWidth: "16ch",
        }}>
          家のこと、まず<br />話してみませんか。
        </h2>

        <div className="reveal reveal-d2 cta-row3" style={{ marginTop: 56 }}>
          <div>
            <div className="h-label" style={{ color: "var(--bg-deep)" }}>Form</div>
            <p style={{ margin: "12px 0 24px", color: "var(--bg-soft)", fontSize: 14, lineHeight: 1.8 }}>
              フォームから24時間ご相談を受け付けています。担当者より2営業日以内にご連絡します。
            </p>
            <a href="#" className="btn-fill" style={{ background: "var(--bg)", color: "var(--ink)" }}>
              相談フォーム
            </a>
          </div>
          <div>
            <div className="h-label" style={{ color: "var(--bg-deep)" }}>Tel</div>
            <div className="h-num" style={{ fontSize: 30, margin: "12px 0 8px", color: "var(--bg)" }}>0566-00-0000</div>
            <p style={{ margin: 0, color: "var(--muted-2)", fontSize: 13 }}>受付 9:00–18:00 (日・祝休)</p>
          </div>
          <div>
            <div className="h-label" style={{ color: "var(--bg-deep)" }}>Visit</div>
            <p style={{ margin: "12px 0 8px", color: "var(--bg)", fontSize: 14, lineHeight: 1.8 }}>
              碧南市新川町三丁目14-2<br />事務所での打合せも歓迎します。
            </p>
            <a href="#company" style={{ fontFamily: "var(--label)", fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--bg-soft)", borderBottom: "1px solid var(--bg-soft)", paddingBottom: 3 }}>
              MAP →
            </a>
          </div>
        </div>

        <div className="reveal reveal-d3 cta-checks" style={{ marginTop: 40, color: "var(--bg-deep)", fontSize: 12.5, letterSpacing: ".12em" }}>
          <span>✓ 相談無料</span>
          <span>✓ 現地調査・見積もり無料</span>
          <span>✓ しつこい営業なし</span>
          <span>✓ 提案までの平均 3週間</span>
        </div>
      </div>
    </section>
  );
}

/* ─── Footer ──────────────────────────────────────────────────────────── */

function Footer() {
  return (
    <footer style={{ background: "var(--ink)", color: "var(--bg)", padding: "56px 0 32px", borderTop: "1px solid rgba(242,237,226,.12)" }}>
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap" }}>
              <span className="h-mincho-jp" style={{ fontSize: 24, fontWeight: 600, letterSpacing: ".12em", color: "var(--bg)" }}>つむぎ建築</span>
              <span className="h-garamond" style={{ fontSize: 13, color: "var(--muted-2)" }}>Tsumugi Kenchiku</span>
            </div>
            <p style={{ margin: "18px 0 0", color: "var(--muted-2)", fontSize: 13, lineHeight: 1.85 }}>
              碧南で四十年、家を編み直す工務店。<br />
              リフォーム・リノベーション・古民家再生。
            </p>
          </div>
          <FooterCol title="Service" items={["戸建てリノベ", "マンションリノベ", "水まわり", "部分リフォーム"]} />
          <FooterCol title="About" items={["想い", "代表の言葉", "会社概要", "採用情報"]} />
          <FooterCol title="Contact" items={["相談フォーム", "電話 0566-00-0000", "資料請求", "見学会の予約"]} />
        </div>
        <div className="footer-bottom">
          <span style={{ fontFamily: "var(--label)", fontSize: 11, letterSpacing: ".18em", color: "var(--muted-2)" }}>
            © 1984—2026 株式会社 つむぎ建築 / Tsumugi Kenchiku Co., Ltd.
          </span>
          <div style={{ display: "flex", gap: 24, fontSize: 12, color: "var(--muted-2)" }}>
            <a href="#" style={{ borderBottom: "1px solid transparent" }}>プライバシーポリシー</a>
            <a href="#" style={{ borderBottom: "1px solid transparent" }}>建設業許可</a>
            <a href="#" style={{ borderBottom: "1px solid transparent" }}>採用情報</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div className="h-label" style={{ color: "var(--bg-deep)" }}>{title}</div>
      <ul style={{ listStyle: "none", margin: "16px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {items.map((i) => (
          <li key={i}><a href="#" style={{ fontSize: 13.5, color: "var(--bg-soft)" }}>{i}</a></li>
        ))}
      </ul>
    </div>
  );
}

/* ─── exports ─────────────────────────────────────────────────────────── */

Object.assign(window, {
  Nav, Hero, About, Services, Works, Process, Message, Voice, News, Company, Cta, Footer,
});