const { useState } = React;

const Logo = () => (
  <div className="brand">
    <div className="brand-mark">P</div>
    <div className="brand-text">
      <div className="name">PIXELION</div>
      <div className="sub">DIGITAL STUDIO</div>
    </div>
  </div>
);

const Nav = () => (
  <nav className="nav">
    <div className="nav-inner">
      <Logo />
      <div className="nav-links">
        <a href="#services">サービス</a>
        <a href="#works">導入事例</a>
        <a href="#results">実績</a>
        <a href="#about">会社情報</a>
        <a href="#blog">ブログ</a>
      </div>
      <a href="#contact" className="nav-cta">
        無料相談
        <span className="arr">→</span>
      </a>
    </div>
  </nav>
);

const Hero = () => (
  <section className="hero">
    <div className="hero-bg-pattern" />
    <div className="hero-inner">
      <div className="hero-copy">
        <h1>
          未来を、<br />
          <span className="accent">鮮烈に</span>デザインする
        </h1>
        <p className="lede">革新的な体験を生み出すデジタルスタジオ</p>
        <p className="copy">
          戦略・デザイン・テクノロジーの力で、<br />
          ブランドの可能性を解き放ち、<br />
          心を動かす体験を創造します。
        </p>
        <a href="#contact" className="hero-cta">
          プロジェクトを相談する
          <span className="arr">→</span>
        </a>
      </div>
      <div className="hero-visual">
        <img src="assets/shape_pyramid.png" className="pyramid" alt="" />
        <div className="ring-orbit" />
        <div className="shape-tri-sm" style={{top: '70%', left: '8%'}} />
        <div className="shape-square-sm" style={{top: '85%', left: '40%'}} />
        <div className="dot-grid" />
        <div className="video-cue">
          <div className="play" />
          <div className="label">私たちの想い</div>
        </div>
      </div>
    </div>
  </section>
);

const services = [
  { icon: '◇', title: '戦略コンサルティング', desc: '市場分析とブランド戦略で、ビジネスの成長を加速します。', color: '#7a3dff', grad: 'linear-gradient(135deg, #2e78ff, #7a3dff)' },
  { icon: '✎', title: 'ブランドデザイン', desc: '本質を捉えたデザインで、ブランドの価値を高めます。', color: '#ff3d8a', grad: 'linear-gradient(135deg, #ff3d8a, #c93dff)' },
  { icon: '< >', title: 'Web / アプリ開発', desc: '最新技術で、高品質なWeb体験を設計・開発します。', color: '#2bd5ff', grad: 'linear-gradient(135deg, #2bd5ff, #2e78ff)' },
  { icon: '↗', title: 'グロース支援', desc: 'データ分析と改善施策で、成果の最大化を支援します。', color: '#b8ff3d', grad: 'linear-gradient(135deg, #b8ff3d, #2bd5ff)' },
];

const Services = () => (
  <section id="services" className="services">
    <div className="services-inner">
      <div className="svc-grid">
        {services.map((s, i) => (
          <div key={i} className="svc-card" style={{'--accent': s.grad}}>
            <div className="svc-icon" style={{
              background: `linear-gradient(135deg, ${s.color}33, transparent)`,
              border: `1px solid ${s.color}66`,
              color: s.color,
              fontFamily: 'Space Grotesk, sans-serif',
              fontWeight: 700,
              fontSize: 18,
            }}>{s.icon}</div>
            <h3>{s.title}</h3>
            <p>{s.desc}</p>
            <div className="arrow-btm">→</div>
            <div className="deco-tri" style={{background: s.grad}} />
          </div>
        ))}
      </div>
    </div>
    <div className="corner-bl" />
  </section>
);

const works = [
  { tag: 'ブランディング', title: 'LUMINA スキンケアブランド', desc: 'ブランド戦略 / CI・VI / パッケージデザイン', img: 'assets/photo_lumina.png' },
  { tag: 'Webサイト制作', title: 'UNION コーポレートサイト', desc: '企画 / デザイン / 開発 / CMS構築', img: 'assets/photo_union.png' },
  { tag: 'イベント・体験設計', title: 'BRIGHT FUTURE カンファレンス', desc: '体験設計 / 空間設計 / 演出', img: 'assets/photo_bright.png' },
];

const Works = () => (
  <section id="works" className="works">
    <div className="corner-l" />
    <div className="works-inner">
      <div className="works-head">
        <h2>導入事例</h2>
        <p>業界を超えた多様なプロジェクトで、課題を解決し、成果を生み出しています。</p>
        <a className="btn-outline" href="#all">
          すべての事例を見る
          <span className="arr">→</span>
        </a>
      </div>
      <div className="work-grid">
        {works.map((w, i) => (
          <div key={i} className="work">
            <div className="img"><img src={w.img} alt={w.title} /></div>
            <div className="meta">
              <div className="tag">{w.tag}</div>
              <div className="title">{w.title}</div>
              <div className="desc">{w.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const stats = [
  { ico: '👥', num: '250+', lbl: 'プロジェクト実績', sub: '多様な業界での支援実績' },
  { ico: '🚀', num: '98%',  lbl: '顧客満足度',     sub: '高い満足度を維持' },
  { ico: '🏆', num: '45+',  lbl: '受賞歴',         sub: '国内外のデザインアワード' },
  { ico: '🌐', num: '12ヵ国', lbl: 'グローバル対応', sub: '世界中のクライアントを支援' },
];

const Stats = () => (
  <section className="stats">
    <div className="stats-inner">
      {stats.map((s, i) => (
        <div key={i} className="stat">
          <div className="ico" style={{fontSize: 22}}>{s.ico}</div>
          <div className="num">{s.num}</div>
          <div className="lbl">{s.lbl}</div>
          <div className="sub">{s.sub}</div>
        </div>
      ))}
    </div>
  </section>
);

const Testimonial = () => (
  <section className="testi">
    <div className="testi-inner">
      <div className="portrait">
        <img src="assets/photo_person_round.png" alt="代表" />
      </div>
      <div className="testi-body">
        <div className="quote-mark">"</div>
        <blockquote>
          デザインは、未来への意思表示。<br />
          私たちは、あなたのビジョンをカタチにするパートナーです。
        </blockquote>
        <p className="body-copy">
          PIXELIONは、戦略から実装までを一気通貫で支援するデジタルスタジオです。
          美しさと機能性を兼ね備えた体験で、ビジネスの成長に貢献します。
        </p>
        <div className="signoff">
          <div>
            <div className="name">佐藤 健一</div>
            <div className="role">代表取締役 / Creative Director</div>
          </div>
          <div className="sig">Kenichi Sato</div>
        </div>
      </div>
      <div className="scatter" style={{top: '5%', left: '18%', background: '#ff3d8a'}} />
      <div className="scatter" style={{top: '20%', left: '8%', background: '#7a3dff', width: 10, height: 10}} />
      <div className="scatter" style={{bottom: '8%', left: '14%', background: '#2bd5ff', width: 8, height: 8}} />
    </div>
  </section>
);

const CTABand = () => (
  <section id="contact" className="cta-band">
    <div className="cta-inner">
      <div className="cta-left">
        <div className="ico">✈</div>
        <div>
          <h3>まずはお気軽にご相談ください</h3>
          <p>課題の整理から一緒に。最適なソリューションをご提案します。</p>
        </div>
      </div>
      <a className="cta-btn" href="#">
        無料で相談する
        <span className="arr">→</span>
      </a>
    </div>
  </section>
);

const footCols = [
  { h: 'サービス', items: ['戦略コンサルティング', 'ブランドデザイン', 'Web / アプリ開発', 'グロース支援'] },
  { h: '導入事例', items: ['ブランディング', 'Webサイト制作', 'アプリ開発', 'イベント・体験設計'] },
  { h: '会社情報', items: ['会社概要', 'メンバー', '採用情報', 'ニュース'] },
  { h: 'リソース', items: ['ブログ', 'お役立ち資料', 'よくある質問'] },
  { h: 'お問い合わせ', items: ['無料相談', '資料ダウンロード'] },
];

const Footer = () => (
  <footer className="foot">
    <div className="foot-inner">
      <div className="foot-top">
        <div className="foot-brand">
          <Logo />
          <div className="tagline" style={{marginTop: 16}}>未来を、鮮烈にデザインする。</div>
          <div className="socials">
            <a href="#">𝕏</a>
            <a href="#">f</a>
            <a href="#">◎</a>
            <a href="#">in</a>
          </div>
        </div>
        {footCols.map((c, i) => (
          <div key={i} className="foot-col">
            <h4>{c.h}</h4>
            <ul>{c.items.map((it, j) => <li key={j}><a href="#">{it}</a></li>)}</ul>
          </div>
        ))}
      </div>
      <div className="foot-btm">
        <div>© 2024 PIXELION DIGITAL STUDIO Inc. All Rights Reserved.</div>
        <div className="legal">
          <a href="#">プライバシーポリシー</a>
          <a href="#">利用規約</a>
        </div>
      </div>
    </div>
  </footer>
);

const App = () => (
  <div className="page">
    <Nav />
    <Hero />
    <Services />
    <Works />
    <Stats />
    <Testimonial />
    <CTABand />
    <Footer />
  </div>
);

ReactDOM.createRoot(document.getElementById('root')).render(<App />);