/* global React, ReactDOM, HeroDemo, FeatureTabs, FeatureSimulator, FeaturePage, PreviewSection, TweaksPanel, useTweaks, TweakSection, TweakRadio */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split"
} /*EDITMODE-END*/;

// ---------- Site Header ----------
function Header() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`site ${scrolled ? 'scrolled' : ''}`}>
      <div className="container header-inner">
        <a href="#top" className="brand">
          <span className="brand-mark">
            <svg viewBox="0 0 26 26" width="26" height="26" fill="none">
              <circle cx="13" cy="13" r="12" stroke="#1a1816" strokeWidth="1.4" />
              <path d="M8 8 H18 M8 13 H15 M8 18 H12" stroke="#1a1816" strokeWidth="1.4" strokeLinecap="round" />
            </svg>
          </span>
          <span className="brand-text">
            ftool
            <span className="brand-tag">不動産賃貸向け 営業資料生成AIツール</span>
          </span>
        </a>
        <nav className="primary">
          <a href="#features" className="hide-sm">機能</a>
          <a href="#pricing" className="hide-sm">料金</a>
          <a href="#steps" className="hide-sm">導入の流れ</a>
          <a href="https://www.ftool.online/login" className="nav-login" target="_blank" rel="noopener">ログイン</a>
          <a href="https://www.ftool.online/signup" className="nav-cta" target="_blank" rel="noopener">無料で試す</a>
        </nav>
      </div>
    </header>);

}

// ---------- Hero ----------
function Hero({ layout }) {
  return (
    <section id="top" className="hero" data-layout={layout}>
      <div className="hero-bg">
        <div className="shape s1"></div>
        <div className="shape s2"></div>
        <div className="shape line-1"></div>
      </div>
      <div className="container">
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="eyebrow">
              <span>For 街の不動産仲介店</span>
            </div>
            <div style={{ marginBottom: 28 }}>
              <span className="beta-pill">
                <span className="dot"></span>
                オープンベータ ・ 先行ユーザー募集中
              </span>
            </div>
            <h1 className="hero-title">
              マイソクを<em>アップするだけ</em>で、<br />
              お客様向けの物件ページが<br />
              できあがる。
            </h1>
            <p className="hero-sub">PDFや画像のマイソクをアップロードすると、LINEやメールでそのまま送れる物件紹介ページが自動で生成されます。AIによる情報の作り変えはしません。原本そのままを、見やすく。

            </p>
            <div className="cta-row">
              <a href="https://www.ftool.online/signup" className="btn-primary" target="_blank" rel="noopener">
                14日間無料で試す
                <span className="arrow">→</span>
              </a>
            </div>
            <div className="hero-fine">
              <svg className="check" viewBox="0 0 14 14" fill="none">
                <path d="M3 7.5L6 10.5L11 4.5" stroke="oklch(0.62 0.13 50)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              クレジットカード不要 ・ いつでも解約可能
            </div>
          </div>
          <HeroDemo />
        </div>
      </div>
    </section>);

}

// ---------- 3 Steps ----------
function Steps() {
  const steps = [
  {
    n: '01',
    title: 'マイソクをアップ',
    desc: 'PDFや画像をドラッグ&ドロップ。物件名や住所も、マイソクから自動で読み取ります。',
    icon:
    <svg className="step-icon" viewBox="0 0 28 28" fill="none">
          <path d="M14 4V18M14 4L9 9M14 4L19 9M5 22H23" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
        </svg>

  },
  {
    n: '02',
    title: '公開ページが生成',
    desc: 'マイソク原本 + 基本情報 + 地図 + 初期費用 + LINE導線。9つのセクションで構成。',
    icon:
    <svg className="step-icon" viewBox="0 0 28 28" fill="none">
          <rect x="5" y="5" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.4" />
          <path d="M5 10H23M9 14H19M9 18H15" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
        </svg>

  },
  {
    n: '03',
    title: 'URLをLINEで共有',
    desc: 'できあがったURLをコピーしてLINEで送るだけ。お客様はスマホですぐに開けます。',
    icon:
    <svg className="step-icon" viewBox="0 0 28 28" fill="none">
          <path d="M11 17L17 11M11 11L17 11L17 17" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
          <circle cx="14" cy="14" r="10" stroke="currentColor" strokeWidth="1.4" />
        </svg>

  }];

  return (
    <section id="steps" className="block">
      <div className="container">
        <div className="section-header center">
          <span className="section-eyebrow">How it works</span>
          <h2 className="section-title reveal">3ステップで、もう公開できる。</h2>
          <p className="section-lead reveal delay-1">
            複雑な入力フォームも、テンプレート設定も不要。マイソク 1 枚あればはじめられます。
          </p>
        </div>
        <div className="steps-grid">
          {steps.map((s, i) =>
          <div key={i} className={`step reveal delay-${i}`}>
              <div className="step-num">{s.icon}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- Features ----------
function Features() {
  return (
    <section id="features" className="block">
      <div className="container">
        <div className="section-header">
          <span className="section-eyebrow">Features</span>
          <h2 className="section-title reveal">仲介現場の<br />「あったらいいな」を、ぜんぶ。</h2>
        </div>
        <div className="features-stack">
          <div className="feature-row reveal">
            <div className="feature-text">
              <span className="tag">01 ・ 自動生成される公開ページ</span>
              <h3>マイソクを、お客様が迷わず読めるページに。</h3>
              <p>LINEで送ったPDFが「開けない」「読みにくい」と思われる悩みを解消。物件名・住所・賃料・地図・初期費用・LINE問い合わせまで、9つのセクションが整って自動で生成されます。

              </p>
              <ul>
                <li>マイソク原本もそのまま掲載(信頼性優先)</li>
                <li>スマホで開きやすいレイアウト</li>
                <li>地図ピンは物件名+住所で正確に</li>
              </ul>
            </div>
            <FeaturePage />
          </div>

          <div className="feature-row reverse reveal">
            <div className="feature-text">
              <span className="tag">02 ・ 顧客別 提案資料</span>
              <h3>1人のお客様に、1つのURL。</h3>
              <p>
                ダッシュボードで物件にチェックを入れて「提案資料へ追加」。複数物件をタブで切り替えて見られる比較ページが、お客様ごとに作れます。
              </p>
              <ul>
                <li>タブ式で物件をスムーズに見比べ</li>
                <li>顧客名は管理画面のみ(プライバシー配慮)</li>
                <li>LINEで送るボタンも自動でついてくる</li>
              </ul>
            </div>
            <FeatureTabs />
          </div>

          <div className="feature-row reveal">
            <div className="feature-text">
              <span className="tag">03 ・ 初期費用の自動計算</span>
              <h3>入居時の概算費用を、自動で生成。</h3>
              <p>
                敷金・礼金・仲介手数料・鍵交換費・保証会社料は、店舗設定で一度決めておけば各物件に自動反映。日割賃料も15日換算で目安が出るので、入居時の合計金額がページ上で一目で確認できます。
              </p>
              <ul>
                <li>料率は管理画面から店舗ごとに設定 → 全物件に反映</li>
                <li>賃料・管理費からの自動計算で入力ミスゼロ</li>
                <li>合計金額を明示することで、見積もり依頼の手間も削減</li>
              </ul>
            </div>
            <FeatureSimulator />
          </div>
        </div>

        <div style={{ textAlign: 'center', marginTop: 56 }}>
          <a href="https://www.ftool.online/signup" className="btn-primary" target="_blank" rel="noopener">
            14日間無料で試す
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>);

}

// ---------- Pricing ----------
function Pricing() {
  return (
    <section id="pricing" className="block">
      <div className="container">
        <div className="section-header center">
          <span className="section-eyebrow">Pricing</span>
          <h2 className="section-title reveal">わかりやすい、1プラン。</h2>
          <p className="section-lead reveal delay-1">
            複雑な機能制限やオプション課金はありません。<br />必要なものは、すべて含まれています。
          </p>
        </div>
        <div className="pricing-card reveal">
          <span className="pricing-tag">Standard</span>
          <div className="pricing-amount">
            <span className="currency">¥</span>
            <span className="value">10,000</span>
            <span className="unit">/月 ・ 店舗</span>
          </div>
          <p className="pricing-note">税込 ・ 物件数の上限なし</p>
          <div className="pricing-beta">
            <strong>いまならオープンベータ期間中につき無料</strong>
          </div>
          <ul className="pricing-list">
            <li>物件公開ページの登録・公開 無制限</li>
            <li>顧客別 提案資料の作成 無制限</li>
            <li>LINE 連携(問い合わせ + 共有)</li>
            <li>初期費用シミュレーター + マップ表示</li>
            <li>マイソク原本のホスティング</li>
          </ul>
          <a href="https://www.ftool.online/signup" className="btn-primary" target="_blank" rel="noopener" style={{ background: 'var(--ink)', color: 'var(--bg)' }}>
            14日間無料で試す
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>);

}

// ---------- FAQ ----------
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
  {
    q: 'ベータ期間後の料金はどうなりますか?',
    a: '正式リリース後は月額 ¥10,000(税込)/店舗 を予定しています。ベータ期間中にご登録いただいた店舗には、有料化前に十分な猶予期間とご案内をお送りします。突然課金が始まることはありません。'
  },
  {
    q: '解約はいつでもできますか?',
    a: 'はい、いつでも解約できます。最低利用期間や違約金はありません。管理画面から数クリックで解約手続きが完了します。'
  },
  {
    q: 'セキュリティや個人情報の扱いは?',
    a: 'すべての通信は HTTPS で暗号化、データは Supabase (Postgres) 上に安全に保管されます。お客様の個人情報や物件情報は弊社が責任を持って管理し、第三者への提供は行いません。'
  },
  {
    q: 'どんなファイル形式に対応していますか?',
    a: 'マイソクは PDF / JPG / PNG / HEIC に対応しています。複数枚のアップロードもそのままできます。スマホで撮影したマイソク写真もそのまま使えます。'
  }];

  return (
    <section id="faq" className="block">
      <div className="container">
        <div className="section-header center">
          <span className="section-eyebrow">FAQ</span>
          <h2 className="section-title reveal">よくあるご質問</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) =>
          <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-toggle">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <path d="M6 1V11M1 6H11" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
                  </svg>
                </span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{it.a}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- CTA banner ----------
function CtaBanner() {
  return (
    <section id="signup" className="cta-banner">
      <svg className="cta-banner-bg" viewBox="0 0 1200 400" preserveAspectRatio="xMidYMid slice">
        <circle cx="200" cy="100" r="80" stroke="white" strokeWidth="0.5" fill="none" />
        <circle cx="1000" cy="300" r="120" stroke="white" strokeWidth="0.5" fill="none" />
        <line x1="0" y1="200" x2="1200" y2="200" stroke="white" strokeWidth="0.3" />
        <line x1="600" y1="0" x2="600" y2="400" stroke="white" strokeWidth="0.3" />
      </svg>
      <div className="container">
        <h2>マイソクが、そのまま<br />お客様に届くページに変わる。</h2>
        <p>14日間、すべての機能を無料でお試しいただけます。</p>
        <a href="https://www.ftool.online/signup" className="btn-primary" target="_blank" rel="noopener">
          無料で試してみる
          <span className="arrow">→</span>
        </a>
      </div>
    </section>);

}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="site">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="brand">
              <span className="brand-mark">
                <svg viewBox="0 0 26 26" width="26" height="26" fill="none">
                  <circle cx="13" cy="13" r="12" stroke="#1a1816" strokeWidth="1.4" />
                  <path d="M8 8 H18 M8 13 H15 M8 18 H12" stroke="#1a1816" strokeWidth="1.4" strokeLinecap="round" />
                </svg>
              </span>
              <span className="brand-text">
                ftool
                <span className="brand-tag">不動産賃貸向け 営業資料生成AIツール</span>
              </span>
            </div>
            <p>マイソクをアップするだけで、お客様向けの物件紹介ページが自動で生成されるSaaS。原本そのままを、お客様に。</p>
          </div>
          <div className="footer-col">
            <h4>Product</h4>
            <ul>
              <li><a href="#features">機能</a></li>
              <li><a href="#pricing">料金</a></li>
              <li><a href="#steps">導入の流れ</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <ul>
              <li><a href="#">合同会社MONDISM</a></li>
              <li><a href="#">お問い合わせ</a></li>
              <li><a href="#">特定商取引法表記</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Legal</h4>
            <ul>
              <li><a href="#">利用規約</a></li>
              <li><a href="#">プライバシーポリシー</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 合同会社MONDISM</span>
          <span>ftool.online</span>
        </div>
      </div>
    </footer>);

}

// ---------- App ----------
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero layout={t.heroLayout} />
        <Steps />
        <Features />
        <PreviewSection />
        <Pricing />
        <FAQ />
        <CtaBanner />
      </main>
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero レイアウト">
          <TweakRadio
            label="レイアウト"
            value={t.heroLayout}
            options={[
            { value: 'split', label: 'スプリット' },
            { value: 'center', label: 'センター' },
            { value: 'stacked', label: '縦並び' }]
            }
            onChange={(v) => setTweak('heroLayout', v)} />
          
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>);

}

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