// sections.jsx — structure, market, company, cases, CTA, footer
function StructureSection() {
  return (
    <section className="section section-soft" id="approach">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <span className="section-num">SECTION 02</span>
            <span className="eyebrow">COMMON APPROACH</span>
          </div>
          <div>
            <h2>3テーマで共通の、現状診断から継続改善までの4ステップ</h2>
            <p className="intro">
              領域は違っても、進め方の基本構造は揃えています。最初から完璧な計画を求めず、お客様の規模・体制・成熟度に合った歩幅で、着実に積み上げます。
            </p>
          </div>
        </div>
        <div className="structure-list">
          {window.STRUCTURE.map((s) =>
          <div className="structure-item" key={s.num}>
              <div className="ic">{s.icon}</div>
              <div className="num">PHASE {s.num}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function PhilosophySection() {
  return (
    <section className="philosophy philosophy-clean" id="philosophy">
      <div className="container">
        <div className="philosophy-top">
          <span className="eyebrow">BRAND PHILOSOPHY</span>
          <h2>
            <em>SKY</em>の視座で、<br />
            <em>IDEA</em>の本質を返す
          </h2>
          <p className="lede">
            ベンダー都合のIT提案ではなく、お客様の業務と業種特性に踏み込んだ最適解を。<br />
            経営層と現場の両言語で、意思決定と実装の両面を伴走します。
          </p>
        </div>
        <div className="philosophy-bottom">
          <div className="sky-idea-card">
            <span className="letter">SKY</span>
            <div className="desc">
              <h4>自由 と 可能性</h4>
              <p>テクノロジーの選択肢を、特定ベンダーや既存制約に縛られず開く。事業が伸びる方向に、空間を確保する。</p>
            </div>
          </div>
          <div className="sky-idea-card">
            <span className="letter">IDEA</span>
            <div className="desc">
              <h4>発想 と 本質</h4>
              <p>カタログ的な提案ではなく、お客様の業務と業種特性に踏み込んだ最適解を、論点の本質まで掘り下げる。</p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function BrandBand() {
  const bandRef = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => {
      if (!bandRef.current) return;
      const rect = bandRef.current.getBoundingClientRect();
      const vh = window.innerHeight;
      const progress = (rect.top + rect.height / 2 - vh / 2) / vh;
      const img = bandRef.current.querySelector('.brand-band-img');
      if (img) img.style.transform = `translateY(${progress * -32}px) scale(1.12)`;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <section className="brand-band" ref={bandRef}>
      <img className="brand-band-img" src="assets/eagle-philosophy.jpg" alt="広い空を象徴するブランドビジュアル" />
      <div className="brand-band-overlay"></div>
      <div className="container brand-band-content">
        <span className="eyebrow" style={{ color: 'var(--sky-blue)' }}>BRAND VISUAL</span>
        <p className="brand-band-quote">
          <em>広い視野</em>と、<em>誠実な実装力</em>で、<br />
          お客様の事業に寄り添うITパートナーを目指して。
        </p>
        <span className="brand-band-sign">SKYIDEA LLC</span>
      </div>
    </section>);
}

function EagleBand() {
  const bandRef = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => {
      if (!bandRef.current) return;
      const rect = bandRef.current.getBoundingClientRect();
      const vh = window.innerHeight;
      // -100 at top of viewport, +100 at bottom
      const progress = (rect.top + rect.height / 2 - vh / 2) / vh;
      const img = bandRef.current.querySelector('.eagle-band-img');
      if (img) img.style.transform = `translateY(${progress * -40}px) scale(1.15)`;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="eagle-band" ref={bandRef}>
      <img className="eagle-band-img" src="assets/eagle-accent.jpg" alt="広い空を背景に" />
      <div className="eagle-band-overlay"></div>
      <div className="container eagle-band-content">
        <div className="eagle-band-left">
          <span className="eyebrow" style={{ color: 'var(--sky-blue)' }}>VANTAGE POINT</span>
          <h2>
            <em>俯瞰</em>こそが<br />
            答えになる
          </h2>
        </div>
        <div className="eagle-band-right">
          <p>
            個別最適のIT提案は、すぐに次の問題を生みます。<br />
            DX/AX・セキュリティ・BCPを<strong>同じ視座から俯瞰し</strong>、
            事業の進行方向と整合させる設計が、後戻りを最小化します。
          </p>
          <div className="eagle-band-stats">
            <div className="bstat">
              <span className="bv">3</span>
              <span className="bl">領域を同時に設計</span>
            </div>
            <div className="bstat">
              <span className="bv">1</span>
              <span className="bl">本のロードマップに統合</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function MarketSection() {
  return (
    <section className="section section-dark" id="insights">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <span className="section-num">SECTION 03</span>
            <span className="eyebrow">MARKET CONTEXT</span>
          </div>
          <div>
            <h2>なぜ今、「DX/AX × セキュリティ × BCP」なのか</h2>
            <p className="intro" style={{ color: 'rgba(255,255,255,.65)' }}>
              いずれも単独施策では完結せず、相互に絡む領域。スカイイデアが横断視点で提案できる立ち位置を示す好機です。
            </p>
          </div>
        </div>
        <div className="market-grid">
          {window.MARKET.map((m, i) =>
          <div className="market-card" key={i}>
              <div className="mlabel">
                <span>{m.label}</span>
                <span>↗</span>
              </div>
              <h4>{m.title}</h4>
              <p>{m.body}</p>
            </div>
          )}
        </div>
        <div className="market-footer">
          <div className="icon">★</div>
          <p>
            これら3領域は、サイロ化したベンダー提案では解けません。<br />
            業務 / 業種 / 経営判断の文脈に踏み込み、設計を一本でつなぐITコンサルティングが必要です。
          </p>
        </div>
      </div>
    </section>);

}

function CasesSection({ onContactClick }) {
  return (
    <section className="section" id="cases">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <span className="section-num">SECTION 04</span>
            <span className="eyebrow">SELECTED CASES</span>
          </div>
          <div>
            <h2>具体的な事例で、支援領域の解像度を上げる。</h2>
            <p className="intro">
              いずれも匿名化のうえで紹介。お客様の業種・規模に近い事例は個別ご相談時に詳しくお見せします。
            </p>
          </div>
        </div>
        <div className="cases-row">
          {window.CASES.map((c, i) =>
          <div className="case-row-card" key={i}>
              <span className="tag" style={{
              background: `color-mix(in oklab, ${c.color} 12%, white)`,
              color: c.color
            }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: c.color }}></span>
                {c.tag}
              </span>
              <h4>{c.title}</h4>
              <p className="desc">{c.desc}</p>
              <div className="metrics">
                <div className="m">
                  <span className="v">{c.metric1.v}</span>
                  <span className="l">{c.metric1.l}</span>
                </div>
                <div className="m">
                  <span className="v">{c.metric2.v}</span>
                  <span className="l">{c.metric2.l}</span>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function SecurityPolicySection() {
  return (
    <section className="section section-soft" id="security-policy">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <span className="section-num">SECTION 04</span>
            <span className="eyebrow">SECURITY POLICY</span>
          </div>
          <div>
            <h2>情報セキュリティ基本方針</h2>
            <p className="intro">
              合同会社スカイイデア（以下、当社）は、お客様からお預かりした当社の情報資産を事故・災害・犯罪などの脅威から守り、お客様ならびに社会の信頼に応えるべく、以下の方針に基づき全社で情報セキュリティに取り組みます。
            </p>
          </div>
        </div>

        <div className="policy-grid">
          <ol className="policy-list">
            <li>
              <span className="pn">01</span>
              <div>
                <h4>経営者の責任</h4>
                <p>当社は、経営者主導で組織的かつ継続的に情報セキュリティの改善・向上に努めます。</p>
              </div>
            </li>
            <li>
              <span className="pn">02</span>
              <div>
                <h4>社内体制の整備</h4>
                <p>当社は、情報セキュリティの維持及び改善のために組織を設置し、情報セキュリティ対策を社内の正式な規則として定めます。</p>
              </div>
            </li>
            <li>
              <span className="pn">03</span>
              <div>
                <h4>従業員の取組み</h4>
                <p>当社の従業員は、情報セキュリティのために必要とされる知識、技術を習得し、情報セキュリティへの取り組みを確かなものにします。</p>
              </div>
            </li>
            <li>
              <span className="pn">04</span>
              <div>
                <h4>法令及び契約上の要求事項の遵守</h4>
                <p>当社は、情報セキュリティに関わる法令、規制、規範、契約上の義務を遵守するとともに、お客様の期待に応えます。</p>
              </div>
            </li>
            <li>
              <span className="pn">05</span>
              <div>
                <h4>違反及び事故への対応</h4>
                <p>当社は、情報セキュリティに関わる法令違反、契約違反及び事故が発生した場合には適切に対処し、再発防止に努めます。</p>
              </div>
            </li>
          </ol>

          <aside className="policy-aside">
            <div className="policy-sig">
              <span className="ps-label">制定日</span>
              <span className="ps-date">令和6年9月3日</span>
              <span className="ps-co">合同会社スカイイデア</span>
              <span className="ps-rep">代表　門林 成和</span>
            </div>

            <a
              className="security-action"
              href="https://www.ipa.go.jp/security/security-action/"
              target="_blank"
              rel="noopener noreferrer">
              
              <img src="assets/security-action.jpg" alt="SECURITY ACTION セキュリティ対策自己宣言 ★★（二つ星）" />
              <span className="sa-caption">SECURITY ACTION<br /><small>セキュリティ対策自己宣言（二つ星）</small></span>
            </a>
          </aside>
        </div>
      </div>
    </section>);

}

function CompanySection() {
  return (
    <section className="section section-soft" id="company">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <span className="section-num">SECTION 03</span>
            <span className="eyebrow">COMPANY</span>
          </div>
          <div>
            <h2>会社情報</h2>
          </div>
        </div>
        <div className="company-grid">
          <div className="message-box">
            <h3>事業の方針</h3>
            <p>
              IT投資は手段にすぎません。DXで業務を整え、AXで再設計し、セキュリティとBCPで事業を守る——
              この当たり前の構造を、業種特性に合わせた具体策まで落とし込み、現場で動く形にする。
              それが、スカイイデアの仕事の範囲です。
            </p>
            <p>
              経営層には事業インパクト、現場には実務手順。立場に応じて言語を切り替え、
              意思決定と運用の両側を伴走します。
            </p>
          </div>

          <div className="company-table">
            <dl>
              <dt>商号</dt>
              <dd>合同会社スカイイデア</dd>
            </dl>
            <dl>
              <dt>代表</dt>
              <dd>門林 成和</dd>
            </dl>
            <dl>
              <dt>事業内容</dt>
              <dd>ITコンサルティング / DX・AX推進支援 / 情報セキュリティ・BCP / ITインフラ構築・運用保守</dd>
            </dl>
            <dl>
              <dt>所在地</dt>
              <dd>奈良県生駒市俵口町</dd>
            </dl>
            <dl>
              <dt>URL</dt>
              <dd>skyidea.co.jp</dd>
            </dl>
            <dl>
              <dt>主要取引先</dt>
              <dd>
                株式会社アバンセシステム<br />
                株式会社エスエヌシー<br />
                エックスサーバー株式会社<br />
                ソニービズネットワークス株式会社<br />
                学校法人奈良育英学園<br />
                株式会社フロントアーク<br />
                安田株式会社<br />
                <small style={{ color: 'var(--ink-3)' }}>（五十音順・敬称略）</small>
              </dd>
            </dl>
            <dl>
              <dt>取引銀行</dt>
              <dd>
                三井住友銀行<br />
                住信SBIネット銀行<br />
                GMOあおぞらネット銀行
              </dd>
            </dl>
            <dl>
              <dt>許認可</dt>
              <dd>
                古物商許可<br />
                奈良県公安委員会　第62237R066215号<br />
                <small style={{ color: 'var(--ink-3)' }}>（許可日：令和6年10月28日）</small>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </section>);

}

function SocialFeed() {
  const containerRef = React.useRef(null);

  React.useEffect(() => {
    // Load Twitter widgets.js once
    const SRC = "https://platform.twitter.com/widgets.js";
    const existing = document.querySelector(`script[src="${SRC}"]`);
    const renderWidgets = () => {
      if (window.twttr && window.twttr.widgets && containerRef.current) {
        window.twttr.widgets.load(containerRef.current);
      }
    };
    if (existing) {
      renderWidgets();
    } else {
      const s = document.createElement("script");
      s.src = SRC;
      s.async = true;
      s.charset = "utf-8";
      s.onload = renderWidgets;
      document.body.appendChild(s);
    }
  }, []);

  return (
    <section className="section section-soft" id="updates">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <span className="section-num">SECTION 06</span>
            <span className="eyebrow">IT NEWS & TOPICS</span>
          </div>
          <div>
            <h2>ITニュース・トピックス</h2>
            <p className="intro">
              DX / AX、情報セキュリティ、BCPなど、当社の事業領域に関するITニュースや業界動向への所感を、公式X（旧Twitter）にて随時発信しています。
            </p>
          </div>
        </div>

        <div className="updates-grid">
          <aside className="updates-side">
            <div className="updates-card">
              <div className="updates-card-head">
                <span className="updates-platform">
                  <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
                    <path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644Z" />
                  </svg>
                  Official X Account
                </span>
                <span className="updates-handle">@SKYIDEA_JP</span>
              </div>
              <h4>合同会社スカイイデア 公式X</h4>
              <p>
                経営層・情シス担当者の皆様に役立つITニュースや業界トピックスを、当社の視点で読み解き、現場で活かせる短いコメントを添えてお届けします。
              </p>
              <a
                className="updates-cta"
                href="https://twitter.com/SKYIDEA_JP"
                target="_blank"
                rel="noopener noreferrer"
              >
                Xでフォローする
                <span className="arrow">→</span>
              </a>
            </div>
          </aside>

          <div className="updates-feed" ref={containerRef}>
            <a
              className="twitter-timeline"
              data-height="640"
              data-chrome="noheader nofooter noborders transparent"
              data-dnt="true"
              data-lang="ja"
              href="https://twitter.com/SKYIDEA_JP?ref_src=twsrc%5Etfw"
            >
              Tweets by SKYIDEA_JP
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function XFollowStrip() {
  return (
    <section className="x-follow" id="x-follow" aria-labelledby="x-follow-heading">
      <div className="container">
        <a
          className="x-follow-card"
          href="https://x.com/SKYIDEA_JP"
          target="_blank"
          rel="noopener noreferrer"
        >
          <span className="x-follow-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="22" height="22">
              <path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644Z" />
            </svg>
          </span>
          <div className="x-follow-text">
            <span className="x-follow-label">FOLLOW US ON X</span>
            <h3 id="x-follow-heading">
              ITニュースへの所感を、X で発信しています。
            </h3>
            <span className="x-follow-handle">@SKYIDEA_JP</span>
          </div>
          <span className="x-follow-cta">
            Xでフォロー
            <span className="arrow">→</span>
          </span>
        </a>
      </div>
    </section>
  );
}

function ContactCTA({ onContactClick }) {
  if (!window.CONTACT_ENABLED) return null;
  return (
    <section className="section" id="contact">
      <div className="container">
        <div className="contact-cta">
          <div>
            <span className="eyebrow" style={{ color: 'var(--sky-blue)', marginBottom: 20, display: 'inline-flex' }}>
              CONTACT
            </span>
            <h2>まずは、お気軽にご相談ください。</h2>
            <p>
              事業課題やご検討段階に応じて、最適な進め方をご提案します。
              DX/AX・情報セキュリティ＆BCP・ITインフラのいずれも、構想から構築・運用まで一社でご支援します。
            </p>
          </div>
          <div className="ccta-actions">
            <div className="ccta-button" onClick={() => onContactClick()}>
              <div className="l">
                <span className="lbl">お問い合わせ</span>
                <span className="ttl">メールフォームから連絡</span>
              </div>
              <span className="arrow">→</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <a href="#top" className="brand">
              <img className="brand-logo" src="assets/skyidea-logo.svg" alt="SKYIDEA 合同会社スカイイデア" style={{ height: 36 }} />
            </a>
          </div>
          <div>
            <h5>SERVICES</h5>
            <ul>
              <li><a href="#themes">DX / AX 推進</a></li>
              <li><a href="#themes">情報セキュリティ ＆ BCP</a></li>
              <li><a href="#themes">ITインフラ 構築・運用保守</a></li>
              <li><a href="#approach">支援アプローチ</a></li>
            </ul>
          </div>
          <div>
            <h5>COMPANY</h5>
            <ul>
              <li><a href="#company">会社概要</a></li>
              <li><a href="#security-policy">情報セキュリティ基本方針</a></li>
            </ul>
          </div>
          <div>
            <h5>CONTACT</h5>
            <ul>
              <li><a href="#contact">お問い合わせフォーム</a></li>
              <li>
                <a href="https://x.com/SKYIDEA_JP" target="_blank" rel="noopener noreferrer" className="footer-x-link">
                  <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" style={{ verticalAlign: '-2px', marginRight: 6 }}>
                    <path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644Z" />
                  </svg>
                  公式X（@SKYIDEA_JP）
                </a>
              </li>
              <li><a href="privacy.html">プライバシーポリシー</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 SKYIDEA LLC — ALL RIGHTS RESERVED</span>
          <span>SKYIDEA.CO.JP / RENEWAL VER. 1.0</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { StructureSection, MarketSection, CasesSection, CompanySection, ContactCTA, Footer, PhilosophySection, EagleBand, BrandBand, SecurityPolicySection, SocialFeed, XFollowStrip });