// 見てからweb — Hi-fi Design: Header + Sections 01–09

// ──────────────── HEADER ────────────────
const DxHeader = ({ device }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const navLinks = [
    { href: '#service', label: 'サービス' },
    { href: '#free-production', label: '無料制作' },
    { href: '#flow', label: '流れ' },
    { href: '#why-choose', label: '選ばれる理由' },
    { href: '#pricing', label: '料金' },
    { href: '#faq', label: 'FAQ' },
  ];
  const closeMenu = () => setMenuOpen(false);
  const handleMobileNavClick = (event, href) => {
    event.preventDefault();
    closeMenu();
    window.setTimeout(() => {
      const target = document.querySelector(href);
      if (!target) return;
      const y = target.getBoundingClientRect().top + window.scrollY - 70;
      window.scrollTo({ top: y, behavior: 'auto' });
      window.history.pushState(null, '', href);
    }, 80);
  };

  return (
    <header className={`dx-header ${menuOpen ? 'is-menu-open' : ''}`}>
      <a
        className="dx-logo"
        href="#"
        aria-label="ページ上部へ戻る"
        onClick={(e) => {
          e.preventDefault();
          closeMenu();
          window.scrollTo({ top: 0, behavior: 'auto' });
          window.history.pushState(null, '', window.location.pathname + window.location.search);
        }}
      >
        <img className="dx-logo-img" src="assets/logo.png?v=20260528-6" alt="見てからweb" width="1440" height="300" />
      </a>
      {device === 'pc' && (
        <nav className="dx-nav">
          {navLinks.map((link) => (
            <a key={link.href} href={link.href}>{link.label}</a>
          ))}
        </nav>
      )}
      <div className="dx-header-cta">
        {device === 'pc' && (
          <a className="dx-btn dx-header-free" href="#apply">
            フォームで相談
          </a>
        )}
        <a className="dx-btn primary dx-header-line" href={window.MITEKARA_LINE_URL} target="_blank" rel="noopener noreferrer" onClick={closeMenu}>
          <span className="icon-line"></span>
          {device === 'pc' ? 'LINEで相談' : '相談'}
        </a>
        {device === 'mobile' && (
          <button
            className="dx-btn dx-menu-btn"
            type="button"
            aria-label="ページ内メニュー"
            aria-controls="mobile-nav"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((open) => !open)}
          >
            <span aria-hidden="true">{menuOpen ? '×' : '≡'}</span>
          </button>
        )}
      </div>
      {device === 'mobile' && (
        <nav id="mobile-nav" className="dx-mobile-nav" aria-label="ページ内メニュー" hidden={!menuOpen}>
          {navLinks.map((link) => (
            <a key={link.href} href={link.href} onClick={(event) => handleMobileNavClick(event, link.href)}>{link.label}</a>
          ))}
        </nav>
      )}
    </header>
  );
};

// ──────────────── 01 HERO ────────────────
const HERO_PROPOSALS = [
  { src: 'assets/proposal-a.png', label: 'A案' },
  { src: 'assets/proposal-b.png', label: 'B案' },
  { src: 'assets/proposal-c.png', label: 'C案' },
];

const DxHero = ({ device }) => {
  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const touchX = React.useRef(null);
  const count = HERO_PROPOSALS.length;

  React.useEffect(() => {
    if (paused) return undefined;
    const id = window.setInterval(() => setActive((i) => (i + 1) % count), 3800);
    return () => window.clearInterval(id);
  }, [paused, count]);

  const go = (i) => setActive((i + count) % count);
  const onTouchStart = (e) => { touchX.current = e.touches[0].clientX; setPaused(true); };
  const onTouchEnd = (e) => {
    if (touchX.current != null) {
      const dx = e.changedTouches[0].clientX - touchX.current;
      if (Math.abs(dx) > 40) go(active + (dx < 0 ? 1 : -1));
    }
    touchX.current = null;
    setPaused(false);
  };

  return (
  <section className="dx-section dx-hero" style={{padding: device === 'pc' ? '48px 80px 100px' : undefined}}>
    <div className="dx-inner">
      <div className="dx-hero-grid">
        <div className="dx-hero-copy">
          <h1>
            <span className="small">トップページを、</span>
            まず<span className="free">無料</span>で<br/>
            お作りします。
          </h1>
          <div className="dx-hero-body">
          <p className="dx-hero-lead">
            「見てからweb」は、契約前に動くトップページを制作し、<br/>
            実際の見た目を確認してから判断できるホームページ制作サービスです。<br/>
            気に入った場合のみ、全ページ制作へ。制作費は別途いただきません。
          </p>
          <p className="dx-hero-note">
            トップページのデザイン確認まで無料です。全ページ制作に進む場合のみ、選んだプランの初回3ヶ月分をお支払いいただきます。
          </p>
          <div className="dx-hero-cta">
            <a className="dx-btn primary lg" href={window.MITEKARA_LINE_URL} target="_blank" rel="noopener noreferrer">
              <span className="icon-line"></span>
              LINEで相談
              <span className="arrow">→</span>
            </a>
            <a className="dx-btn lg" href="#apply">フォームで相談</a>
          </div>
          <div className="dx-hero-trust">
            <div className="ti">
              <span className="label">トップページ制作</span>
              <span className="val"><span className="red">無料</span></span>
            </div>
            <div className="ti">
              <span className="label">制作費（別途）</span>
              <span className="val">0<span className="yen">円</span></span>
            </div>
            <div className="ti">
              <span className="label">月額</span>
              <span className="val">9,900<span className="yen">円〜</span></span>
            </div>
          </div>
          </div>
        </div>
        <div className="dx-hero-visual">
          <div className="stamp-pos">
            <div className="dx-stamp">
              <span className="big">無料</span>
              <span className="sm">デザイン確認</span>
            </div>
          </div>
          <div
            className="dx-browser"
            onTouchStart={onTouchStart}
            onTouchEnd={onTouchEnd}
            onMouseEnter={() => setPaused(true)}
            onMouseLeave={() => setPaused(false)}
          >
            <div className="chrome">
              <span className="dot"></span>
              <span className="dot"></span>
              <span className="dot"></span>
              <span className="url">https://your-company.example.co.jp</span>
            </div>
            <div className="body">
              {HERO_PROPOSALS.map((p, i) => (
                <img
                  key={p.label}
                  src={p.src}
                  alt={`トップページ案 ${p.label}`}
                  className={`dx-hero-slide ${i === active ? 'is-active' : ''}`}
                  aria-hidden={i === active ? 'false' : 'true'}
                />
              ))}
            </div>
          </div>
          <div className="dx-hero-tabs">
            {HERO_PROPOSALS.map((p, i) => (
              <button
                key={p.label}
                type="button"
                className={`tab ${i === active ? 'active' : ''}`}
                aria-label={`${p.label}を表示`}
                aria-pressed={i === active}
                onClick={() => go(i)}
              >
                {p.label}
              </button>
            ))}
          </div>
          <div className="annot">トップページを最大3案を無料でご提案。</div>
        </div>
      </div>
    </div>
  </section>
  );
};

// ──────────────── 02 PROBLEM ────────────────
const DxProblem = () => (
  <section id="service" className="dx-section alt">
    <div className="dx-inner">
      <div className="dx-secnum">
        <span className="num">02</span>
        <span>PROBLEM</span>
        <span className="rule" />
      </div>
      <div className="dx-shead">
        <span className="dx-eyebrow">よくあるHP制作でのご不安</span>
        <h2 className="dx-h2">
          完成まで<span className="accent">デザインが分からない</span>。
        </h2>
        <p className="dx-sub">
          ホームページ制作は、契約してから作り始めることが多くあります。<br/>
          そのため、完成するまで雰囲気が分からず、不安を感じる企業様も少なくありません。
        </p>
      </div>
      <div className="dx-problem-grid">
        {[
          { t: '思っていたデザインと違ったら…', d: '資料や見積もりだけでは、最終的な見た目を想像しにくいものです。' },
          { t: '契約後に追加費用が増えたら…', d: '最初に聞いていた費用と、実際に必要な費用が変わることがあります。' },
          { t: '作った後に更新できなかったら…', d: '公開後の修正や更新のたびに、依頼や費用が発生する不安があります。' },
        ].map((p, i) => (
          <div className="dx-problem-card" key={i}>
            <span className="tag">{String(i + 1).padStart(2, '0')}</span>
            <div className="qmark">"</div>
            <h4>{p.t}</h4>
            <p>{p.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ──────────────── 03 SOLUTION ────────────────
const DxSolution = () => (
  <section id="free-production" className="dx-section">
    <div className="dx-inner">
      <div className="dx-secnum">
        <span className="num">03</span>
        <span>SOLUTION</span>
        <span className="rule" />
      </div>
      <div className="dx-solution">
        <div className="dx-solution-visual">
          <div className="step-overlay s1">
            <span className="num">STEP — 01</span>
            まず無料で<br/>トップページを制作
          </div>
          <div className="step-overlay s2">
            <span className="num">STEP — 02</span>
            実際の見た目を見て<br/>進めるか判断
          </div>
          <div className="dx-browser" style={{position: 'absolute', inset: 0}}>
            <div className="chrome">
              <span className="dot"></span><span className="dot"></span><span className="dot"></span>
              <span className="url">preview.mite-kara.jp/your-company</span>
            </div>
            <div className="body">
              <img src="assets/proposal-b.png" alt="トップページ案プレビュー" style={{display: 'block', width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center'}} />
            </div>
          </div>
        </div>
        <div>
          <span className="dx-eyebrow">解決策</span>
          <h2 className="dx-h2">
            無料で<span className="accent">トップページを制作</span>
          </h2>
          <p style={{color: 'var(--ink-soft)', margin: '0 0 18px', fontSize: 14.5, lineHeight: 1.95}}>
            いきなり契約をお願いするのではなく、まずは御社向けのトップページを無料で制作します。
            画像だけではなく、<strong style={{color: 'var(--ink)'}}>実際に動くページとして</strong>確認できます。
          </p>
          <p style={{color: 'var(--ink-soft)', margin: 0, fontSize: 14.5, lineHeight: 1.95}}>
            デザイン、文章、見せ方を見たうえで、全ページ制作に進むかどうかを判断できます。
          </p>
          <div className="dx-note">
            <strong>トップページ制作は無料です。</strong><br/>
            全ページ制作に進まない場合、費用はかかりません。
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ──────────────── 04 FEATURE (Before/After process) ────────────────
const DxFeature = () => (
  <section className="dx-section alt">
    <div className="dx-inner">
      <div className="dx-secnum">
        <span className="num">04</span>
        <span>OUR WAY</span>
        <span className="rule" />
      </div>
      <div className="dx-shead">
        <span className="dx-eyebrow">見てからwebの特徴</span>
        <h2 className="dx-h2">
          通常の制作会社とは、<br/>
          <span className="accent">進める順番</span>が違います。
        </h2>
      </div>
      <div className="dx-compare">
        <div className="dx-compare-col">
          <div className="label">BEFORE — 一般的な流れ</div>
          <h3>一般的なホームページ制作</h3>
          <ol>
            <li><span className="n">01</span>営業</li>
            <li><span className="n">02</span>契約</li>
            <li><span className="n">03</span>ヒアリング</li>
            <li><span className="n">04</span>制作</li>
            <li><span className="n">05</span>完成確認</li>
          </ol>
          <p className="footer">▲ 契約後に制作が始まるため、見えないまま進む。</p>
        </div>
        <div className="dx-compare-arrow">⇨</div>
        <div className="dx-compare-col us">
          <div className="label">OUR WAY — 見てからweb</div>
          <h3>見てからweb</h3>
          <ol>
            <li><span className="n">01</span>問い合わせ</li>
            <li className="highlight"><span className="n">02</span>トップページを無料制作</li>
            <li className="highlight"><span className="n">03</span>実際の見た目を確認</li>
            <li><span className="n">04</span>面談で相談</li>
            <li><span className="n">05</span>納得後に全ページ制作</li>
          </ol>
          <p className="footer">◯ まず無料でトップを見てから、契約を判断できる。</p>
        </div>
      </div>
    </div>
  </section>
);

// ──────────────── 05 FREE TOP PAGE ────────────────
const DxFreeContent = () => (
  <section className="dx-section">
    <div className="dx-inner">
      <div className="dx-secnum">
        <span className="num">05</span>
        <span>FREE TOP PAGE</span>
        <span className="rule" />
      </div>
      <div className="dx-shead">
        <span className="dx-eyebrow">無料トップページ制作の内容</span>
        <h2 className="dx-h2">
          無料で<span className="accent">3案</span>のご提案をします。
        </h2>
        <p className="dx-sub">
          既存のホームページ情報をもとに、御社向けのトップページ案を作成します。
          必要な情報は、基本的には現在のホームページURLだけで大丈夫です。
        </p>
      </div>
      <div className="dx-stats">
        {[
          { l: 'トップページ案', v: '3', unit: '案', n: '雰囲気の異なる案をご提案' },
          { l: '打合せ回数', v: '2', unit: '回まで', n: '方向性のすり合わせに' },
          { l: '制作目安', v: '3', unit: '営業日', n: '以内に提出します' },
          { l: '確認方法', v: '面談', unit: 'or Web', n: '画面共有 or 公開許可制' },
        ].map((it, i) => (
          <div className="s" key={i}>
            <span className="num">{String(i + 1).padStart(2, '0')}</span>
            <div className="label">{it.l}</div>
            <div className="val">
              <span className="red">{it.v}</span>
              <span className="small">{it.unit}</span>
            </div>
            <div className="note">{it.n}</div>
          </div>
        ))}
      </div>
      <div className="dx-proposals">
        <div className="dx-prop a">
          <div className="head"><span className="name">A案 — クラシック</span><span>01/03</span></div>
          <div className="preview"></div>
        </div>
        <div className="dx-prop b">
          <div className="head"><span className="name">B案 — モダン</span><span>02/03</span></div>
          <div className="preview"></div>
        </div>
        <div className="dx-prop c">
          <div className="head"><span className="name">C案 — インパクト</span><span>03/03</span></div>
          <div className="preview"></div>
        </div>
      </div>
      <div className="dx-note" style={{maxWidth: 880, margin: '32px auto 0'}}>
        <strong>※ 公開について　</strong>
        制作したトップページ案をWeb上で確認する場合は、事前に公開許可をいただきます。
        公開を希望されない場合は、面談時の画面共有などで確認できます。
      </div>
    </div>
  </section>
);

// ──────────────── 06 FLOW (10 steps) ────────────────
const DxFlow = () => {
  const steps = [
    { t: 'LINE・フォームで無料相談', d: '公式LINEまたは相談フォームから、現在のホームページURLをお送りください。ご要望があれば、あわせてお知らせください。', pay: '無料', tag: 'STEP' },
    { t: '無料トップページ制作', d: '既存サイトの情報をもとに、最大3案のトップページを作成します。', pay: '無料', tag: 'STEP' },
    { t: '面談でレビュー', d: '実際の見た目を確認しながら、方向性や必要なページ数を相談します。', pay: '無料', tag: 'STEP' },
    { t: '全ページ制作に進むか判断', d: '気に入った場合のみ、全ページ制作に進みます。進まない場合、費用はかかりません。', pay: '無料', tag: 'STEP' },
    { t: 'ページ数に応じたプランを決定', d: '1〜2ページ／3〜7ページ／8〜12ページの中から、必要なページ数に合わせて決めます。', pay: '無料', tag: 'STEP' },
    { divider: 'ここから全ページ制作 ／ 初回3ヶ月分のみ先払い' },
    { t: '初回3ヶ月分を先払い', d: '全ページ制作に進む場合のみ、選んだプランの初回3ヶ月分を先払いでお支払いいただきます。', pay: 'お支払い', paid: true, tag: 'PAID' },
    { t: '全ページ制作', d: '決定したページ数に合わせて、ホームページ全体を制作します。', pay: '制作中', paid: true, tag: 'BUILD' },
    { t: 'レビュー・修正', d: '全体を確認いただき、必要な箇所を修正します。', pay: '制作中', paid: true, tag: 'BUILD' },
    { t: '納品・公開', d: '確認後、ホームページを公開します。', pay: '公開', paid: true, tag: 'LAUNCH' },
    { t: '4ヶ月目以降は月額で継続', d: '制作後も、更新・保守を月額で対応します。', pay: '月額', paid: true, tag: 'OPS' },
  ];
  let n = 0;
  return (
    <section id="flow" className="dx-section alt">
      <div className="dx-inner">
        <div className="dx-secnum">
          <span className="num">06</span>
          <span>FLOW</span>
          <span className="rule" />
        </div>
        <div className="dx-shead">
          <span className="dx-eyebrow">ご相談から公開までの流れ</span>
          <h2 className="dx-h2">
            <span className="nb">トップページを見てから、</span><br/>
            <span className="nb"><span className="accent">ページ数を決められます</span>。</span>
          </h2>
        </div>
        <div className="dx-flow">
          {steps.map((s, i) => {
            if (s.divider) {
              return <div className="dx-flow-divider" key={i}>↓ {s.divider}</div>;
            }
            n++;
            return (
              <div key={i} className={`step ${s.paid ? 'paid' : ''}`}>
                <div className="marker">
                  <div className="n">{String(n).padStart(2, '0')}</div>
                  <div className="l">{s.tag}</div>
                </div>
                <div className="body">
                  <h4>{s.t}</h4>
                  <p>{s.d}</p>
                </div>
                <div className="pay">{s.pay}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ──────────────── 08 PRICE THINKING ────────────────
const DxWhyChoose = () => {
  const reasons = [
    {
      n: '01',
      t: '契約前にデザインを確認できる',
      d: '資料や口頭説明だけではなく、実際のトップページ案を見てから判断できます。',
    },
    {
      n: '02',
      t: '初期制作費を抑えて始められる',
      d: '大きな制作費を最初にかけず、月額プランで必要なページ数に合わせて進められます。',
    },
    {
      n: '03',
      t: '中小企業向けに必要な内容を整理できる',
      d: '会社概要、事業内容、採用、お問い合わせなど、何を載せるべきか一緒に整理します。',
    },
  ];
  const fit = [
    '今のホームページが古く見える',
    'スマートフォンで見づらい',
    '問い合わせが少ない',
    '採用ページを整えたい',
    '会社の印象を良くしたい',
    'ドメインやサーバーは今のまま使いたい',
    '大きな制作費はかけにくい',
    'まずはトップページだけ見て判断したい',
  ];
  const notFit = [
    '完全オリジナルの大規模サイトを作りたい',
    '予約、決済、会員機能などを最初から作り込みたい',
    '短期間で大量ページを公開したい',
    'デザイン確認なしで最安だけを重視したい',
  ];

  return (
    <section id="why-choose" className="dx-section">
      <div className="dx-inner">
        <div className="dx-secnum">
          <span className="num">07</span>
          <span>REASON</span>
          <span className="rule" />
        </div>
        <div className="dx-shead">
          <span className="dx-eyebrow">3つの理由</span>
          <h2 className="dx-h2">
            見てからwebが<span className="accent">選ばれる理由</span>
          </h2>
          <p className="dx-sub">
            安さだけではなく、契約前に確認できる安心感と、必要な範囲だけで始められる分かりやすさを大切にしています。
          </p>
        </div>

        <div className="dx-why">
          {reasons.map((r) => (
            <div className="dx-why-card" key={r.n}>
              <span className="n">{r.n}</span>
              <h3>{r.t}</h3>
              <p>{r.d}</p>
            </div>
          ))}
        </div>

        <div className="dx-fit">
          <div className="dx-fit-box good">
            <h3>向いている企業</h3>
            <ul>
              {fit.map((item) => <li key={item}>{item}</li>)}
            </ul>
          </div>
          <div className="dx-fit-box muted">
            <h3>おすすめしにくいケース</h3>
            <ul>
              {notFit.map((item) => <li key={item}>{item}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, {
  DxHeader, DxHero, DxProblem, DxSolution,
  DxFeature, DxFreeContent, DxFlow, DxWhyChoose,
});