// site.jsx — MON-AI サイト本体 (7 セクション + 予約ウィジェット + Tweaks)

const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "shadowStyle": "swarm",
  "tone": "cool"
} /*EDITMODE-END*/;

// ─── スマホシェル(自前)─────────────────────────────────────
// ─── スクロールコンテナ
function PageScroller({ children, scrollRef }) {
  return (
    <div className="page" ref={scrollRef}>
      <div className="page-column">
        {children}
      </div>
    </div>);

}

// ─── 予約ウィジェット ───────────────────────────────────────
function BookingWidget() {
  const [step, setStep] = useState('date');
  const [date, setDate] = useState(null);
  const [time, setTime] = useState(null);
  const [form, setForm] = useState({ name: '', email: '', note: '' });

  const today = new Date(2026, 4, 28);
  const days = useMemo(() => {
    const out = [];
    for (let i = 1; i <= 14; i++) {
      const d = new Date(today);
      d.setDate(d.getDate() + i);
      out.push(d);
    }
    return out;
  }, []);
  const slots = ['10:00', '11:00', '13:00', '14:00', '15:00', '16:00', '17:00', '19:00', '20:00'];
  const dayNames = ['日', '月', '火', '水', '木', '金', '土'];

  const reset = () => {setStep('date');setDate(null);setTime(null);setForm({ name: '', email: '', note: '' });};

  if (step === 'done') {
    return (
      <div className="bk-done">
        <div className="bk-mark">
          <svg width="32" height="32" viewBox="0 0 32 32"><path d="M6 16l7 7L26 9" stroke="#0A0A0A" strokeWidth="1" fill="none" /></svg>
        </div>
        <h3 className="bk-done-title">受け取りました</h3>
        <p className="bk-done-detail">
          {date.getMonth() + 1}月{date.getDate()}日 ({dayNames[date.getDay()]}) {time}<span className="muted-thin"> – {(parseInt(time) + 1).toString().padStart(2, '0')}:00</span>
        </p>
        <p className="bk-done-foot">招待メールを送ります。<br />お会いできるのを。</p>
        <button className="bk-reset" onClick={reset}>もう一度確かめる</button>
      </div>);

  }

  return (
    <div className="bk">
      <div className="bk-meta">
        <span>60 min</span><i>·</i><span>free</span><i>·</i><span>Zoom</span>
      </div>

      <div className="bk-progress">
        <span className={`bk-p ${step === 'date' ? 'active' : ''} ${date ? 'done' : ''}`}><em>01</em>日付</span>
        <span className="bk-arrow">─</span>
        <span className={`bk-p ${step === 'time' ? 'active' : ''} ${time ? 'done' : ''}`}><em>02</em>時間</span>
        <span className="bk-arrow">─</span>
        <span className={`bk-p ${step === 'confirm' ? 'active' : ''}`}><em>03</em>確認</span>
      </div>

      {step === 'date' &&
      <div className="bk-cal">
          {days.map((d, i) => {
          const isSun = d.getDay() === 0;
          return (
            <button key={i} className={`bk-day ${isSun ? 'sun' : ''}`}
            onClick={() => {setDate(d);setStep('time');}}>
                <div className="bk-day-num">{d.getDate()}</div>
                <div className="bk-day-w">{dayNames[d.getDay()]}</div>
              </button>);

        })}
        </div>
      }

      {step === 'time' &&
      <div className="bk-times">
          <div className="bk-times-h">
            <span>{date.getMonth() + 1}月{date.getDate()}日 ({dayNames[date.getDay()]})</span>
            <button className="bk-back" onClick={() => {setDate(null);setStep('date');}}>← 日を変える</button>
          </div>
          <div className="bk-slots">
            {slots.map((s) =>
          <button key={s} className="bk-slot" onClick={() => {setTime(s);setStep('confirm');}}>{s}</button>
          )}
          </div>
        </div>
      }

      {step === 'confirm' &&
      <div className="bk-confirm">
          <div className="bk-conf-row">
            <span className="bk-label">日時</span>
            <span className="bk-val">{date.getMonth() + 1}月{date.getDate()}日 ({dayNames[date.getDay()]}) {time}〜</span>
          </div>
          <div className="bk-conf-row">
            <span className="bk-label">場所</span>
            <span className="bk-val">Zoom <span className="muted-thin">(URL は予約後)</span></span>
          </div>
          <input className="bk-input" placeholder="お名前"
        value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
          <input className="bk-input" placeholder="メール" type="email"
        value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
          <textarea className="bk-input bk-textarea" rows="3"
        placeholder="いま、いちばん重い荷物を一行で(任意)"
        value={form.note} onChange={(e) => setForm({ ...form, note: e.target.value })} />
          <button className="bk-submit" onClick={() => setStep('done')}>
            予約を確定する
            <span className="bk-submit-ar">→</span>
          </button>
          <p className="bk-fineprint">本番ではこの位置に Google / Zoom Scheduler を埋め込み。</p>
        </div>
      }
    </div>);

}

// ─── セクション番号 ─────────────────────────────────────────
function SecNum({ n }) {
  return <div className="sec-num">— {n.toString().padStart(2, '0')}</div>;
}

// ─── メイン ─────────────────────────────────────────────────
function App() {
  // 本番定数 ― Tweaks パネルは非表示
  const tweaks = { shadowStyle: 'swarm', tone: 'cool' };
  const [seed] = useState(() => Math.floor(Math.random() * 99999) + 1);
  const scrollRef = useRef(null);
  const progress = useScrollProgress(scrollRef);

  const ShadowEntry = window.Shadows[tweaks.shadowStyle] || window.Shadows.sumi;
  const Shadow = ShadowEntry.Component;

  // tone 切替 → CSS 変数
  useEffect(() => {
    const root = document.documentElement;
    if (tweaks.tone === 'warm') {
      root.style.setProperty('--paper', '#FAFAF6');
      root.style.setProperty('--ink', '#0A0908');
    } else if (tweaks.tone === 'cool') {
      root.style.setProperty('--paper', '#F8FAFB');
      root.style.setProperty('--ink', '#0A0A0C');
    } else {
      root.style.setProperty('--paper', '#FFFFFF');
      root.style.setProperty('--ink', '#0A0A0A');
    }
  }, [tweaks.tone]);

  return (
    <PageScroller scrollRef={scrollRef}>
      {/* sticky shadow layer */}
        <div className="shadow-sticky">
          <div className="shadow-inner">
            <Shadow seed={seed} progress={progress} />
          </div>
        </div>

        <main className="content">
          {/* 01 入口 */}
          <section className="section sec-01" data-screen-label="01 入口">
            <div className="entrance-inner">
              <div className="entrance-tag">
                <span>M</span>
                <span>·</span>
                <span>O</span>
                <span>·</span>
                <span>N</span>
                <span className="entrance-hyphen">-</span>
                <span>A</span>
                <span>·</span>
                <span>i</span>
              </div>
              <div className="entrance-spacer" />
              <div className="entrance-hint">
                <span className="hint-line" />
                <span>scroll</span>
              </div>
            </div>
          </section>

          {/* 02 名乗り */}
          <section className="section sec-02" data-screen-label="02 名乗り">
            <SecNum n={2} />
            <div className="naming">
              <h1 className="brand-vert" data-comment-anchor="brand-mark">紋</h1>
              <div className="brand-roman">MON&nbsp;-&nbsp;Ai</div>
              <div className="brand-rule" />
              <div className="brand-meta">
                <div className="brand-meta-line">藤本 亮志</div>
                <div className="brand-meta-line brand-role">AI ソロプレナー</div>
              </div>
              <p className="brand-foot">影を仕立てる仕事をしています。

              </p>
            </div>
          </section>

          {/* 03 考え方 */}
          <section className="section sec-03" data-screen-label="03 考え方">
            <SecNum n={3} />
            <div className="poem" data-comment-anchor="poem">
              <p className="poem-line">会社は、たぶん、</p>
              <p className="poem-line">半分の重さで、動ける。</p>
              <p className="poem-line poem-pause">　</p>
              <p className="poem-line">残りの半分は、</p>
              <p className="poem-line">影が、背負える。</p>
              <p className="poem-line poem-pause">　</p>
              <p className="poem-line">AI は魔法ではなく、</p>
              <p className="poem-line">よく訓練された影だ。</p>
              <p className="poem-line poem-pause">　</p>
              <p className="poem-line poem-sign">
                MONはAIで影を作って差し上げます。
              </p>
            </div>
          </section>

          {/* 04 作品 */}
          <section className="section sec-04" data-screen-label="04 作品">
            <SecNum n={4} />
            <h2 className="sec-h-vert">作品</h2>

            <article className="work">
              <a className="work-link" href="https://lin.ee/VkhWMGS" target="_blank" rel="noreferrer">
                <div className="work-art work-art-tsuki">
                  <img src="assets/work-tsuki.png" alt="TSUKI" />
                </div>
                <div className="work-meta">
                  <div className="work-tag">作品 01 — AI 秘書</div>
                  <h3 className="work-title">TSUKI</h3>
                  <p className="work-line">LINE で話せる 24 時間生きている 未来型キャバ嬢。</p>
                  <div className="work-cta">LINE で友だち追加 <span>→</span></div>
                </div>
              </a>
            </article>

            <article className="work">
              <a className="work-link" href="https://lp.ftool.online/" target="_blank" rel="noreferrer">
                <div className="work-art">
                  <img src="assets/work-ftool.png" alt="ftool" className="work-img-ftool" />
                </div>
                <div className="work-meta">
                  <div className="work-tag">作品 02 — SaaS</div>
                  <h3 className="work-title">ftool</h3>
                  <p className="work-line">不動産賃貸事業者のための、営業支援 SaaS。</p>
                  <div className="work-cta">lp.ftool.online <span>→</span></div>
                </div>
              </a>
            </article>

            <article className="work">
              <a className="work-link" href="https://www.amazon.co.jp/stores/author/B0H33QX7QW" target="_blank" rel="noreferrer">
                <div className="books-stage">
                  <img src="assets/book-naguraryo.png" alt="AI に殴られよ" />
                  <img src="assets/book-187.png" alt="AI に負けた男の" />
                  <img src="assets/book-kyaba.png" alt="令和のキャバ力" />
                  <img src="assets/book-barnum.png" alt="バーナムスキル" />
                </div>
                <div className="work-meta">
                  <div className="work-tag">作品 03 — 著書 四冊</div>
                  <h3 className="work-title">書いて、確かめた。</h3>
                  <p className="work-line">AI と、言葉と、人のかたち。</p>
                  <div className="work-cta">Amazon で読む <span>→</span></div>
                </div>
              </a>
            </article>
          </section>

          {/* 05 相談 */}
          <section className="section sec-05" data-screen-label="05 相談">
            <SecNum n={5} />
            <h2 className="sec-h-vert">相談</h2>

            <div className="consult-card">
              <div className="consult-tagline">
                <span>45min</span><i>·</i><span>無料</span><i>·</i><span>Zoom</span>
              </div>
              <p className="consult-lead">
                あなたの会社の、<br />
                影になります。
              </p>
              <p className="consult-body">
                AI で何ができるか、ではなく、<br />
                何を、もう、やめられるか。<br />
                そこから話します。
              </p>
            </div>

            <div className="ladder">
              <div className="ladder-h">— Aiはコスパ良くないと意味がない</div>
              <div className="ladder-step">
                <div className="ladder-line"><span>MONの人件費</span><span>¥5,000~ / 1時間</span></div>
                <div className="ladder-sub">やれることは一緒に相談しましょう</div>
              </div>
              <div className="ladder-step">
                <div className="ladder-line"><span>相談とか会話とか雑談とか</span><span>¥0 / 初回45分</span></div>
                <div className="ladder-sub">雑談から大体のものは生まれる</div>
              </div>
            </div>

          </section>

          {/* 06 予約 */}
          <section className="section sec-06" id="yoyaku" data-screen-label="06 予約">
            <SecNum n={6} />
            <h2 className="sec-h-vert">予約</h2>
            <div className="yoyaku-card">
              <div className="bk-meta">
                <span>45 min</span><i>·</i><span>無料</span><i>·</i><span>Zoom</span>
              </div>
              <p className="yoyaku-lead">
                あなたの会社の、<br />
                影になります。
              </p>
              <p className="yoyaku-sub">
                予約ページで、都合のよい時間をひとつ選んでください。
              </p>
              <a className="yoyaku-cta" href="https://scheduler.zoom.us/o73lnmlvznr5ooofxiq6y4cva0/-mtg" target="_blank" rel="noreferrer">
                <span>Zoom で予約する</span>
                <span className="yoyaku-cta-ar">↗</span>
              </a>
              <p className="yoyaku-fine">scheduler.zoom.us</p>
            </div>
          </section>

          {/* 07 フッター */}
          <section className="section sec-07" data-screen-label="07 フッター">
            <footer className="footer">
              <div className="foot-mark">紋</div>
              <div className="foot-brand">MON&nbsp;-&nbsp;Ai</div>

              <div className="foot-rule" />

              <div className="foot-row">
                <span className="foot-k">Mail</span>
                <a href="mailto:fujimoto@mon-ai.jp">fujimoto@mon-ai.jp</a>
              </div>
              <div className="foot-row">
                <span className="foot-k">Web</span>
                <span>mon-ai.jp</span>
              </div>

              <div className="foot-copy">© 2026 MON - Ai / 藤本 亮志</div>
            </footer>
          </section>
        </main>
    </PageScroller>);

}

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