// ============================================================
//  Sea Next Home — Section components
//  Brand: sky #4BA3D4 / deep #1B6FAD / ink #0E1B26
// ============================================================

const { useState, useEffect, useRef, useCallback } = React;
const I = window.Icon;

// ---------- shared header components (logo, brand) ----------
function Logo({ compact, footer }) {
  return (
    <a href="#top" className="logo" aria-label="Sea Next Home">
      <img
        src="images/logo.png"
        alt="Sea Next Home"
        style={{
          height: compact ? 44 : 56,
          width: "auto",
          filter: footer ? "brightness(0) invert(1)" : "none",
        }}
      />
      <span className="logo-text">
        <span className="en">Sea Next Home</span>
        <span className="jp">堺市の外壁塗装・リフォーム</span>
      </span>
    </a>
  );
}

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

  return (
    <header className="header" data-scrolled={scrolled}>
      <div className="header-inner">
        <Logo />
        <div className="header-right">
          {/* upper: CTA row */}
          <div className="header-cta">
            <a
              href="https://www.instagram.com/sea.next.home/"
              target="_blank"
              rel="noopener"
              className="btn btn-ig-icon"
              aria-label="Instagram"
            >
              <I.Instagram width="22" height="22" />
            </a>
            <a href="tel:09020199484" className="btn btn-tel">
              <I.Phone width="16" height="16" />
              <span className="tel-num">090-2019-9484</span>
            </a>
            <a href="https://docs.google.com/forms/d/e/1FAIpQLScWxDTGydrBWbuC1NGBq5R8y6BVQIXe5Xkw6ZFOHlBnKHM0-g/viewform" target="_blank" rel="noopener" className="btn btn-cta">
              <I.Mail width="15" height="15" />
              お問い合わせ
            </a>
          </div>

          {/* lower: nav */}
          <nav className="nav">
            <a href="#services" className="nav-link"><span className="en">Services</span><span className="jp">サービス一覧</span></a>
            <a href="#flow" className="nav-link"><span className="en">Flow</span><span className="jp">施工の流れ</span></a>
            <a href="#strengths" className="nav-link"><span className="en">Features</span><span className="jp">強み・特徴</span></a>
            <a href="#works" className="nav-link"><span className="en">Works</span><span className="jp">施工事例</span></a>
            <a href="#reviews" className="nav-link"><span className="en">Reviews</span><span className="jp">お客様の声</span></a>
            <a href="#company" className="nav-link"><span className="en">Company</span><span className="jp">会社概要</span></a>
          </nav>
        </div>

        <button className="menu-toggle" aria-label="メニュー" onClick={onMenuClick}>
          <I.Menu />
        </button>
      </div>
    </header>
  );
}

// ============================================================
//  MOBILE DRAWER
// ============================================================
function Drawer({ open, onClose }) {
  const items = [
    ["#services", "Services", "サービス一覧"],
    ["#flow", "Flow", "施工の流れ"],
    ["#strengths", "Features", "強み・特徴"],
    ["#works", "Works", "施工事例"],
    ["#reviews", "Reviews", "お客様の声"],
    ["#faq", "FAQ", "よくあるご質問"],
    ["#company", "Company", "会社概要"],
  ];
  return (
    <React.Fragment>
      <div className={"drawer-backdrop" + (open ? " is-open" : "")} />
      <aside className={"drawer" + (open ? " is-open" : "")}>
        <div className="drawer-head">
          <Logo compact />
          <button className="drawer-close" onClick={onClose} aria-label="閉じる" type="button">
            <I.Close width="22" height="22" />
          </button>
        </div>
        <nav className="drawer-nav">
          {items.map(([href, en, jp]) => (
            <a key={href} href={href} onClick={onClose}>
              <span className="en">{en}</span>
              {jp}
            </a>
          ))}
        </nav>
        <div className="drawer-cta">
          <a href="https://docs.google.com/forms/d/e/1FAIpQLScWxDTGydrBWbuC1NGBq5R8y6BVQIXe5Xkw6ZFOHlBnKHM0-g/viewform" target="_blank" rel="noopener" className="btn btn-cta" onClick={onClose}>
            <I.Mail width="15" height="15" />
            お問い合わせ
          </a>
          <a
            href="https://www.instagram.com/sea.next.home/"
            target="_blank"
            rel="noopener"
            className="btn btn-ig-wide"
          >
            <I.Instagram width="18" height="18" />
            <span>Instagramを見る</span>
          </a>
          <a href="tel:09020199484" className="btn btn-tel" style={{ justifyContent: "center" }}>
            <I.Phone width="15" height="15" />
            電話する（090-2019-9484）
          </a>
        </div>
      </aside>
    </React.Fragment>
  );
}

// ============================================================
//  HERO
// ============================================================
function Hero() {
  const slides = [
    "images/hero_01.jpg",
    "images/hero_02.jpg",
    "images/hero_03.jpg",
  ];
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % slides.length), 5200);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="hero" id="top">
      {slides.map((src, i) => (
        <div
          key={i}
          className={"hero-slide" + (i === idx ? " is-active" : "")}
          style={{ backgroundImage: `url(${src})` }}
        />
      ))}
      <div className="hero-copy">
        <div className="hero-eyebrow">Sakai · Exterior Painting & Renovation</div>
        <h1 className="hero-headline">
          <span className="accent">高品質・納得価格</span>で、お届けします。<br />
          堺市の外壁塗装・<wbr />リフォーム専門店。
        </h1>
        <p className="hero-sub">Sea Next Home｜シーネクストホーム</p>
      </div>
      <div className="hero-dots">
        {slides.map((_, i) => (
          <button
            key={i}
            className={"hero-dot" + (i === idx ? " is-active" : "")}
            onClick={() => setIdx(i)}
            aria-label={`slide ${i + 1}`}
          />
        ))}
      </div>
      <div className="hero-scroll">SCROLL</div>
    </section>
  );
}

// ============================================================
//  SERVICES
// ============================================================
const SERVICES = [
  { num: "01", icon: "Paint",    title: "外壁工事",    desc: "塗装工事・左官工事・サイディング・シーリング工事・足場組み立てまで一貫して対応します。" },
  { num: "02", icon: "Roof",     title: "屋根工事",    desc: "塗装工事・葺き替え工事・重ね葺き工事・板金工事・差し替え工事に対応します。" },
  { num: "03", icon: "Interior", title: "内装工事",    desc: "キッチン・洗面台・お風呂・トイレ・クロス・フローリング・ドア交換・ダイノックシート。" },
  { num: "04", icon: "Fence",    title: "外構・エクステリア工事", desc: "カーポート・テラス屋根・フェンス取り付け・土間工事・ドア新設・階段新設。" },
  { num: "05", icon: "Plug",     title: "電気工事",    desc: "エアコン取り付け・照明器具取り付け・配線移動などの電気工事に対応します。" },
  { num: "06", icon: "Wrench",   title: "リペア工事",  desc: "各種補修・修繕工事。気になる箇所が一つでもあれば、お気軽にご相談ください。" },
];

function Services() {
  return (
    <section id="services">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">Services</div>
          <h2 className="section-title">対応工事一覧</h2>
          <p className="section-lead">外壁・屋根から内装・外構・電気まで。住まいに関わるあらゆる工事を、信頼できる職人の輪でワンストップ対応します。</p>
        </div>

        <div className="services-grid">
          {SERVICES.map(s => {
            const Ico = I[s.icon];
            return (
              <article key={s.num} className="service-card">
                <div className="service-row">
                  <span className="service-num">{s.num}</span>
                  <span className="service-icon"><Ico width="28" height="28" /></span>
                </div>
                <h3 className="service-title">{s.title}</h3>
                <p className="service-desc">{s.desc}</p>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ============================================================
//  FLOW (7 steps + 17 detail steps)
// ============================================================
const FLOW = [
  { n: 1, icon: "Chat",      title: "無料ご相談",       desc: "お電話・フォーム・Instagramでお気軽にご連絡ください。" },
  { n: 2, icon: "Search",    title: "現地調査・お見積もり", desc: "現地を拝見し、無料でお見積もりをご提出します。" },
  { n: 3, icon: "Clipboard", title: "ご提案",           desc: "最適な工法・色・仕様をご提案します。" },
  { n: 4, icon: "Pen",       title: "ご契約・色決め",   desc: "納得いただいてからご契約。色は実際に試し塗りして確認。" },
  { n: 5, icon: "Home",      title: "着工前準備",       desc: "ご近所への挨拶まわり・足場の組み立てを行います。" },
  { n: 6, icon: "Brush",     title: "工事（施工）",     desc: "高圧洗浄→下地調整→中塗り→上塗りの順で丁寧に仕上げます。" },
  { n: 7, icon: "Sparkle",   title: "完成・お引き渡し", desc: "最終確認後、満足いただけた状態でお引き渡しします。" },
];

const FLOW_DETAIL = [
  "実測・状態のチェック", "ご提案", "ご契約", "色決め・打ち合わせ",
  "近隣様挨拶回り", "付帯脱着・足場組み立て", "シーリング工事・補修工事",
  "高圧洗浄", "ビニール養生", "下地調整", "中塗り", "上塗り",
  "養生ばらし", "付帯塗装（樋・雨戸・水切り等）", "タッチアップ・確認",
  "足場解体", "最終挨拶",
];

function Flow() {
  const [detailOpen, setDetailOpen] = useState(false);
  const detailRef = useRef(null);

  const handleToggle = () => {
    if (detailOpen) {
      setDetailOpen(false);
    } else {
      setDetailOpen(true);
      // scroll to detail panel after it opens
      setTimeout(() => {
        detailRef.current?.scrollIntoView?.({ behavior: "smooth", block: "start" });
      }, 80);
    }
  };

  return (
    <section id="flow" className="flow-bg">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">Flow</div>
          <h2 className="section-title">施工の流れ</h2>
          <p className="section-lead">ご相談から完成・お引き渡しまで、7つのステップで進めます。各工程の進捗は写真付きでLINEでもご報告します。</p>
        </div>

        <div className="flow-grid">
          {FLOW.map(f => {
            const Ico = I[f.icon];
            return (
              <article key={f.n} className="flow-card">
                <div className="flow-step"><span>STEP</span><span className="num">0{f.n}</span></div>
                <div className="flow-icon"><Ico /></div>
                <h3 className="flow-title">{f.title}</h3>
                <p className="flow-desc">{f.desc}</p>
              </article>
            );
          })}
        </div>

        <div className="flow-divider">
          <span className="line" />
          <span className="label">Detailed Process</span>
          <span className="line" />
        </div>

        <div className="flow-detail-link-wrap">
          <button
            type="button"
            className={"flow-detail-link" + (detailOpen ? " is-open" : "")}
            onClick={handleToggle}
            aria-expanded={detailOpen}
            aria-controls="flow-detail"
          >
            {detailOpen ? "詳細を閉じる" : "外壁塗装工事の流れを詳しく見る"}
            <span className="flow-detail-chev">
              {detailOpen ? <I.Close width="18" height="18" /> : <I.ArrowRight width="18" height="18" />}
            </span>
          </button>
        </div>
      </div>

      {/* 17-step detail (collapsible) */}
      {detailOpen && (
        <div id="flow-detail" ref={detailRef} style={{ marginTop: 80 }}>
          <div className="container">
            <div className="flow-detail-wrap">
              <div className="flow-detail-head">
                <span className="eng">Painting · Detailed 17 Steps</span>
                <h3>外壁塗装工事の詳細な流れ</h3>
              </div>
              <ol className="flow-detail-list">
                {FLOW_DETAIL.map((t, i) => <li key={i}>{t}</li>)}
              </ol>
              <div className="flow-period">※工事期間は約10〜15日です（天候・建物の状態によって前後します）</div>
              <div className="flow-detail-close-wrap">
                <button
                  type="button"
                  className="flow-detail-close"
                  onClick={() => {
                    setDetailOpen(false);
                    // scroll back up to the toggle button so user keeps context
                    setTimeout(() => {
                      document.querySelector(".flow-detail-link-wrap")?.scrollIntoView?.({ behavior: "smooth", block: "center" });
                    }, 60);
                  }}
                >
                  <I.Close width="18" height="18" />
                  詳細を閉じる
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

// ============================================================
//  STRENGTHS
// ============================================================
const STRENGTHS = [
  { num: "01", icon: "Tools",   title: "自社職人",
    body: "塗装の自社職人が在籍しています。いつも助けられています。確かな技術で丁寧に仕上げます。" },
  { num: "02", icon: "Shield",  title: "高品質・納得価格",
    body: "仲介手数料なしの自社施工だから、良いものを安くご提供できます。丁寧な仕上がりと納得の価格で、多くのお客様にご満足いただいています。" },
  { num: "03", icon: "Network", title: "信頼できる職人の輪",
    body: "ずっと付き合いしてきている、信頼できる職人さんたちです。足場・塗装・左官・屋根・内装・電気など、何でも対応できます。" },
  { num: "04", icon: "Heart",   title: "笑顔と感謝の心",
    body: "出来る限りのサービスをお客様へ提供します。笑顔になっていただける事が何より嬉しいです。大好きな言葉は「ありがとう」。すべての事に感謝しながら仕事をしています。" },
];

function Strengths() {
  return (
    <section id="strengths">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">Features</div>
          <h2 className="section-title">私たちの強み・特徴</h2>
          <p className="section-lead">技術と価格、そして人。Sea Next Homeが大切にしている4つのこと。</p>
        </div>
        <div className="strengths-grid">
          {STRENGTHS.map(s => {
            const Ico = I[s.icon];
            return (
              <article key={s.num} className="strength-card" data-num={s.num}>
                <div className="strength-icon"><Ico /></div>
                <div>
                  <h3 className="strength-title">{s.title}</h3>
                  <p className="strength-body">{s.body}</p>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ============================================================
//  BEFORE / AFTER
// ============================================================
const BA_CASES = [
  { id: 1, label: "堺市西区 K様邸", tag: "外壁塗装" },
  { id: 2, label: "堺市西区 N様邸", tag: "外壁塗装" },
  { id: 3, label: "堺市西区 M様邸", tag: "外壁塗装" },
  { id: 4, label: "堺市西区 T様邸", tag: "外壁塗装" },
  { id: 5, label: "堺市美原区 M様邸", tag: "外壁・屋根塗装" },
  { id: 6, label: "堺市 施工事例", tag: "外壁塗装" },
];

function BeforeAfter() {
  return (
    <section id="works">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">Works</div>
          <h2 className="section-title">ビフォーアフター</h2>
          <p className="section-lead">実際の施工写真で、仕上がりのクオリティをご覧ください。すべて自社施工の事例です。</p>
        </div>
        <div className="ba-grid">
          {BA_CASES.map(c => {
            const n = String(c.id).padStart(2, "0");
            return (
              <article key={c.id} className="ba-card">
                <div className="ba-pair">
                  <div className="ba-photo before">
                    <img src={`images/before_after_${n}_before.jpg`} alt={`${c.label} before`} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                    <span className="ba-label">BEFORE</span>
                  </div>
                  <div className="ba-photo after">
                    <img src={`images/before_after_${n}_after.jpg`} alt={`${c.label} after`} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                    <span className="ba-label">AFTER</span>
                  </div>
                  <div className="ba-arrow">
                    <I.ArrowRight width="18" height="18" />
                  </div>
                </div>
                <div className="ba-caption">
                  <strong>{c.label}</strong>
                  <span className="tag">{c.tag}</span>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ============================================================
//  REVIEWS
// ============================================================
const REVIEWS = [
  {
    initial: "H",
    type: "外壁塗装",
    quote: "家族でワクワクさせていただきました。",
    body: "外壁塗装業者をちょうど探していた時期に、ご近所の家の外壁塗装が始まり、ご挨拶に来られた事をきっかけに、見積りを取らせていただきました。こちらの質問に丁寧に応えてくださり、営業さんを挟まず直接、現場の職人さんであり社長さんである海堀さんと細かいことまでお話が出来たことは、とても信頼できました。どの職人さんもとても好感のもてる方ばかりで、仕事も丁寧で、お願いして本当に良かったです。LINEで作業の進行具合を写真で報告してくださったりと、家族でワクワクさせていただきました。",
  },
  {
    initial: "Y",
    type: "外壁塗装・屋根塗装",
    quote: "諦めかけていたのですが、踏み切ることができました。",
    body: "正直、金額的に難しいかも…と思いながら見積もりをお願いしましたが、詳細な説明と納得できる価格を提示していただきました。築30年近い我が家、諦めかけていたのですが、初めての外壁塗装と屋根塗装に踏み切ることができました。色選びの試し塗り、毎日のLINEでの写真付き報告など、とても丁寧に進めていただき、本当に感謝しています。",
  },
  {
    initial: "A",
    type: "外壁塗装",
    quote: "大切な我が家が新築に生まれ変わりました！！",
    body: "近所の友達の紹介でお願いしました。社長さんはとても気さくで話しやすく、色決めまで丁寧でした。職人さんも良い方ばかりで、毎日気持ちの良い挨拶をしてくれました。作業進捗も画像付きで報告があり分かりやすかったです。なにより仕上がりがとても綺麗で、大切な我が家が新築に生まれ変わりました！！ありがとうございました😊",
  },
  {
    initial: "O",
    type: "外壁塗装",
    quote: "外壁は新築のように美しく気分上々です。",
    body: "親切丁寧です！我が家の家計の事情を親身に考えてくれて施工に踏み出せました。壁色は画像や試し塗りで決めやすくなりました。ご近所へ挨拶してくれて日々の作業状況を画像かLINEで報せてくれました。サービスで施工してくださったベランダは快適です。外壁は新築のように美しく気分上々です(*^-^)ﾉ",
  },
];

function Reviews() {
  return (
    <section id="reviews" className="review-bg">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">Reviews</div>
          <h2 className="section-title">お客様の声</h2>
          <p className="section-lead">実際にご依頼いただいたお客様から、Googleマップでいただいた口コミです。</p>
        </div>
        <div className="review-grid">
          {REVIEWS.map((r, i) => (
            <article key={i} className="review-card">
              <p className="review-quote">「{r.quote}」</p>
              <div className="review-meta">
                <div className="review-avatar">{r.initial}</div>
                <div className="review-who">
                  <div className="name">{r.initial} さん</div>
                  <div className="type">{r.type}</div>
                </div>
                <div className="review-stars">★★★★★</div>
              </div>
              <p className="review-body">{r.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
//  INSTAGRAM CAROUSEL
// ============================================================
function InstagramGallery() {
  const photos = [1, 2, 3, 4, 5, 6, 7].map(n => `images/instagram_grid_0${n}.jpg`);
  // duplicate for seamless loop
  const looped = [...photos, ...photos];

  return (
    <section id="instagram" className="ig-section">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">Instagram</div>
          <h2 className="section-title">最新の施工事例</h2>
          <p className="section-lead">@sea.next.home｜現場の様子・完成写真をInstagramで日々発信しています。</p>
        </div>
      </div>

      <div className="ig-track-wrap">
        <div className="ig-track">
          {looped.map((src, i) => (
            <div key={i} className="ig-card">
              <img src={src} alt="施工写真" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
          ))}
        </div>
      </div>

      <div className="container">
        <div className="ig-cta-block">
          <div className="ig-cta-icon"><I.Instagram width="28" height="28" /></div>
          <div className="ig-cta-label">Instagram</div>
          <p className="ig-cta-text">最新情報はインスタグラムで発信しています</p>
          <a
            href="https://www.instagram.com/sea.next.home/"
            target="_blank"
            rel="noopener"
            className="ig-cta-btn"
          >
            公式インスタグラムを見る
            <I.External width="16" height="16" />
          </a>
        </div>
      </div>
    </section>
  );
}

// ============================================================
//  FAQ
// ============================================================
const FAQS = [
  { q: "見積もりは無料ですか？",
    a: "はい、現地調査・お見積もりは完全無料です。見積もりだけで断っていただいても構いませんので、お気軽にご連絡ください。" },
  { q: "工事中、ずっと家にいないといけませんか？",
    a: "いいえ、ご不在でも工事は進められます。ご安心してお出かけください。" },
  { q: "工事期間はどれくらいかかりますか？",
    a: "外壁塗装の場合、約10〜15日が目安です。天候や建物の状態によって前後することがあります。" },
  { q: "雨の日はどうなりますか？",
    a: "雨天時は工事を中止します。その分工期が延びる場合がありますが、品質を最優先にしております。" },
  { q: "支払い方法を教えてください。",
    a: "現金・クレジットカード・電子マネーに対応しています。分割払いもご相談ください。" },
  { q: "対応エリアはどこですか？",
    a: "堺市を中心に、大阪府全域に対応しています。まずはお気軽にご相談ください。" },
];

function Faq() {
  // Use a Set so users can keep multiple items open simultaneously.
  // Each item is toggled independently — opening or closing one never
  // affects the others; only the item's own button closes it.
  const [openSet, setOpenSet] = useState(() => new Set([0]));
  const toggle = (i) => {
    setOpenSet(prev => {
      const next = new Set(prev);
      if (next.has(i)) next.delete(i);
      else next.add(i);
      return next;
    });
  };
  return (
    <section id="faq" className="faq-bg">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">FAQ</div>
          <h2 className="section-title">よくあるご質問</h2>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => {
            const isOpen = openSet.has(i);
            return (
              <div key={i} className={"faq-item" + (isOpen ? " is-open" : "")}>
                <button className="faq-q" onClick={() => toggle(i)} aria-expanded={isOpen} type="button">
                  <span className="qmark">Q</span>
                  <span className="qtext">{f.q}</span>
                  <span className="chev"><I.Chevron width="16" height="16" /></span>
                </button>
                <div className="faq-a">
                  <div className="faq-a-inner">
                    <span className="amark">A</span>
                    <p>{f.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ============================================================
//  MESSAGE FROM REPRESENTATIVE
// ============================================================
function Message() {
  return (
    <section id="message">
      <div className="container">
        <div className="message-grid">
          <div className="message-portrait-wrap">
            <div className="message-portrait">
              <img src="images/daihyo_photo.jpg" alt="代表 海堀 達也" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <div className="message-portrait-tag">
              <span className="role">Representative</span>
              <span className="name">海堀 達也</span>
            </div>
          </div>
          <div>
            <div className="message-eyebrow">Message</div>
            <h2 className="message-title">「ありがとう」を、<br />すべての仕事の真ん中に。</h2>
            <div className="message-body">
              <p>会社員を経て独立し、リフォーム業界14年目を迎えました。お客様の声をしっかり聞いていきたい、その思いでこの会社を作りました。自社施工だからこそ、安心価格と丁寧な仕上がりをお届けできます。</p>
              <p>大好きな言葉は『ありがとう』です。信頼できる職人さんとともに、すべてのことに感謝しながら、良いものを安くで提供できるよう心がけています。</p>
              <p>何でもお気軽にご相談ください。</p>
            </div>
            <div className="message-sign">
              <span>代表</span>
              <span className="name">Tatsuya Kaibori</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
//  COMPANY
// ============================================================
function Company() {
  const rows = [
    ["会社名", "Sea Next Home（シーネクストホーム）"],
    ["代表", "海堀 達也"],
    ["設立", "2020年4月"],
    ["住所", "〒591-8024　大阪府堺市北区黒土町2229-1-III-102"],
    ["電話", "090-2019-9484"],
    ["メール", "sea.next.home@gmail.com"],
    ["対応エリア", "大阪府全域（堺市を中心に）"],
  ];
  return (
    <section id="company" className="company-bg">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">Company</div>
          <h2 className="section-title">会社概要</h2>
        </div>
        <dl className="company-table">
          {rows.map(([k, v]) => (
            <div key={k} className="company-row">
              <dt>{k}</dt>
              <dd>{v}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}

// ============================================================
//  CONTACT
// ============================================================
function Contact() {
  return (
    <section id="contact" className="contact-section">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">Contact</div>
          <h2 className="section-title">お問い合わせ</h2>
          <p className="section-lead">お見積もり・ご相談は無料です。お電話・フォーム・Instagramからお気軽にどうぞ。</p>
        </div>

        <div className="contact-channels-center">
          <a href="tel:09020199484" className="contact-channel">
            <span className="ic"><I.Phone /></span>
            <div>
              <div className="lbl">Tel</div>
              <div className="val">090-2019-9484</div>
              <div className="sub">受付：9:00 〜 19:00（不定休）</div>
            </div>
          </a>
          <a
            href="https://docs.google.com/forms/d/e/1FAIpQLScWxDTGydrBWbuC1NGBq5R8y6BVQIXe5Xkw6ZFOHlBnKHM0-g/viewform"
            target="_blank"
            rel="noopener"
            className="contact-channel"
          >
            <span className="ic"><I.Mail /></span>
            <div>
              <div className="lbl">Form</div>
              <div className="val" style={{ fontSize: 20 }}>お問い合わせフォーム</div>
              <div className="sub">24時間受付・内容確認次第、折り返しご連絡いたします</div>
            </div>
          </a>
          <a
            href="https://www.instagram.com/sea.next.home/"
            target="_blank"
            rel="noopener"
            className="contact-channel ig"
          >
            <span className="ic"><I.Instagram /></span>
            <div>
              <div className="lbl">Instagram</div>
              <div className="val" style={{ fontSize: 18 }}>@sea.next.home</div>
              <div className="sub">DMでもお気軽にご相談ください</div>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

// ============================================================
//  FOOTER
// ============================================================
function Footer() {
  return (
    <footer className="footer">
      <div className="container-wide">
        <div className="footer-grid">
          <div className="footer-brand">
            <Logo footer />
            <p>大阪府堺市を中心に、外壁塗装・屋根工事・内装・外構・電気工事まで幅広く対応。信頼できる職人の輪で、住まいの「困った」をワンストップで解決します。</p>
          </div>
          <div className="footer-col">
            <h4>Sitemap</h4>
            <ul>
              <li><a href="#services">サービス一覧</a></li>
              <li><a href="#flow">施工の流れ</a></li>
              <li><a href="#strengths">強み・特徴</a></li>
              <li><a href="#works">施工事例</a></li>
              <li><a href="#reviews">お客様の声</a></li>
              <li><a href="#faq">よくあるご質問</a></li>
              <li><a href="#company">会社概要</a></li>
              <li><a href="#contact">お問い合わせ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <ul>
              <li>〒591-8024<br />大阪府堺市北区<br />黒土町2229-1-III-102</li>
              <li><a href="tel:09020199484">TEL：090-2019-9484</a></li>
              <li><a href="mailto:sea.next.home@gmail.com">sea.next.home@gmail.com</a></li>
            </ul>
            <div className="footer-socials" style={{ marginTop: 14 }}>
              <a href="https://www.instagram.com/sea.next.home/" target="_blank" rel="noopener" aria-label="Instagram">
                <I.Instagram width="16" height="16" />
              </a>
              <a href="tel:09020199484" aria-label="電話">
                <I.Phone width="16" height="16" />
              </a>
              <a href="https://docs.google.com/forms/d/e/1FAIpQLScWxDTGydrBWbuC1NGBq5R8y6BVQIXe5Xkw6ZFOHlBnKHM0-g/viewform" target="_blank" rel="noopener" aria-label="お問い合わせフォーム">
                <I.Mail width="16" height="16" />
              </a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>Copyright © 2026 Sea Next Home. All Rights Reserved.</span>
          <span className="footer-bottom-links">
            <a href="privacy.html" className="footer-privacy-link">プライバシーポリシー</a>
            <span className="footer-region">SAKAI · OSAKA · JAPAN</span>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Header, Drawer, Hero, Services, Flow, Strengths, BeforeAfter,
  Reviews, InstagramGallery, Faq, Message, Company, Contact, Footer,
});