/* ============ About stagger reveal ============ */
function useStaggerReveal(threshold = 0.12) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const container = ref.current;
    if (!container) return;
    // data-stagger が付いた子要素をすべて取得する
    const items = container.querySelectorAll('[data-stagger]');
    items.forEach((el, i) => {
      el.style.opacity = '0';
      el.style.transform = 'translateY(28px)';
      el.style.transition = `opacity 700ms cubic-bezier(.22,.68,0,1.1) ${i * 110}ms, transform 700ms cubic-bezier(.22,.68,0,1.1) ${i * 110}ms`;
    });
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          items.forEach(el => {
            el.style.opacity = '1';
            el.style.transform = 'none';
          });
          io.unobserve(container);
        }
      });
    }, { threshold });
    io.observe(container);
    return () => io.disconnect();
  }, []);
  return ref;
}

/* ============ About ============ */
function About() {
  const heroRef = useReveal(0.15);
  const valuesRef = useStaggerReveal(0.12);
  const statsRef = useStaggerReveal(0.18);
  const timelineRef = useReveal(0.1);

  const highlights = [
  {
    icon: <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4" width="26" height="26"><rect x="4" y="8" width="24" height="16" rx="1.5" /><path d="M4 13h24M10 8V6M22 8V6" /><path d="M9 18h4M19 18h4" /></svg>,
    title: "MIS・GIS・BIM・AI の 4 分野を統合"
  },
  {
    icon: <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4" width="26" height="26"><path d="M6 26V12l10-6 10 6v14" /><path d="M12 26v-7h8v7" /><rect x="13" y="8" width="6" height="4" rx="0.5" /></svg>,
    title: "行政機関の情報システム構築に長年従事"
  },
  {
    icon: <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4" width="26" height="26"><circle cx="11" cy="12" r="4" /><circle cx="21" cy="12" r="4" /><path d="M3 26c0-4.418 3.582-8 8-8M21 18c4.418 0 8 3.582 8 8" /><path d="M14 20c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2z" fill="none" /><path d="M11 20c0 3.314 2.239 6 5 6s5-2.686 5-6" /></svg>,
    title: "設計事務所・建設会社・民間企業を支援"
  },
  {
    icon: <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4" width="26" height="26"><path d="M8 4h12l6 6v18a2 2 0 01-2 2H8a2 2 0 01-2-2V6a2 2 0 012-2z" /><path d="M20 4v6h6" /><path d="M11 18l3 3 6-6" /></svg>,
    title: "行政・公共分野で 450 件を超える案件実績"
  }];


  const values = [
  {
    icon: <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.3" width="36" height="36"><circle cx="20" cy="20" r="14" /><circle cx="20" cy="20" r="7" /><line x1="20" y1="6" x2="20" y2="2" /><line x1="20" y1="34" x2="20" y2="38" /><line x1="6" y1="20" x2="2" y2="20" /><line x1="34" y1="20" x2="38" y2="20" /></svg>,
    title: "ライフサイクル全体の統合",
    desc: "設計・計画から施工管理、竣工図書、その後の維持管理・運用まで、各段階の情報と管理業務をつなぎます。工事のデータが案件の終了とともに途切れるのではなく、蓄積され、使い続けられる状態にします。"
  },
  {
    icon: <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.3" width="36" height="36"><path d="M20 4l14 6v10c0 8-6 14-14 16C12 34 6 28 6 20V10l14-6z" /><polyline points="13,20 18,25 28,15" /></svg>,
    title: "現場管理のデジタル化",
    desc: "作業員、設備、検査、日報、会議、作業項目、進捗といった現場業務を、標準化されたデジタルの流れに置き換えます。紙の作業、手作業での集計、情報の分散によって生じる管理上の齟齬や抜け漏れを減らします。"
  },
  {
    icon: <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.3" width="36" height="36"><circle cx="20" cy="16" r="7" /><path d="M14 23l-3 12 9-5 9 5-3-12" /><line x1="20" y1="9" x2="20" y2="6" /><line x1="26" y1="11" x2="28" y2="9" /><line x1="14" y1="11" x2="12" y2="9" /></svg>,
    title: "データの追跡性と、継続できる管理体制",
    desc: "工事の過程で生まれる書類、記録、履歴、対応の経緯をそのまま残します。データを検索でき、流れを追跡でき、責任の所在を明確にできる状態をつくり、継続的に運用できるデジタル管理基盤を段階的に構築します。"
  },
  {
    icon: <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.3" width="36" height="36"><path d="M6 28c4-4 8-6 14-6s10 2 14 6" /><circle cx="14" cy="16" r="5" /><circle cx="26" cy="16" r="5" /><path d="M19 16h2" /></svg>,
    title: "システム連携と長期的な協働",
    desc: "API を通じて既存の ERP、工務システム、設備管理システムと連携します。お客様の現状に合わせて段階的に導入し、ひとつのシステムですべてを置き換えるのではなく、拡張可能で継続運用できる、全体最適の管理基盤を一緒につくります。"
  }];


  const stats = [
  { icon: <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4" width="28" height="28"><rect x="4" y="6" width="24" height="22" rx="1.5" /><path d="M4 12h24M10 6V3M22 6V3" /></svg>, num: "1989", label: "創業年" },
  { icon: <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4" width="28" height="28"><rect x="5" y="4" width="22" height="26" rx="1.5" /><path d="M10 10h12M10 15h12M10 20h8" /></svg>, num: "450+", label: "官公庁・公共案件の実績" },
  { icon: <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4" width="28" height="28"><path d="M16 4l3.09 6.26L26 11.27l-5 4.87 1.18 6.86L16 20l-6.18 3.1L11 16.14 6 11.27l6.91-1.01L16 4z" /></svg>, num: "30+", label: "受賞・表彰" }];


  const timeline = [
  { era: "1989", code: "GIS", zh: "地理情報システム", desc: "台湾初期の地理空間データの基盤を整備し、行政の空間データベース構築に多数参画。" },
  { era: "2000's", code: "BIM", zh: "建築情報モデル", desc: "三次元モデリングを導入し、設計と施工の情報統合を推進。" },
  { era: "2020's", code: "AI", zh: "人工知能の活用", desc: "LLM とコンピュータビジョンで現場管理を強化し、建設業の AI 活用を切り拓く。" }];


  return (
    <section className="lx-about-wrap" id="about" style={{ scrollMarginTop: "120px" }}>

      {/* ── Part 1: Hero split ── */}
      <div className="lx-about-hero lx-reveal" ref={heroRef} style={{ minHeight: "548px" }}>
        <div className="lx-about-hero-bg">
          <img src="assets/about-building.webp" alt="ルクソールのオフィスビル" />
        </div>
        <div className="lx-about-hero-content">
          <span className="lx-section-eyebrow-line lx-about-stagger" style={{ transitionDelay: "0ms" }}>ABOUT LUXOR</span>
          <h2 className="lx-about-main-title lx-about-stagger" style={{ transitionDelay: "100ms" }}>会社概要</h2>
          <p className="lx-about-sub-title lx-about-stagger" style={{ transitionDelay: "180ms" }}>37 年にわたり培った技術で、公共・民間の双方を支える</p>
          <p className="lx-about-body-text lx-about-stagger" style={{ transitionDelay: "260ms" }}>
            1989 年以来、チームは 450 件を超える行政の情報システム案件に携わり、都市行政システム、空間情報、建築情報、デジタルガバナンスの実務経験を積み重ねてきました。
          </p>
          <p className="lx-about-body-text lx-about-stagger" style={{ transitionDelay: "320ms" }}>
            公共・民間それぞれのニーズに応じて、行政・公共分野の案件を手がける一方で、企業、設計事務所、建設会社をはじめとする民間分野のデジタル化にも取り組んでいます。培ってきた中核人材・技術力・プロジェクト経験を生かし、お客様に最適な形でサービスを提供します。
          </p>
          <div className="lx-about-highlights">
            {highlights.map((h, i) =>
            <div key={i} className="lx-about-highlight lx-about-stagger" style={{ transitionDelay: `${400 + i * 90}ms` }}>
                <span className="lx-about-highlight-icon">{h.icon}</span>
                <span style={{ fontSize: "16px" }}>{h.title}</span>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* ── Part 2: コアバリュー ── */}
      <div className="lx-about-values" ref={valuesRef}>
        <div className="lx-container">
          <p className="lx-about-values-label" data-stagger style={{ fontSize: "27px" }}>ルクソールの 4 つのコアバリュー</p>
          <div className="lx-about-values-grid">
            {values.map((v, i) =>
            <div key={i} className="lx-about-value-card" data-stagger>
                <span className="lx-about-value-icon">{v.icon}</span>
                <h4 className="lx-about-value-title">{v.title}</h4>
                <p className="lx-about-value-desc">{v.desc}</p>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* ── Part 3: Stats ── */}
      <div className="lx-about-stats-band" ref={statsRef}>
        <div className="lx-container">
          <div className="lx-about-stats-grid" style={{ minHeight: "276px" }}>
            {stats.map((s, i) =>
            <div key={i} className="lx-about-stat" data-stagger>
                <span className="lx-about-stat-icon">{s.icon}</span>
                <div className="lx-about-stat-num">{s.num}</div>
                <div className="lx-about-stat-label">{s.label}</div>
              </div>
            )}
            <div className="lx-about-stats-img" data-stagger>
              <img src="assets/about-city.webp" alt="" style={{ objectFit: "cover", width: "432px" }} />
            </div>
          </div>
        </div>
      </div>

      {/* ── Part 4: GIS → BIM → AI Timeline ── */}
      <div className="lx-about-timeline lx-reveal" ref={timelineRef} style={{ minHeight: "737px" }}>
        <div className="lx-about-timeline-bg">
          <img src="assets/about-gis-bim-ai.webp" alt="GIS BIM AI" />
        </div>
        <div className="lx-about-timeline-content">
          <h2 className="lx-about-timeline-title lx-about-stagger" style={{ transitionDelay: "0ms" }}>37 年、&ensp;デジタルを生業として</h2>
          <p className="lx-about-timeline-desc lx-about-stagger" style={{ maxWidth: "700px", transitionDelay: "120ms" }}>
            1989 年以来、ルクソールのチームは行政・公共部門に情報サービスを提供し、450 件を超える案件に携わってきました。同じ中核チームが、建築・建設をはじめとする民間分野もあわせて支援しています。地理空間データの整備と GIS の構築から、BIM、そして AI の活用まで。堅実な技術と建設実務の知見を生かし、公共事業・民間建設の各段階におけるデジタル化に伴走します。
          </p>
          <div className="lx-about-tl-milestones-new">
            {timeline.map((t, i) =>
            <div key={i} className="lx-about-tl-item-new lx-about-stagger" style={{ transitionDelay: `${240 + i * 130}ms` }}>
                <div className="lx-about-tl-era-new">{t.era}</div>
                <div className="lx-about-tl-code-new" style={{ fontSize: "36px" }}>{t.code}</div>
                <div className="lx-about-tl-zh-new">{t.zh}</div>
                {i < timeline.length - 1 &&
              <div className="lx-about-tl-arrow-new">›</div>
              }
              </div>
            )}
          </div>
          <div className="lx-about-tl-bottom-labels">
            {timeline.map((t, i) =>
            <div key={i} className="lx-about-tl-bottom-item lx-about-stagger" style={{ transitionDelay: `${500 + i * 100}ms` }}>
                <div className="lx-about-tl-bottom-dot" style={{ background: i === 0 ? '#6b9e6b' : i === 1 ? '#5b8fc7' : '#8b7bbf' }}></div>
                <div className="lx-about-tl-bottom-code">{t.code}</div>
                <div className="lx-about-tl-bottom-zh">{t.zh}</div>
              </div>
            )}
          </div>
        </div>
      </div>

    </section>);

}
window.About = About;
