/* ===========================================================
   Sections — Projects / Message / Company / News / Recruit / Contact / Footer
   =========================================================== */

/* -------- Projects -------- */
const Projects = () => {
  useReveal();
  // ※ 案件名・年・規模は仮データ。Phase B でクライアントから実データ提供を受ける前提
  const all = [
    { cat: "tower",  name: "神戸タワーレジデンス（仮）",       loc: "神戸市中央区", year: "2024", scale: "RC造 14F・78戸",  photo: "facade",   span: "span-6", featured: true },
    { cat: "mansion",name: "マンション施工事例 須磨（仮）",     loc: "神戸市須磨区", year: "2022", scale: "RC造 8F",        photo: "entrance", span: "span-6" },
    { cat: "mansion",name: "マンション施工事例 兵庫（仮）",     loc: "神戸市兵庫区", year: "2021", scale: "RC造 10F",       photo: "interior", span: "" },
    { cat: "school", name: "学校改修工事 事例（仮）",          loc: "神戸市東灘区", year: "2022", scale: "鉄骨造 4F 改修",  photo: "school",   span: "" },
    { cat: "office", name: "オフィス内装工事 事例（仮）",       loc: "神戸市中央区", year: "2023", scale: "S造 6F 内装",    photo: "modern",   span: "" },
    { cat: "tower",  name: "（仮称）タワーレジデンス計画",      loc: "神戸市灘区",   year: "2025", scale: "RC造 21F 予定",   photo: "worker",   span: "span-8", featured: true },
    { cat: "mansion",name: "マンション施工事例 兵庫キャナル（仮）", loc: "神戸市兵庫区", year: "2021", scale: "RC造 10F",       photo: "harbor",   span: "" },
    { cat: "office", name: "新開地複合ビル 大規模修繕（仮）",   loc: "神戸市兵庫区", year: "2020", scale: "SRC造 大規模修繕",  photo: "concrete", span: "" },
    { cat: "school", name: "市立小学校 耐震補強工事（仮）",     loc: "神戸市長田区", year: "2019", scale: "RC造 耐震補強",    photo: "rebar",    span: "" },
  ];
  const tabs = [
    { id: "all",     jp: "すべて",        en: "ALL" },
    { id: "tower",   jp: "タワー・高層",   en: "TOWER" },
    { id: "mansion", jp: "マンション",    en: "RESIDENTIAL" },
    { id: "office",  jp: "オフィス・商業", en: "COMMERCIAL" },
    { id: "school",  jp: "学校・公共",     en: "PUBLIC" },
  ];
  const [tab, setTab] = React.useState("all");
  const filtered = tab === "all" ? all : all.filter(p => p.cat === tab);
  const counts = tabs.map(t => t.id === "all" ? all.length : all.filter(p => p.cat === t.id).length);

  return (
    <section className="projects sec-pad" id="projects">
      <div className="sec-inner">
        <div className="sec-head reveal">
          <div className="sec-eye"><span className="num">03</span> PROJECTS</div>
          <h2 className="sec-title">
            <small>SELECTED WORKS</small>
            街に残る、<br/>わたしたちの仕事。
          </h2>
        </div>

        <div className="proj-tabs reveal" role="tablist">
          {tabs.map((t, i) => (
            <button
              key={t.id}
              role="tab"
              className={tab === t.id ? "active" : ""}
              onClick={() => setTab(t.id)}
            >
              {t.jp}
              <span className="cnt">{String(counts[i]).padStart(2,"0")}</span>
            </button>
          ))}
        </div>

        <div className="proj-grid">
          {filtered.map((p, i) => (
            <article className={`proj-card ${p.span} reveal`} key={`${tab}-${i}`}>
              <div className="proj-photo">
                <Photo kind={p.photo} />
                <div className={`corner ${p.featured ? "accent" : ""}`}>
                  {p.featured ? "FEATURED" : `№ ${String(i+1).padStart(3,"0")}`}
                </div>
              </div>
              <div className="proj-meta">
                <span>{p.year}</span>
                <span>{p.scale}</span>
              </div>
              <h4>{p.name}</h4>
              <div className="proj-loc">{p.loc}</div>
            </article>
          ))}
        </div>

        <div className="proj-foot">
          <div className="note">※ 一部抜粋。詳細は施工実績ページにて随時更新しています。</div>
          <a href="#" className="btn-line">
            <span>すべての施工実績を見る</span>
            <span className="arr en">VIEW ALL →</span>
          </a>
        </div>
      </div>
    </section>
  );
};

/* -------- Message -------- */
const Message = () => {
  useReveal();
  return (
    <section className="message sec-pad" id="message">
      <div className="sec-inner">
        <div className="msg-grid">
          <div className="msg-photo reveal">
            <Photo kind="president" label="REPRESENTATIVE / PRESIDENT" />
          </div>
          <div className="msg-body reveal">
            <div className="sec-eye"><span className="num">04</span> MESSAGE</div>
            <h2>
              建物づくりは、<br/>
              人づくり。すべては<br/>
              <em>思いやり</em>から始まる。
            </h2>
            <p>
              この度は、株式会社フナビキ工務店のホームページへお越しくださり、誠にありがとうございます。弊社は、創業以来建物づくりのことならどんなことでもチャレンジしてきました。
            </p>
            <p>
              わたしたちが大切にしているのは、関わるすべての人への思いやりです。施主様、設計者様、職人、近隣の方々。立場の違う一人ひとりを尊び、信頼関係を積み重ねながら、より良い建物を創り続ける。簡単なように見えて、毎日毎日、現場で問われ続ける姿勢です。
            </p>
            <p>
              そして「凡事徹底」。当たり前のことを当たり前にすることに、価値があると信じています。神戸の街は、震災を経て、強くしなやかに生まれ変わりました。わたしたちもまた、その街の歩みと共に在り続けます。今後ともごひいきくださいますよう、よろしくお願い申し上げます。
            </p>
            <div className="msg-sign">
              <div>
                <div className="post">代表取締役 / PRESIDENT</div>
                <div className="name">舟引 大資</div>
              </div>
              <img src="images/signature.gif" alt="代表取締役 舟引 大資" className="msg-sign-img"/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* -------- Company -------- */
const Company = () => {
  useReveal();
  const rows = [
    ["会社名",  "COMPANY",       "株式会社 フナビキ工務店"],
    ["所在地",  "ADDRESS",       "〒652-0811 兵庫県神戸市兵庫区新開地4丁目1-12"],
    ["代表者",  "REPRESENTATIVE","代表取締役 舟引 大資"],
    ["創業 / 設立", "FOUNDED",   "昭和56年（1981年）3月／法人化 平成元年4月"],
    ["資本金",  "CAPITAL",       "2,000万円"],
    ["社員数",  "STAFF",         "16名（うち有資格者 10名）"],
    ["建設業許可", "LICENSE",    "建築工事業 兵庫県知事 許可（特-3）第108119号"],
    ["事業内容", "BUSINESS",     "建築工事の設計・施工・監理／大規模修繕・改修工事／耐震補強工事"],
    ["TEL / FAX", "CONTACT",    "TEL 078-362-0675 / FAX 078-362-0676"],
    ["主要取引先", "CLIENTS",    "和田興産株式会社、株式会社イー・グルーブ、エスリード株式会社、学校法人行吉学園、神戸市、神戸住環境整備公社 ほか"],
    ["取引銀行", "BANKS",        "神戸信用金庫兵庫支店 / みなと銀行 / 三井住友銀行 / 日新信用金庫 / りそな銀行 / 中国銀行 ほか"],
  ];
  const history = [
    { y: "1981", e: "昭和56年3月", t: "神戸市にて個人経営として創業" },
    { y: "1984", e: "昭和59年2月", t: "有限会社フナビキ工務店を設立" },
    { y: "1989", e: "平成元年4月", t: "株式会社フナビキ工務店に組織変更（資本金2,000万円）" },
    { y: "1995", e: "平成7年",    t: "阪神・淡路大震災／復旧・耐震補強工事に注力" },
    { y: "2002", e: "平成14年",   t: "和田興産「ワコーレ」シリーズの施工開始" },
    { y: "2014", e: "平成26年",   t: "JIS Q 9001:2015（ISO 9001）認証取得" },
    { y: "2019", e: "令和元年",   t: "第19回 神戸景観・ポイント賞 受賞" },
    { y: "2025", e: "令和7年",    t: "健康経営優良法人2025／事業継続力強化計画 認定" },
  ];
  const certs = [
    "ISO 9001:2015",
    "兵庫県建設業協会会員",
    "神戸商工会議所会員",
    "兵庫県中小企業家同友会会員",
    "建設業災害防止協会兵庫県支部",
    "日本CLT技術研究所",
    "日本WOOD.ALC協会",
    "健康経営優良法人 2025",
    "事業継続力強化計画 認定",
    "神戸景観・ポイント賞",
  ];
  return (
    <section className="company sec-pad" id="company">
      <div className="sec-inner">
        <div className="sec-head reveal">
          <div className="sec-eye"><span className="num">05</span> COMPANY</div>
          <h2 className="sec-title">
            <small>CORPORATE PROFILE</small>
            会社概要と<br/>四十年の歩み。
          </h2>
        </div>
        <div className="profile-grid">
          <dl className="profile-table reveal">
            {rows.map(([jp, en, val], i) => (
              <div className="row" key={i}>
                <dt>{jp}<span className="en">{en}</span></dt>
                <dd>{val}</dd>
              </div>
            ))}
          </dl>
          <div className="reveal">
            <div className="history-block">
              <h3>沿革 <small>HISTORY</small></h3>
              <ul className="timeline">
                {history.map((h, i) => (
                  <li key={i}>
                    <span className="yr">{h.y}<small>{h.e}</small></span>
                    <span className="ev">{h.t}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="cert-row">
              {certs.map((c, i) => <span className="chip" key={i}>{c}</span>)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* -------- News -------- */
const News = () => {
  useReveal();
  const items = [
    { d: "2026.04.18", c: "press", cl: "プレスリリース",   t: "(仮称)灘区岩屋タワーレジデンス計画 着工のお知らせ" },
    { d: "2026.03.05", c: "info",  cl: "お知らせ",         t: "ゴールデンウィーク期間中の休業日について" },
    { d: "2026.02.14", c: "proj",  cl: "プロジェクト",     t: "ワコーレ ザ・神戸トアロード レジデンス 竣工" },
    { d: "2025.12.19", c: "blog",  cl: "ブログ",           t: "現場帰りの一杯 — 兵庫区のラーメン日記" },
    { d: "2025.11.10", c: "press", cl: "プレスリリース",   t: "健康経営優良法人2025 認定のご報告" },
    { d: "2025.09.02", c: "info",  cl: "お知らせ",         t: "新卒採用 2027年春入社 エントリー受付開始" },
  ];
  return (
    <section className="news sec-pad" id="news">
      <div className="sec-inner">
        <div className="sec-head reveal">
          <div className="sec-eye"><span className="num">06</span> NEWS</div>
          <h2 className="sec-title">
            <small>UPDATES & RELEASES</small>
            最新のお知らせ。
          </h2>
        </div>
        <div className="news-list reveal">
          {items.map((n, i) => (
            <a className="news-item" href="#" key={i}>
              <span className="news-date">{n.d}</span>
              <span className={`news-cat ${n.c === "press" ? "cat-press" : n.c === "proj" ? "cat-proj" : ""}`}>{n.cl}</span>
              <span className="news-title">{n.t}</span>
              <span className="news-arr">→</span>
            </a>
          ))}
        </div>
        <div className="proj-foot">
          <div className="note">※ ブログでは現場の日々や職人の素顔も発信しています。</div>
          <a href="#" className="btn-line">
            <span>ニュース一覧</span>
            <span className="arr en">ALL NEWS →</span>
          </a>
        </div>
      </div>
    </section>
  );
};

/* -------- Recruit -------- */
const Recruit = () => {
  useReveal();
  return (
    <section className="recruit sec-pad" id="recruit">
      <div className="sec-inner">
        <div className="recruit-grid">
          <div className="reveal">
            <div className="sec-eye"><span className="num">07</span> RECRUIT</div>
            <h2>
              神戸の街を、<br/>
              <span className="accent">一緒に</span>つくりませんか。
            </h2>
            <p>
              株式会社フナビキ工務店は、平均年齢38歳の地域密着型ゼネコン。新卒・中途を問わず、施工管理・建築技術職・事務職を募集しています。一人ひとりへの思いやりを大切にしながら、若手から早く活躍できる環境がここにあります。
            </p>
            <div className="recruit-cta">
              <a className="primary" href="#">
                <span>新卒採用</span>
                <span className="en">→ 2027 GRADS</span>
              </a>
              <a href="#">
                <span>中途採用</span>
                <span className="en">→ MID-CAREER</span>
              </a>
            </div>
          </div>
          <div className="recruit-photo reveal">
            <Photo kind="team" label="OUR TEAM / KOBE" />
            <div className="quote">
              <p className="q">
                「現場で、一人ひとりに役割と責任がある。だから、若くてもまかせてもらえる。」
              </p>
              <div className="who">
                INTERVIEW — 03
                <b>施工管理 / 入社4年目</b>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* -------- Contact -------- */
const Contact = () => {
  useReveal();
  const [submitted, setSubmitted] = React.useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 3000);
  };
  return (
    <section className="contact sec-pad" id="contact">
      <div className="sec-inner">
        <div className="sec-head reveal">
          <div className="sec-eye"><span className="num">08</span> CONTACT</div>
          <h2 className="sec-title">
            <small>GET IN TOUCH</small>
            お問い合わせ。
          </h2>
        </div>

        <div className="contact-grid">
          <div className="contact-info reveal">
            <div className="contact-tile">
              <div className="ico">☏</div>
              <div>
                <h4><small>TEL — WEEKDAYS 9:00-18:00</small>お電話で</h4>
                <div className="big">078-362-0675</div>
                <div className="desc">建設業許可・施工に関するご相談はお電話が確実です。</div>
              </div>
            </div>
            <div className="contact-tile">
              <div className="ico">📍</div>
              <div>
                <h4><small>HEAD OFFICE</small>本社所在地</h4>
                <div style={{fontSize: 14, marginTop: 6, lineHeight: 1.7}}>
                  〒652-0811<br/>
                  兵庫県神戸市兵庫区新開地4丁目1-12
                </div>
                <div className="desc">神戸高速線「新開地」駅 徒歩3分</div>
              </div>
            </div>
            <div className="contact-tile">
              <div className="ico en">✉</div>
              <div>
                <h4><small>EMAIL — REPLY WITHIN 2 BUSINESS DAYS</small>メールで</h4>
                <div style={{fontSize: 14, marginTop: 6, fontFamily: "var(--font-en)"}}>
                  info@funabikikohmuten.co.jp
                </div>
                <div className="desc">採用に関するお問い合わせは別窓口にて承ります。</div>
              </div>
            </div>
          </div>

          <form className="contact-form reveal" onSubmit={onSubmit}>
            <div className="frow-2">
              <div className="frow">
                <label>お名前 <span className="req">REQUIRED</span></label>
                <input type="text" placeholder="山田 太郎" required/>
              </div>
              <div className="frow">
                <label>会社名</label>
                <input type="text" placeholder="株式会社○○"/>
              </div>
            </div>
            <div className="frow-2">
              <div className="frow">
                <label>メールアドレス <span className="req">REQUIRED</span></label>
                <input type="email" placeholder="example@mail.com" required/>
              </div>
              <div className="frow">
                <label>電話番号</label>
                <input type="tel" placeholder="078-000-0000"/>
              </div>
            </div>
            <div className="frow">
              <label>お問い合わせ種別 <span className="req">REQUIRED</span></label>
              <select required>
                <option value="">選択してください</option>
                <option>新築工事のご相談</option>
                <option>大規模修繕・改修工事のご相談</option>
                <option>耐震補強工事のご相談</option>
                <option>取材・プレスのお問い合わせ</option>
                <option>採用に関するお問い合わせ</option>
                <option>その他</option>
              </select>
            </div>
            <div className="frow">
              <label>お問い合わせ内容 <span className="req">REQUIRED</span></label>
              <textarea rows="5" placeholder="ご相談内容をご記入ください。" required></textarea>
            </div>
            <button type="submit" className="submit">
              {submitted ? "✓ 送信を受け付けました" : (<>送信する <span className="en">SUBMIT →</span></>)}
            </button>
            <div className="privacy">
              ※ 送信いただいた個人情報は、お問い合わせへの回答以外の目的で利用することはありません。プライバシーポリシーに同意のうえお送りください。
            </div>
          </form>
        </div>
      </div>
    </section>
  );
};

/* -------- Footer -------- */
const Footer = () => (
  <footer className="footer">
    <div className="footer-inner">
      <div className="footer-mark">
        <div className="big">
          株式会社 フナビキ工務店
          <span className="en">FUNABIKI KOHMUTEN CO., LTD. — KOBE / SINCE 1981</span>
        </div>
        <div className="big-right">次の百年を、創る。</div>
      </div>
      <div className="footer-cols">
        <div className="footer-col">
          <h5>HEAD OFFICE</h5>
          <p><b>株式会社 フナビキ工務店</b></p>
          <p>〒652-0811<br/>兵庫県神戸市兵庫区新開地4丁目1-12</p>
          <p>TEL: 078-362-0675<br/>FAX: 078-362-0676</p>
        </div>
        <div className="footer-col">
          <h5>SITEMAP</h5>
          <ul>
            <li><a href="#about">私たちについて</a></li>
            <li><a href="#business">事業内容</a></li>
            <li><a href="#projects">施工実績</a></li>
            <li><a href="#message">代表メッセージ</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>INFO</h5>
          <ul>
            <li><a href="#company">会社概要</a></li>
            <li><a href="#news">ニュース</a></li>
            <li><a href="#recruit">採用情報</a></li>
            <li><a href="#contact">お問い合わせ</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>POLICY</h5>
          <ul>
            <li><a href="#">プライバシーポリシー</a></li>
            <li><a href="#">情報セキュリティ方針</a></li>
            <li><a href="#">サイトマップ</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bot">
        <span>© 2026 株式会社フナビキ工務店 ALL RIGHTS RESERVED.</span>
        <div className="sns">
          <a href="#">INSTAGRAM</a>
          <a href="#">FACEBOOK</a>
          <a href="#">BLOG</a>
        </div>
      </div>
    </div>
  </footer>
);

/* -------- Page Indicator -------- */
const PageIndicator = ({ active }) => {
  const dots = [
    { id: "top",      l: "TOP" },
    { id: "about",    l: "ABOUT" },
    { id: "business", l: "BUSINESS" },
    { id: "projects", l: "PROJECTS" },
    { id: "message",  l: "MESSAGE" },
    { id: "company",  l: "COMPANY" },
    { id: "news",     l: "NEWS" },
    { id: "recruit",  l: "RECRUIT" },
    { id: "contact",  l: "CONTACT" },
  ];
  return (
    <div className="page-indicator">
      {dots.map(d => (
        <a key={d.id} href={`#${d.id}`} className={active === d.id ? "active" : ""}>
          <span className="label">{d.l}</span>
          <span className="dot"></span>
        </a>
      ))}
    </div>
  );
};

window.Projects = Projects;
window.Message = Message;
window.Company = Company;
window.News = News;
window.Recruit = Recruit;
window.Contact = Contact;
window.Footer = Footer;
window.PageIndicator = PageIndicator;