// components.jsx — 稲垣建設 LP（原サイト準拠レイアウト）
// Loaded after React, Babel, and logos.jsx.

const { useState, useEffect } = React;

// ─────────────────────────────────────────────────────────────────────────────
// Section header — 原サイト準拠の「ABOUT稲垣建設について」インライン式
// ─────────────────────────────────────────────────────────────────────────────

function SectionHead({ en, jp, sub }) {
  return (
    <div className="sec-head">
      <h2 className="sec-head__h">
        <span className="sec-head__en">{en}</span>
        <span className="sec-head__jp">{jp}</span>
      </h2>
      {sub && <p className="sec-head__sub">{sub}</p>}
      <span className="sec-head__rule" aria-hidden="true" />
    </div>);

}

function SubHead({ en, jp }) {
  return (
    <h3 className="sub-head">
      <span className="sub-head__en">{en}</span>
      <span className="sub-head__jp">{jp}</span>
    </h3>);

}

// Photo placeholder
function PhotoPlaceholder({ caption, aspect = "4/3", round = "var(--radius-md)", tone = "navy" }) {
  const palettes = {
    navy: { bg: "#172A4A", stripe: "rgba(255,255,255,0.045)", fg: "rgba(255,255,255,0.62)" },
    cream: { bg: "var(--brand-surface-2)", stripe: "rgba(14,34,64,0.06)", fg: "rgba(14,34,64,0.55)" },
    accent: { bg: "var(--brand-accent)", stripe: "rgba(255,255,255,0.10)", fg: "rgba(255,255,255,0.82)" }
  };
  const p = palettes[tone] || palettes.navy;
  return (
    <div
      className="photo-ph"
      style={{
        aspectRatio: aspect,
        background: p.bg,
        borderRadius: round,
        backgroundImage: `repeating-linear-gradient(135deg, ${p.stripe} 0 1px, transparent 1px 14px)`,
        color: p.fg
      }}>
      
      <span className="photo-ph__pin" />
      <span className="photo-ph__cap">{caption}</span>
    </div>);

}

// Real photo (fills placeholder aspect box)
function Photo({ src, alt = "", aspect = "4/3", round = "var(--radius-md)" }) {
  return (
    <div className="photo-real" style={{ aspectRatio: aspect, borderRadius: round }}>
      <img src={src} alt={alt} />
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Header / Nav — 原サイトと同じ並び順（HOME / BUSINESS / RECRUIT / COMPANY）
// ─────────────────────────────────────────────────────────────────────────────

function Header({ activeSection }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const items = [
  { id: "top", en: "HOME", jp: "ホーム" },
  { id: "business", en: "BUSINESS", jp: "事業内容" },
  { id: "recruit", en: "RECRUIT", jp: "採用情報" },
  { id: "company", en: "COMPANY", jp: "会社案内" }];


  return (
    <header className={"site-header" + (scrolled ? " is-scrolled" : "")}>
      <div className="site-header__inner">
        <a href="#top" className="site-header__brand" aria-label="稲垣建設 ホーム">
          <Logo size={34} />
        </a>
        <nav className="site-nav" aria-label="主要メニュー">
          {items.map((it) =>
          <a key={it.id} href={`#${it.id}`} className={"site-nav__a" + (activeSection === it.id ? " is-active" : "")}>
              <span className="site-nav__en">{it.en}</span>
              <span className="site-nav__jp">{it.jp}</span>
            </a>
          )}
        </nav>
        <a href="tel:0455305491" className="site-header__cta">
          <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true">
            <path d="M3 2h3l2 4-2 1c1 2 3 4 5 5l1-2 4 2v3c0 .6-.4 1-1 1A12 12 0 0 1 2 3c0-.6.4-1 1-1z"
            fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
          </svg>
          <span className="site-header__cta-num">045-530-5491</span>
          <span className="site-header__cta-hours">受付 平日 9:00–18:00</span>
        </a>
      </div>
    </header>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Hero — 大きな施工写真 + 中央にロゴ + タグライン
// ─────────────────────────────────────────────────────────────────────────────

function Hero() {
  return (
    <section id="top" className="hero" data-screen-label="01 Hero">
      <div className="hero__bg">
        <img className="hero__bg-img" src="assets/photo-05.jpg" alt="施工現場" />
        <div className="hero__veil" aria-hidden="true"></div>
      </div>

      <div className="hero__center">
        <div className="hero__logo">
          <Logo size={170} />
        </div>
        <p className="hero__tagline">
          確かな施工を、丁寧に。<br />
          <span>横浜の街を、足元から支える。</span>
        </p>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// About
// ─────────────────────────────────────────────────────────────────────────────

function About() {
  return (
    <section id="about" className="section about" data-screen-label="02 About">
      <div className="container">
        <SectionHead en="ABOUT" jp="稲垣建設について" />

        <div className="about__grid">
          <div className="about__copy prose">
            <p>
              稲垣建設は、2007 年の創業より 10 年以上にわたり、建築土木工事、仮設工事を中心に、
              お客様の信頼に応え、多くの施工実績を重ねております。
            </p>
            <p>工事の安全性と作業効率を高める足場工事など、安全第一の施工をいたします。



            </p>
          </div>
          <div className="about__visual">
            <Photo src="assets/photo-01.jpg" alt="施工現場" aspect="4/3" />
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Business — 4 業務を縦に並べる（各 3 枚の写真グリッド）
// ─────────────────────────────────────────────────────────────────────────────

const BUSINESS_ITEMS = [
{
  en: "01 / Civil Engineering",
  jp: "建築土木工事",
  body:
  "一般戸建住宅から RC の集合住宅等の土木工事を行っております。" +
  "機能性と快適性を兼ねそなえた外構工事など、末永く住まいの安全と美観を保つ、確かな施工技術を提供いたします。",
  photos: [
  "assets/photo-16.jpg",
  "assets/photo-15.jpg",
  "assets/photo-07.jpg"]

},
{
  en: "02 / Scaffolding",
  jp: "仮設工事",
  body:
  "建築物の解体、改修、新築にともなう足場工事、仮設事務所のリース等を行っております。" +
  "資材運搬、足場組立、解体、撤去と安全管理を徹底し、スピーディーかつ確実な施工で、" +
  "建築工事の安全と品質をサポートします。",
  photos: [
  "assets/photo-02.jpg",
  "assets/photo-04.jpg",
  "assets/photo-17.jpg"]

},
{
  en: "03 / Hauling",
  jp: "資材運搬",
  body:
  "ダンプ／ユニック車を使用して主に建築における仮設資材や残土の運搬をしております。" +
  "他にも三保町に所有している資材センターではダンプの手配や残土の受け入れも行っています。",
  photos: [
  "assets/photo-09.jpg",
  "assets/photo-12.jpg",
  "assets/photo-14.jpg"]

},
{
  en: "04 / Renovation & Other",
  jp: "その他",
  body:
  "上記以外にもマンション全体の改修工事やリフォームなど、お客様のご要望に合わせて対応可能です。" +
  "まずはお気軽に稲垣建設へお問い合わせください。",
  photos: [
  "assets/photo-18.jpg",
  "assets/photo-10.jpg",
  "assets/photo-11.jpg"]

}];


function Business() {
  return (
    <section id="business" className="section section--cream business" data-screen-label="03 Business">
      <div className="container">
        <SectionHead en="BUSINESS" jp="業務内容" />

        <div className="biz-list">
          {BUSINESS_ITEMS.map((b) =>
          <article key={b.jp} className="biz-item">
              <header className="biz-item__h">
                <span className="biz-item__en">{b.en}</span>
                <h3 className="biz-item__jp">{b.jp}</h3>
              </header>
              <p className="biz-item__body">{b.body}</p>
              <div className="biz-item__photos">
                {b.photos.map((p, i) =>
              <Photo key={i} src={p} aspect="4/3" />
              )}
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Recruit
// ─────────────────────────────────────────────────────────────────────────────

const RECRUIT_TRAITS = [
"未経験者、大歓迎！",
"資格支援制度あり",
"初めてでも安心のサポート力",
"20〜40 代のスタッフが活躍中！",
"社員同士が仲良く、明るいアットホームな職場です"];


const RECRUIT_JOBS = [
{
  role: "大型車両ドライバー",
  en: "DRIVER",
  desc:
  "ダンプ／ユニック車を使用して、資材の運搬業務や工事で発生する残土の運搬を行います。" +
  "配送エリアは神奈川・東京エリアに限られ長距離運転はありません！" +
  "基本的に片道 1.5 時間以内のエリアです。未経験の方、大歓迎です！"
},
{
  role: "現場職人",
  en: "FIELD WORKER",
  desc:
  "住宅の土木工事や外構工事などを行う現場スタッフです。" +
  "未経験の方、大歓迎！アットホームな雰囲気の先輩たちが丁寧に教えます。"
}];


const RECRUIT_TABLES = [
{
  role: "大型・トラックドライバー",
  rows: [
  ["主な仕事内容", "大型・トラックドライバー、残土や仮設資材の運搬、資材搬入"],
  ["採用区分", "正社員"],
  ["給与", "日給 12,000 円〜"],
  ["勤務時間帯", "9:00 〜 18:00"],
  ["勤務地", "主に東京、神奈川"],
  ["休日休暇", "日曜日"],
  ["待遇・福利厚生", "日払い／週払い相談可、直行直帰 OK、残業代支給、社会保険完備"],
  ["経験・資格", "大型免許保有者／中型免許保有者／移動式クレーン資格保有者優遇／玉掛け資格保有者優遇／未経験者 OK（大歓迎！）／外国人国籍の方も大歓迎！／年齢・学歴不問！"]]

},
{
  role: "現場職人",
  rows: [
  ["主な仕事内容", "建築土木工事、仮設工事スタッフ"],
  ["採用区分", "正社員"],
  ["給与", "未経験 日給 11,000 円〜／経験者 日給 13,000 円〜"],
  ["勤務時間帯", "8:00 〜 17:00"],
  ["勤務地", "主に東京、神奈川"],
  ["休日休暇", "日曜日"],
  ["待遇・福利厚生", "日払い／週払い相談可、直行直帰 OK、残業代支給、夜勤手当あり、社会保険完備"],
  ["経験・資格", "未経験者 OK（大歓迎！）／外国人国籍の方も大歓迎！／年齢・学歴不問！／有資格者優遇！"]]

}];


function Recruit() {
  return (
    <section id="recruit" className="section recruit" data-screen-label="04 Recruit">
      <div className="container">
        <SectionHead en="RECRUIT" jp="採用情報" />

        <div className="recruit__block">
          <SubHead en="" jp="稲垣建設はこんな会社" />
          <ul className="traits">
            {RECRUIT_TRAITS.map((t, i) =>
            <li key={i} className="traits__item">
                <span className="traits__n">0{i + 1}</span>
                <span className="traits__t">{t}</span>
              </li>
            )}
          </ul>
        </div>

        <div className="recruit__block">
          <SubHead en="OCCUPATIONS" jp="募集職種" />
          <div className="jobs">
            {RECRUIT_JOBS.map((j) =>
            <article key={j.role} className="job">
                <span className="job__en">{j.en}</span>
                <h4 className="job__role">{j.role}</h4>
                <p className="job__desc">{j.desc}</p>
              </article>
            )}
          </div>
        </div>

        <div className="recruit__block">
          <SubHead en="REQUIREMENTS" jp="募集要項" />
          <div className="req-tables">
            {RECRUIT_TABLES.map((t) =>
            <div key={t.role} className="req-table">
                <div className="req-table__role">{t.role}</div>
                <table>
                  <tbody>
                    {t.rows.map(([k, v]) =>
                  <tr key={k}><th>{k}</th><td>{v}</td></tr>
                  )}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>

        <div className="recruit__block">
          <SubHead en="FLOW" jp="採用フロー" />
          <ol className="flow">
            <li className="flow__step">
              <span className="flow__n">01</span>
              <span className="flow__t">お問い合わせ</span>
              <span className="flow__d">まずはお電話より、お気軽にご連絡ください。</span>
            </li>
            <li className="flow__step">
              <span className="flow__n">02</span>
              <span className="flow__t">面接</span>
              <span className="flow__d">面接時に履歴書をお持ちいただきます。</span>
            </li>
            <li className="flow__step">
              <span className="flow__n">03</span>
              <span className="flow__t">入社</span>
              <span className="flow__d">試用期間 3 ヶ月。</span>
            </li>
          </ol>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Company
// ─────────────────────────────────────────────────────────────────────────────

function Company() {
  return (
    <section id="company" className="section section--cream company" data-screen-label="05 Company">
      <div className="container">
        <SectionHead en="COMPANY" jp="会社案内" />

        <div className="recruit__block">
          <SubHead en="MESSAGE" jp="ご挨拶" />
          <div className="message message--no-photo">
            <div className="message__body prose">
              <p>
                稲垣建設株式会社は、東京・神奈川を中心に、住宅の土木工事・仮設工事はじめ
                資材運搬・改修工事まで、幅広い建築業務を行っております。
              </p>
              <p>
                お客様のニーズに応え、常に安全・迅速・丁寧な施工で、
                多くのお取引様の信頼を築き、多くの実績を重ねてまいりました。
              </p>
              <p>
                稲垣建設は、技術の向上、設備の充実、人材の育成に努め、
                建物と建築工事を支える確かなサービスを提供してまいります。
              </p>
            </div>
          </div>
        </div>

        <div className="recruit__block">
          <SubHead en="OUTLINE" jp="会社概要" />
          <table className="outline-table">
            <tbody>
              <tr><th>社名</th><td>株式会社稲垣建設</td></tr>
              <tr><th>代表取締役</th><td>稲垣 智弘</td></tr>
              <tr><th>設立年月日</th><td>2007年10月31日</td></tr>
              <tr><th>資本金</th><td>1,000 万円</td></tr>
              <tr><th>従業員数</th><td>10 名</td></tr>
              <tr><th>所在地</th><td>〒226-0015 神奈川県横浜市緑区三保町１００２−１</td></tr>
              <tr><th>主要取引銀行</th><td>横浜銀行 たまプラーザ支店 ／ 横浜信用金庫 センター北支店</td></tr>
              <tr><th>TEL / FAX</th><td>045-530-5491 / 045-530-5492</td></tr>
              <tr><th>主要仕入先</th><td>塩田建設(株) 他</td></tr>
            </tbody>
          </table>
        </div>

        <div className="recruit__block">
          <SubHead en="ACCESS" jp="アクセス" />
          <div className="access-grid access-grid--single">
            <div className="access-card">
              <div className="access-card__label">株式会社稲垣建設</div>
              <div className="access-card__map">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3247.8188901238427!2d139.51741557578!3d35.50875627264339!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601857fb7c3dc741%3A0xb5964355cef4fff0!2z44CSMjI2LTAwMTUg56We5aWI5bed55yM5qiq5rWc5biC57eR5Yy65LiJ5L-d55S677yR77yQ77yQ77yS4oiS77yR!5e0!3m2!1sja!2sjp!4v1789526773179!5m2!1sja!2sjp" width="100%" height="100%" style={{ border: 0 }} allowFullScreen="" loading="lazy" referrerPolicy="strict-origin-when-cross-origin"></iframe>
              </div>
              <address className="access-card__addr">
                〒226-0015 神奈川県横浜市緑区三保町１００２−１<br />
                TEL 045-530-5491 / FAX 045-530-5492
              </address>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Logo system (3 patterns) — リニューアル提案セクション
// ─────────────────────────────────────────────────────────────────────────────

// ─────────────────────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────────────────────

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container site-footer__inner">
        <div className="site-footer__brand">
          <Logo size={52} variant="white" />
          <p className="site-footer__addr">
            〒226-0015 神奈川県横浜市緑区三保町１００２−１<br />
            TEL 045-530-5491 / FAX 045-530-5492
          </p>
        </div>
        <nav className="site-footer__nav">
          <a href="#top">ホーム</a>
          <a href="#business">業務内容</a>
          <a href="#recruit">採用情報</a>
          <a href="#company">会社案内</a>
          <a href="tel:0455305491">電話でのお問い合わせ</a>
        </nav>
        <div className="site-footer__legal">
          <span>© 2026 株式会社稲垣建設</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  Header, Hero, About, Business, Recruit, Company, Footer,
  PhotoPlaceholder, Photo, SectionHead, SubHead
});