// home.jsx — Top page

const HOME_HERO_COPIES = {
  business: {
    pre: 'ビジネスを',
    rotate: ['前進させる', '加速させる', '構造化する', 'デザインする'],
    post: 'ウェブ制作。',
    sub: '戦略・デザイン・開発・運用、そしてAI活用までを一貫して。中小企業のデジタル成長を、堅実なパートナーとして伴走します。'
  },
  growth: {
    pre: '成果につながる',
    rotate: ['デジタル戦略', 'コーポレート設計', 'ブランド体験', 'コンテンツ運用'],
    post: 'を、東京から。',
    sub: 'ウェブを「公開して終わり」にしない。事業課題に踏み込み、KPIに紐付くサイトを、設計から運用までワンストップで。'
  },
  craft: {
    pre: '企業価値を高める',
    rotate: ['ウェブ戦略', '情報設計', 'CMS構築', 'SEO設計'],
    post: '。',
    sub: '小規模・中堅企業のために、過剰でも安すぎでもない、ちょうどよい品質と速度で。長くお付き合いできるパートナーを目指しています。'
  }
};

function HeroRotator({ words }) {
  const [i, setI] = useState(0);
  const [phase, setPhase] = useState('show'); // show -> exit -> enter -> show
  useEffect(() => {
    let t1, t2;
    const tick = () => {
      setPhase('exit');
      t1 = setTimeout(() => {
        setI((v) => (v + 1) % words.length);
        setPhase('enter');
        t2 = setTimeout(() => setPhase('show'), 30);
      }, 550);
    };
    const interval = setInterval(tick, 2600);
    return () => { clearInterval(interval); clearTimeout(t1); clearTimeout(t2); };
  }, [words]);

  // measure widest word for layout stability.
  // CJK glyphs are ~1em wide (vs ~0.5ch in proportional fonts), so ch
  // significantly under-allocates. Use em + a small safety pad.
  const widest = words.reduce((a, b) => (a.length > b.length ? a : b), '');

  return (
    <span className="swap-wrap" style={{ minWidth: `${widest.length + 0.4}em` }}>
      <span className={`swap ${phase}`} key={i}>{words[i]}</span>
    </span>
  );
}

/* ----------------------------------------------------- *
 * HeroArt — abstract DX/AI illustration behind the hero  *
 * uses brand vocabulary (square/triangle/circle + nodes) *
 * ----------------------------------------------------- */
function HeroArt() {
  return (
    <div className="hero__art" aria-hidden="true">
      <svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
        <defs>
          <radialGradient id="hero-halo" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="var(--logo-b)" stopOpacity="0.18" />
            <stop offset="55%" stopColor="var(--logo-b)" stopOpacity="0.04" />
            <stop offset="100%" stopColor="var(--logo-b)" stopOpacity="0" />
          </radialGradient>
        </defs>

        {/* soft halo */}
        <circle cx="500" cy="500" r="420" fill="url(#hero-halo)" />

        {/* outer concentric rings */}
        <g className="ring-grp" fill="none" stroke="currentColor">
          <circle cx="500" cy="500" r="480" strokeOpacity="0.10" strokeDasharray="2 10" />
          <circle cx="500" cy="500" r="420" strokeOpacity="0.14" strokeDasharray="2 8" />
          <circle cx="500" cy="500" r="340" strokeOpacity="0.20" />
        </g>

        {/* counter-rotating dashed orbit + markers */}
        <g className="ring-grp--cc">
          <circle cx="500" cy="500" r="380" fill="none" stroke="currentColor" strokeOpacity="0.28" className="dash-flow" />
          <circle cx="880" cy="500" r="3.5" fill="currentColor" fillOpacity="0.55" />
          <circle cx="690" cy="171" r="3" fill="currentColor" fillOpacity="0.45" />
          <circle cx="310" cy="171" r="3" fill="currentColor" fillOpacity="0.45" />
          <circle cx="120" cy="500" r="3.5" fill="currentColor" fillOpacity="0.55" />
          <circle cx="310" cy="829" r="3" fill="currentColor" fillOpacity="0.45" />
          <circle cx="690" cy="829" r="3" fill="currentColor" fillOpacity="0.45" />
        </g>

        {/* mid orbit with brand-colored anchors */}
        <g className="orbit--cc">
          <circle cx="740" cy="500" r="6" fill="var(--logo-b)" fillOpacity="0.75" />
          <circle cx="260" cy="500" r="5" fill="var(--logo-g)" fillOpacity="0.75" />
          <circle cx="500" cy="260" r="5.5" fill="var(--logo-r)" fillOpacity="0.75" />
          <circle cx="500" cy="740" r="4" fill="currentColor" fillOpacity="0.45" />
        </g>

        {/* central network — neural-net-ish cluster */}
        <g className="breathe">
          {/* edges */}
          <g stroke="currentColor" strokeOpacity="0.28" fill="none">
            <line x1="500" y1="500" x2="620" y2="500" />
            <line x1="500" y1="500" x2="560" y2="396" />
            <line x1="500" y1="500" x2="440" y2="396" />
            <line x1="500" y1="500" x2="380" y2="500" />
            <line x1="500" y1="500" x2="440" y2="604" />
            <line x1="500" y1="500" x2="560" y2="604" />
            <line x1="620" y1="500" x2="560" y2="604" />
            <line x1="620" y1="500" x2="560" y2="396" />
            <line x1="380" y1="500" x2="440" y2="604" />
            <line x1="380" y1="500" x2="440" y2="396" />
            <line x1="560" y1="396" x2="440" y2="396" />
            <line x1="560" y1="604" x2="440" y2="604" />
          </g>
          {/* satellite nodes */}
          <circle cx="620" cy="500" r="6" fill="currentColor" fillOpacity="0.85" />
          <circle cx="560" cy="396" r="6" fill="currentColor" fillOpacity="0.85" />
          <circle cx="440" cy="396" r="6" fill="currentColor" fillOpacity="0.85" />
          <circle cx="380" cy="500" r="6" fill="currentColor" fillOpacity="0.85" />
          <circle cx="440" cy="604" r="6" fill="currentColor" fillOpacity="0.85" />
          <circle cx="560" cy="604" r="6" fill="currentColor" fillOpacity="0.85" />
          {/* central node */}
          <circle cx="500" cy="500" r="22" fill="none" stroke="var(--logo-b)" strokeOpacity="0.45" />
          <circle cx="500" cy="500" r="14" fill="var(--logo-b)" fillOpacity="0.9" />
        </g>

        {/* floating brand primitives */}
        <g className="drift-a">
          <rect x="172" y="252" width="40" height="40" transform="rotate(12 192 272)" fill="var(--logo-r)" fillOpacity="0.7" />
        </g>
        <g className="drift-b">
          <polygon points="824,288 868,360 780,360" fill="var(--logo-g)" fillOpacity="0.7" />
        </g>
        <g className="drift-c">
          <circle cx="788" cy="752" r="24" fill="var(--logo-b)" fillOpacity="0.55" />
        </g>

        {/* connector paths from primitives toward cluster */}
        <g fill="none" stroke="currentColor" strokeOpacity="0.22" className="dash-flow">
          <path d="M 212 292 Q 330 380 440 396" />
          <path d="M 820 350 Q 720 430 620 500" />
          <path d="M 770 740 Q 660 660 560 604" />
        </g>

        {/* scattered pulse dots */}
        <circle className="pulse" cx="240" cy="720" r="3.5" fill="currentColor" fillOpacity="0.55" />
        <circle className="pulse-2" cx="760" cy="200" r="3" fill="currentColor" fillOpacity="0.55" />
        <circle className="pulse-3" cx="180" cy="500" r="2.5" fill="currentColor" fillOpacity="0.55" />
        <circle className="pulse" cx="860" cy="640" r="2.5" fill="currentColor" fillOpacity="0.45" />
        <circle className="pulse-2" cx="380" cy="220" r="2.5" fill="currentColor" fillOpacity="0.45" />
      </svg>
    </div>
  );
}

function Home({ heroKey }) {
  const copy = HOME_HERO_COPIES[heroKey] || HOME_HERO_COPIES.business;

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="hero__grid" />
        <HeroArt />
        <div className="hero__inner">
          <div className="hero__top">
            <div className="hero__meta">
              <span>VARIETIES, INC.</span>
              <span>EST. 2021 — TOKYO, JP</span>
            </div>
            <div className="hero__meta" style={{ textAlign: 'right' }}>
              <span>WEB STUDIO / DIGITAL PARTNER</span>
              <span>FOR SMALL & MID-SIZED COMPANIES</span>
            </div>
          </div>

          <h1 className="hero__title">
            <span className="line">{copy.pre}</span>
            <span className="line">
              <HeroRotator words={copy.rotate} />
            </span>
            <span className="line" style={{ color: 'var(--ink-3)' }}>{copy.post}</span>
          </h1>

          <p className="hero__sub">{copy.sub}</p>

          <div className="hero__cta">
            <a href="#/contact" className="btn btn--primary btn--lg"
              onClick={(e)=>{e.preventDefault();navigate('contact');}}>
              無料で相談する
              <span className="arr">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none">
                  <path d="M1 6h12M8 1l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </span>
            </a>
            <a href="#/services" className="btn btn--ghost btn--lg"
              onClick={(e)=>{e.preventDefault();navigate('services');}}>
              サービス一覧
            </a>
          </div>

        </div>
      </section>

      {/* MARQUEE */}
      <div className="marquee">
        <div className="marquee__track">
          <span>
            STRATEGY <i>·</i> WEB DESIGN <i>·</i> DEVELOPMENT <i>·</i> CMS <i>·</i> EC <i>·</i> SEO <i>·</i> CONTENT <i>·</i> AI INTEGRATION <i>·</i> ANALYTICS <i>·</i> MAINTENANCE <i>·</i> 
          </span>
          <span>
            STRATEGY <i>·</i> WEB DESIGN <i>·</i> DEVELOPMENT <i>·</i> CMS <i>·</i> EC <i>·</i> SEO <i>·</i> CONTENT <i>·</i> AI INTEGRATION <i>·</i> ANALYTICS <i>·</i> MAINTENANCE <i>·</i> 
          </span>
        </div>
      </div>

      {/* SERVICES */}
      <section className="section container" id="services">
        <Reveal className="section__head">
          <div>
            <span className="eyebrow">Services / 01</span>
            <h2 className="display"><span className="accent-num">01</span>事業を支える、6つの基盤。</h2>
          </div>
          <p className="lede">
            企業のフェーズと目的に合わせ、必要なものを過不足なく。<br/>
            すべてのサービスは戦略・設計・運用までをひと続きで提供します。
          </p>
        </Reveal>

        <Reveal>
          <div className="svc">
            {[
              { n: '01', t: 'コーポレートサイト制作', d: '企業価値を伝える、骨太な情報設計とブランド体験。CMS実装まで。' },
              { n: '02', t: 'LP制作', d: 'CV最大化を起点としたコピー、構成、デザインの一気通貫制作。' },
              { n: '03', t: 'ECサイト制作', d: 'Shopify / 自社EC構築。決済・物流・運用フローまで一括設計。' },
              { n: '04', t: 'Webマーケティング支援', d: '広告運用、CRM設計、改善仮説の立案。データに根拠を置く。' },
              { n: '05', t: 'SEO対策', d: '検索意図のリサーチからコンテンツ運用まで。中長期で資産を積む。' },
              { n: '06', t: '保守運用', d: '月次レポート、改善提案、AB検証、CMS運用。継続支援が前提。' },
            ].map((s) => (
              <div key={s.n} className="svc__cell">
                <div className="svc__num">{s.n}</div>
                <div className="svc__name">{s.t}</div>
                <div className="svc__desc">{s.d}</div>
                <a className="svc__more" href={`#/services`}
                  onClick={(e)=>{e.preventDefault();navigate('services', `svc-${s.n}`);}}>
                  詳しく見る →
                </a>
              </div>
            ))}
          </div>
        </Reveal>
      </section>

      {/* STRENGTHS */}
      <section className="section container">
        <Reveal className="section__head">
          <div>
            <span className="eyebrow">Strengths / 02</span>
            <h2 className="display"><span className="accent-num">02</span>選ばれる、4つの理由。</h2>
          </div>
          <p className="lede">
            派手さよりも、確かな成果と長く続く関係を重視しています。<br/>
            私たちが大切にしているのは、堅実なものづくりと真摯な伴走です。
          </p>
        </Reveal>

        <Reveal>
          <div className="streng">
            {[
              { n: '01', t: '少人数・直取引', b: '担当が変わらず、最初の打ち合わせから運用まで同じチームで対応します。意思決定が速く、責任の所在が明快です。' },
              { n: '02', t: '事業に踏み込む設計', b: '見栄えではなく成果から逆算します。KPIと顧客課題を整理してから、はじめてデザインを始めます。' },
              { n: '03', t: 'AI活用を当たり前に', b: 'コンテンツ生成、リサーチ、運用効率化までAIを内製ツールに組み込み、人手では届かない速度を実現します。' },
              { n: '04', t: '長期で関わる前提', b: '公開がゴールではありません。改善仮説と運用負荷を考えた上で、技術選定とCMS設計を行います。' },
            ].map((s) => (
              <div key={s.n} className="streng__item">
                <div className="streng__num">{s.n}</div>
                <h3 className="streng__title">{s.t}</h3>
                <p className="streng__body">{s.b}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </section>

      {/* AI / DX section */}
      <section className="section container">
        <Reveal>
          <div className="aidx">
            <div className="aidx__bg" />
            <div className="aidx__inner">
              <span className="eyebrow">AI / DX / 03</span>
              <h2 className="aidx__title">「AIで何ができるか」ではなく、<br/>「何を任せるか」を一緒に決めます。</h2>
              <p className="aidx__lede">
                生成AIや自動化ツールが業務をどう変えるかは、企業ごとに違います。私たちは、現場の業務を分解し、AIに置き換えられる部分と人が判断すべき部分を切り分け、コンパクトに導入支援します。
              </p>
              <div className="aidx__grid">
                <div className="aidx__cell">
                  <div className="tag">01 — DISCOVERY</div>
                  <h4>業務棚卸し・AI適用診断</h4>
                  <p>定型業務、検索、文書作成、要約、画像処理など、AI化のROIが見込める領域を可視化します。</p>
                </div>
                <div className="aidx__cell">
                  <div className="tag">02 — INTEGRATION</div>
                  <h4>サイトへのAI機能組み込み</h4>
                  <p>FAQボット、社内ナレッジ検索、コンテンツ自動生成、レコメンドエンジンの設計・実装。</p>
                </div>
                <div className="aidx__cell">
                  <div className="tag">03 — OPERATION</div>
                  <h4>運用フローの再設計</h4>
                  <p>記事生成、SNS発信、社内文書整備など、AIを組み込んだ運用ルールと教育設計。</p>
                </div>
              </div>
              <div style={{ marginTop: 48 }}>
                <a href="#/contact"
                  className="btn"
                  style={{ background: 'var(--on-accent)', color: 'var(--ink)' }}
                  onClick={(e)=>{e.preventDefault();navigate('contact');}}>
                  AI活用の相談をする
                  <span className="arr">
                    <svg width="14" height="12" viewBox="0 0 14 12" fill="none">
                      <path d="M1 6h12M8 1l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </span>
                </a>
              </div>
            </div>
          </div>
        </Reveal>
      </section>

      {/* PROCESS */}
      <section className="section container">
        <Reveal className="section__head">
          <div>
            <span className="eyebrow">Process / 04</span>
            <h2 className="display"><span className="accent-num">04</span>5つの工程で、確実に進めます。</h2>
          </div>
          <p className="lede">
            ヒアリングから運用まで、各工程ごとに合意を取りながら進行。<br/>
            「気付いたら違うものが上がってきた」を起こしません。
          </p>
        </Reveal>

        <Reveal>
          <div className="flow">
            {[
              { n: '01', t: 'ヒアリング', en: 'Discovery', d: '事業状況、課題、KPI、競合、技術制約までを丁寧に整理します。' },
              { n: '02', t: '戦略設計', en: 'Strategy', d: '情報設計とサイト構造、コンテンツ方針を決定し、合意形成します。' },
              { n: '03', t: 'デザイン', en: 'Design', d: 'ブランドのトーンに沿ったUIを設計。プロトタイプで体感確認。' },
              { n: '04', t: '開発・実装', en: 'Build', d: '保守性の高いコードとCMSで実装。SEO・速度・アクセシビリティ準拠。' },
              { n: '05', t: '運用・改善', en: 'Operate', d: '公開後の改善仮説とAB検証を月次サイクルで回します。' },
            ].map((s) => (
              <div key={s.n} className="flow__step">
                <div className="flow__num">{s.n}</div>
                <div className="flow__name">
                  {s.t}
                  <small>{s.en}</small>
                </div>
                <div className="flow__desc">{s.d}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </section>

      {/* FAQ */}
      <section className="section container">
        <Reveal className="section__head">
          <div>
            <span className="eyebrow">FAQ / 05</span>
            <h2 className="display"><span className="accent-num">05</span>よくあるご質問。</h2>
          </div>
          <p className="lede">
            ご検討時にいただくことの多い質問をまとめました。記載のない内容も、お気軽にお問い合わせください。
          </p>
        </Reveal>

        <Reveal>
          <FAQ />
        </Reveal>
      </section>

      {/* CTA */}
      <section className="section container">
        <div className="cta">
          <h2 className="cta__title">
            次のウェブを、<br/>一緒に考えませんか。
          </h2>
          <div className="cta__side">
            <p style={{ color: 'var(--ink-2)', margin: 0, fontSize: 15, lineHeight: 1.85 }}>
              初回ご相談は無料です。<br/>
              事業背景をお伺いした上で、御見積と進行プランをご提示します。
            </p>
            <div className="cta__phone">
              <small>お電話でも承ります</small>
              050-1793-8686
            </div>
            <div style={{ display:'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#/contact" className="btn btn--primary btn--lg"
                onClick={(e)=>{e.preventDefault();navigate('contact');}}>
                お問い合わせフォーム
                <span className="arr">
                  <svg width="14" height="12" viewBox="0 0 14 12" fill="none">
                    <path d="M1 6h12M8 1l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </span>
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

const FAQ_ITEMS = [
  { q: '小規模な会社ですが依頼できますか？', a: 'はい、私たちが最も得意としているのは、まさにそのフェーズの企業様です。少人数で意思決定が速い分、過不足のない設計と適切な投資をご一緒に検討できます。' },
  { q: '制作費用の目安を教えてください。', a: 'コーポレートサイトで20万円〜、LPで5万円〜、ECサイトで30万円〜が目安です。要件によって変動しますので、初回ご相談時に概算と内訳をお出しします。' },
  { q: '制作期間はどれくらいかかりますか？', a: 'ヒアリングから公開まで、コーポレートサイトで1〜3ヶ月、LPで4〜6週間が標準です。スピード優先のご相談にも個別対応しています。' },
  { q: '公開後の運用や保守もお願いできますか？', a: 'はい、月額保守プラン（月2万円〜）と、改善運用プラン（月10万円〜）をご用意しています。CMS更新代行から、改善提案、AB検証まで対応可能です。' },
  { q: '既存サイトのリニューアルだけでもお願いできますか？', a: 'はい、リニューアル案件は私たちの得意領域です。現状サイトの分析と棚卸しから着手し、移行と公開、SEO引き継ぎまで責任を持って実施します。' },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <div className="faq">
      {FAQ_ITEMS.map((it, i) => (
        <div key={i} className={`faq__item ${open === i ? 'is-open' : ''}`}>
          <button
            className="faq__head"
            onClick={() => setOpen(open === i ? -1 : i)}
            aria-expanded={open === i}
          >
            <span className="faq__q-num">Q{String(i + 1).padStart(2, '0')}</span>
            <span className="faq__q-text">{it.q}</span>
            <span className="faq__icon" aria-hidden="true" />
          </button>
          <div className="faq__body">
            <div>
              <p>{it.a}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Home });