/* ===========================================================
   Sections — broken into composable React components.
   Loaded as a Babel script; everything attaches to window.
   =========================================================== */

const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
};

/* -------- Top marquee -------- */
const TopMarquee = () => {
  const items = [
    "Funabiki Kohmuten Co., Ltd.",
    "Est. 1981",
    "Kobe-Hyogo / Japan",
    "ISO 9001:2015 Certified",
    "Building Kobe — General Construction",
    "Bonji Tettei — Our Action Principle",
  ];
  const all = [...items, ...items, ...items];
  return (
    <div className="top-marquee" aria-hidden="true">
      <div className="track">
        {all.map((t, i) => (
          <React.Fragment key={i}>
            <span>{t}</span>
            <span className="dot">◆</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
};

/* -------- Nav -------- */
const Nav = ({ inverted, active }) => {
  const [scrolled, setScrolled] = 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: "about",   jp: "私たちについて", num: "01" },
    { id: "business",jp: "事業内容",       num: "02" },
    { id: "projects",jp: "施工実績",       num: "03" },
    { id: "message", jp: "代表メッセージ", num: "04" },
    { id: "company", jp: "会社概要",       num: "05" },
    { id: "news",    jp: "ニュース",       num: "06" },
    { id: "recruit", jp: "採用情報",       num: "07" },
  ];
  return (
    <header className={`nav ${scrolled ? "scrolled" : ""} ${inverted ? "invert" : ""}`}>
      <div className="nav-inner">
        <a href="#top" className="brand" aria-label="株式会社フナビキ工務店">
          <div className="brand-logo">
            <img src="images/logo.png" alt="株式会社フナビキ工務店"/>
          </div>
        </a>
        <nav className="nav-links">
          {links.map((l) => (
            <a key={l.id} href={`#${l.id}`} className={active === l.id ? "active" : ""}>
              <span className="num">{l.num}</span>
              <span>{l.jp}</span>
            </a>
          ))}
        </nav>
        <div className="nav-cta">
          <div className="tel">
            <small>TEL</small>
            <b>078-362-0675</b>
          </div>
          <a href="#contact" className="contact-btn">
            <span>お問い合わせ</span>
            <span className="arr">→</span>
          </a>
        </div>
      </div>
    </header>
  );
};

/* -------- Hero -------- */
const Hero = () => {
  const slides = [
    {
      kind: "harbor",
      label: "01 / KOBE — VIEW FROM ROKKO",
      eyebrow: "Since 1981 / Kobe — Hyogo",
      h1: (<>これからも、<br/>神戸の街を創り続ける。</>),
      sub: "フナビキ工務店は、昭和五十六年の創業以来、神戸の街と共に在り続けてきました。建物づくりのことならどんなことでも、お助けできるスタッフをご用意しております。",
      meta: ["EST. 1981", "KOBE / HYOGO", "GENERAL CONSTRUCTION"],
    },
    {
      kind: "worker",
      label: "02 / ON SITE — CRAFTSMAN AT WORK",
      eyebrow: "Craftsmanship / Site First",
      h1: (<>現場で、<br/>語る。</>),
      sub: "建物づくりの主役は、図面でも機械でもなく、関わる人々と、その間に流れる信頼です。「凡事徹底」当たり前のことを当たり前に、を毎日の現場で。",
      meta: ["BONJI TETTEI", "SITE FIRST", "ISO 9001:2015"],
    },
    {
      kind: "facade",
      label: "03 / RESIDENTIAL TOWER — KOBE",
      eyebrow: "Residential / Mid- to High-Rise",
      h1: (<>住む人の百年を、<br/>つくる。</>),
      sub: "新築マンション・タワーレジデンスから、商業施設、大規模修繕、耐震補強まで。神戸を中心に、街の輪郭を描き続けています。建てたあとも、地域に残る建物を。",
      meta: ["RC / SRC", "RESIDENTIAL", "COMMERCIAL"],
    },
    {
      kind: "entrance",
      label: "04 / RESIDENCE ENTRANCE — KOBE",
      eyebrow: "Local Roots / Hyogo Ward, Kobe",
      h1: (<>街と、<br/>人と、共に。</>),
      sub: "本社は神戸市兵庫区新開地。施主様、設計者様、職人、近隣の方々、関わるすべての人を思いやり、信頼関係を積み重ねながら、街の風景をつくっています。",
      meta: ["HEAD OFFICE", "HYOGO WARD", "SHINKAICHI 4-1-12"],
    },
  ];
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI((n) => (n + 1) % slides.length), 6000);
    return () => clearInterval(t);
  }, []);
  const cur = slides[i];
  return (
    <section className="hero" id="top">
      <div className="hero-stage">
        {slides.map((s, idx) => (
          <div key={idx} className={`hero-slide ${idx === i ? "active" : ""}`}>
            <Photo kind={s.kind} label={s.label} />
          </div>
        ))}
      </div>
      <div className="hero-side">FUNABIKI KOHMUTEN</div>
      <div className="scroll-cue">SCROLL</div>
      <div className="hero-grid">
        <div className="hero-headline" key={i}>
          <div className="hero-eyebrow">{cur.eyebrow}</div>
          <h1>{cur.h1}</h1>
          <p className="hero-sub">{cur.sub}</p>
        </div>
        <div className="hero-bottom">
          <div className="hero-meta">
            {cur.meta.map((m, k) => <b key={k}>{m}</b>)}
          </div>
          <div className="hero-pager">
            {slides.map((_, idx) => (
              <button
                key={idx}
                className={idx === i ? "active" : ""}
                onClick={() => setI(idx)}
                aria-label={`Slide ${idx + 1}`}
              />
            ))}
          </div>
          <div className="hero-counter">
            <span className="cur">{String(i + 1).padStart(2, "0")}</span>
            <span className="of">/ {String(slides.length).padStart(2, "0")}</span>
          </div>
        </div>
      </div>
    </section>
  );
};

/* -------- About / Concept -------- */
const About = () => {
  useReveal();
  return (
    <section className="about sec-pad" id="about">
      <div className="sec-inner">
        <div className="sec-head reveal">
          <div className="sec-eye"><span className="num">01</span> ABOUT US</div>
          <h2 className="sec-title">
            <small>OUR APPROACH</small>
            思いやりのある、<br/>建物づくり。
          </h2>
        </div>
        <div className="concept-grid">
          <div className="concept-text reveal">
            <p className="lead">
              <span className="mark">思いやりのある建物づくりを。</span><br/>
              世のため、人のため、自分たちのために。
            </p>
            <p>
              株式会社フナビキ工務店は、昭和五十六年の創業以来、神戸の街に根を張ってきました。施主様、設計者様、職人、そして近隣の方々まで。立場の違う、関わるすべての人を思いやって建物をつくる。それがわたしたちの考える、建物づくりのかたちです。
            </p>
            <p>
              行動の指針は「凡事徹底」。当たり前のことを、当たり前に、徹底してやりきる。簡単に見えて、毎日の現場で問われ続ける言葉です。創業以来かわらず、その積み重ねの先に、住む人の暮らしと街の風景があると信じています。
            </p>
          </div>
          <div className="concept-photo reveal">
            <Photo kind="worker" label="ON SITE / KOBE" />
          </div>
        </div>
      </div>
    </section>
  );
};

/* -------- Stats -------- */
const Stats = () => {
  useReveal();
  const items = [
    { num: "01", v: "1981", sup: "年創業", label: "FOUNDED", desc: "昭和56年3月、神戸市兵庫区にて個人経営として創業。以来、神戸の街と歩み続けています。" },
    { num: "02", v: "350", sup: "件超", label: "PROJECTS DELIVERED", desc: "新築から大規模修繕まで、阪神間エリア全域で施工実績を積み重ねています。" },
    { num: "03", v: "16", sup: "名", label: "STAFF / ENGINEERS", desc: "うち建築施工管理技士など有資格者10名。少数精鋭で品質を担保。" },
    { num: "04", v: "ISO", sup: "9001:2015", label: "QUALITY CERTIFIED", desc: "JIS Q 9001:2015 品質マネジメントシステム認証取得（2014年〜）。" },
  ];
  return (
    <section className="stats">
      <div className="stats-row">
        {items.map((s, i) => (
          <div key={i} className="stat reveal">
            <div className="num-en">{s.num}</div>
            <div className="label">{s.label}</div>
            <div className="value">
              <span>{s.v}</span>
              <sup>{s.sup}</sup>
            </div>
            <div className="desc">{s.desc}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

/* -------- Business -------- */
const Business = () => {
  useReveal();
  const cards = [
    {
      n: "01 / NEW BUILD",
      jp: "新築マンション・タワーレジデンス",
      en: "RESIDENTIAL CONSTRUCTION",
      photo: "facade",
      label: "RESIDENTIAL — KOBE",
      desc: "RC・SRC造を主軸に、低層から中高層、タワーマンションまで。神戸を代表する住居を、設計者・施主・職人と共につくっています。住む人の百年に耐える品質を、現場の一打から。",
      tags: ["RC", "SRC", "TOWER", "RESIDENTIAL"],
    },
    {
      n: "02 / COMMERCIAL",
      jp: "オフィス・商業施設・内装",
      en: "COMMERCIAL & INTERIOR",
      photo: "interior",
      label: "INTERIOR FIT-OUT",
      desc: "事務所ビル、店舗、複合商業施設の新築・改修・内装を手がけます。立地や用途に合わせた構造計画と、街並みに調和する外装・内装で、長く使われる建物をつくります。",
      tags: ["OFFICE", "RETAIL", "INTERIOR"],
    },
    {
      n: "03 / RENOVATION",
      jp: "大規模修繕・耐震補強",
      en: "RENOVATION & SEISMIC",
      photo: "modern",
      label: "RENOVATION WORK",
      desc: "築年数を重ねた建物の価値を未来へ。マンション・公共施設の改修工事から、阪神・淡路大震災を経験したわたしたちならではの耐震補強まで。建物を活かす技術を担います。",
      tags: ["RETROFIT", "SEISMIC", "MAINTENANCE"],
    },
    {
      n: "04 / PUBLIC",
      jp: "官公庁・教育施設",
      en: "PUBLIC & EDUCATIONAL",
      photo: "school",
      label: "SCHOOL & PUBLIC",
      desc: "神戸市・神戸住環境整備公社、学校法人行吉学園など、地域の暮らしを支える公的な建物。地域密着のゼネコンとして、長く厳しい品質基準にも応えてきました。",
      tags: ["GOV", "SCHOOL", "PUBLIC"],
    },
  ];
  return (
    <section className="business sec-pad" id="business">
      <div className="sec-inner">
        <div className="sec-head reveal">
          <div className="sec-eye"><span className="num">02</span> BUSINESS</div>
          <h2 className="sec-title">
            <small>WHAT WE BUILD</small>
            建物づくりの、<br/>四つのかたち。
          </h2>
        </div>
        <div className="biz-grid">
          {cards.map((c, i) => (
            <div className="biz-card reveal" key={i}>
              <div>
                <div className="biz-num">{c.n}</div>
              </div>
              <Photo kind={c.photo} label={c.label} className="biz-photo" />
              <div>
                <h3>{c.jp}</h3>
                <div className="biz-en">{c.en}</div>
                <p>{c.desc}</p>
                <div className="biz-tags">
                  {c.tags.map((t, k) => <span key={k}>{t}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.TopMarquee = TopMarquee;
window.Nav = Nav;
window.Hero = Hero;
window.About = About;
window.Stats = Stats;
window.Business = Business;
window.useReveal = useReveal;