import React, { useState, useEffect } from 'react';
import { 
  Zap, 
  ShieldCheck, 
  BarChart3, 
  FileCode, 
  ArrowRight, 
  Clock, 
  CheckCircle2, 
  Search, 
  ChevronRight,
  TrendingUp,
  Cpu,
  Lock,
  ArrowLeft
} from 'lucide-react';

const App = () => {
  const [currentPage, setCurrentPage] = useState('home');
  const [url, setUrl] = useState('');
  const [submitted, setSubmitted] = useState(false);

  // Scroll to top on page change
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [currentPage]);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (url) {
      setSubmitted(true);
    }
  };

  // --- Sub Components ---

  const Navigation = () => (
    <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
        <div 
          className="flex items-center gap-2 cursor-pointer" 
          onClick={() => setCurrentPage('home')}
        >
          <div className="bg-indigo-600 p-1.5 rounded-lg text-white">
            <Cpu className="w-5 h-5" />
          </div>
          <span className="font-bold text-xl tracking-tight">GentleFlow</span>
        </div>
        {currentPage === 'home' && (
          <div className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600">
            <a href="#features" className="hover:text-indigo-600 transition-colors">特徴</a>
            <a href="#report" className="hover:text-indigo-600 transition-colors">無料診断</a>
            <a href="#pricing" className="hover:text-indigo-600 transition-colors">価格</a>
            <a 
              href="#report" 
              className="bg-indigo-600 text-white px-5 py-2 rounded-full hover:bg-indigo-700 transition-all shadow-sm flex items-center justify-center font-bold"
            >
              今すぐ診断
            </a>
          </div>
        )}
        {currentPage !== 'home' && (
          <button 
            onClick={() => setCurrentPage('home')}
            className="text-slate-600 hover:text-indigo-600 font-bold flex items-center gap-2 text-sm"
          >
            <ArrowLeft className="w-4 h-4" />
            トップへ戻る
          </button>
        )}
      </div>
    </nav>
  );

  const Footer = () => (
    <footer className="bg-slate-900 py-20 text-center text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {currentPage === 'home' && (
          <>
            <h2 className="text-3xl md:text-4xl font-bold mb-10 leading-tight">
              まずはURLを送って、レポートを受け取ってください。<br className="hidden md:block" />
              あなたのビジネスの「伸び代」を、数値化してお見せします。
            </h2>
            <a href="#report" className="inline-flex items-center gap-2 bg-indigo-600 text-white px-10 py-5 rounded-full font-bold text-xl hover:bg-indigo-700 transition-all shadow-xl group hover:scale-105 active:scale-95">
              今すぐ無料診断レポートを依頼する
              <ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform" />
            </a>
          </>
        )}
        <div className="mt-20 pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-4 text-slate-500 text-xs">
          <p>© 2026 GentleFlow. All Rights Reserved.</p>
          <div className="flex gap-8">
            <button onClick={() => setCurrentPage('legal')} className="hover:text-white transition-colors">特定商取引法に基づく表記</button>
            <button onClick={() => setCurrentPage('privacy')} className="hover:text-white transition-colors">プライバシーポリシー</button>
          </div>
        </div>
      </div>
    </footer>
  );

  // --- Page Views ---

  const HomeView = () => (
    <>
      {/* Hero Section */}
      <section className="relative pt-20 pb-24 overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center md:text-left">
          <div className="max-w-3xl mx-auto md:mx-0">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-50 border border-indigo-100 text-indigo-700 text-xs font-bold mb-6">
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
              </span>
              2026年最新：LP制作の常識を更新する
            </div>
            <h1 className="text-4xl md:text-6xl font-extrabold leading-[1.1] mb-6 tracking-tight text-slate-900">
              制作待ちの<span className="text-indigo-600">機会損失をゼロ</span>に。<br />
              24時間で実装する、<br />
              次世代の論理的LP戦略。
            </h1>
            <p className="text-lg md:text-xl text-slate-600 mb-10 leading-relaxed">
              独自の「高度な推論アルゴリズム」が、競合と市場を即座に解析。<br />
              制作会社に数週間待たされている間に失っていた利益を、明日から最大化させます。
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center md:justify-start items-center">
              <a href="#report" className="flex items-center justify-center gap-2 bg-indigo-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-indigo-700 hover:-translate-y-0.5 transition-all shadow-lg shadow-indigo-200 group w-full sm:w-auto">
                無料の改善提案レポートを受け取る
                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              </a>
              <div className="flex items-center gap-3 px-6 py-4 text-slate-500 text-sm font-medium">
                <Clock className="w-5 h-5" />
                最短24時間以内のスピード納品
              </div>
            </div>
          </div>
        </div>
        <div className="absolute top-0 right-0 -translate-y-1/4 translate-x-1/4 w-[600px] h-[600px] bg-indigo-50 rounded-full blur-3xl -z-10 opacity-60"></div>
      </section>

      {/* Problem Section */}
      <section className="py-24 bg-white border-y border-slate-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-sm font-bold text-indigo-600 tracking-widest uppercase mb-3">Problem</h2>
            <p className="text-3xl md:text-4xl font-bold text-slate-900 leading-tight">その「3週間の制作待ち」が、<br />本来得られた利益を奪っています。</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                title: "遅すぎる納期",
                desc: "構成案に1週間、デザインに2週間。トレンドは移り変わり、機会は逃げていきます。",
                icon: <Clock className="w-8 h-8 text-rose-500" />
              },
              {
                title: "根拠のない構成",
                desc: "「なんとなく綺麗」なデザインではなく、データに基づいた論理的な導線が必要です。",
                icon: <BarChart3 className="w-8 h-8 text-rose-500" />
              },
              {
                title: "プラットフォーム依存",
                desc: "制作ツールに縛られ、自社資産にならないLP。修正のたびに追加コストが発生していませんか？",
                icon: <Lock className="w-8 h-8 text-rose-500" />
              }
            ].map((item, i) => (
              <div key={i} className="flex flex-col items-center text-center p-10 rounded-3xl bg-slate-50 border border-slate-100 hover:shadow-xl hover:shadow-slate-200/50 transition-all duration-300 group">
                <div className="bg-white w-20 h-20 rounded-2xl flex items-center justify-center shadow-md mb-8 group-hover:scale-110 transition-transform">
                  {item.icon}
                </div>
                <h3 className="text-xl font-bold mb-4">{item.title}</h3>
                <p className="text-slate-600 leading-relaxed text-sm">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* The Bridge (Diagnosis) */}
      <section id="report" className="py-24 bg-slate-900 text-white relative overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div>
              <div className="inline-block px-3 py-1 rounded bg-indigo-500/20 border border-indigo-500/30 text-indigo-300 text-xs font-bold mb-6">
                Decision Support
              </div>
              <h2 className="text-3xl md:text-4xl font-bold mb-6 leading-tight">
                URLを送るだけで、<br />
                「独自の推論エンジン」が<br />
                現状の弱点をレポート化します。
              </h2>
              <p className="text-slate-400 text-lg mb-8 leading-relaxed">
                現在のLP、もしくは競合のURLを入力してください。当社の制作エンジンが現状を解析し、具体的な改善ポイントを提案するレポートを完全無料で送付します。<br /><br />
                <span className="text-white font-bold text-lg">レポートの内容にご納得いただいた場合のみ</span>、制作を開始する安心のフローです。
              </p>
              <ul className="space-y-4">
                {["離脱ポイントの論理的特定", "ヒートマップを予測する動線解析", "訴求力のギャップ分析"].map((text, i) => (
                  <li key={i} className="flex items-center gap-3">
                    <CheckCircle2 className="w-5 h-5 text-indigo-400" />
                    <span className="font-medium">{text}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="bg-white rounded-3xl p-8 lg:p-10 text-slate-900 shadow-2xl">
              <h3 className="text-2xl font-bold mb-2 text-center sm:text-left">無料診断レポートの依頼</h3>
              <p className="text-slate-500 mb-8 text-center sm:text-left text-sm">24時間以内にあなたのメールアドレスへ解析結果をお届けします。</p>
              
              {!submitted ? (
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div>
                    <label className="block text-sm font-bold mb-2 text-slate-700">解析対象URL</label>
                    <div className="relative">
                      <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
                      <input 
                        type="url" 
                        required
                        placeholder="https://your-lp.com"
                        className="w-full pl-12 pr-4 py-4 rounded-xl border border-slate-200 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all outline-none"
                        value={url}
                        onChange={(e) => setUrl(e.target.value)}
                      />
                    </div>
                  </div>
                  <div>
                    <label className="block text-sm font-bold mb-2 text-slate-700">メールアドレス</label>
                    <input 
                      type="email" 
                      required
                      placeholder="sample@company.jp"
                      className="w-full px-4 py-4 rounded-xl border border-slate-200 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all outline-none"
                    />
                  </div>
                  <button type="submit" className="w-full bg-indigo-600 text-white py-5 rounded-xl font-bold text-lg hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-100 flex items-center justify-center gap-2 mt-4">
                    無料診断を申し込む
                    <ChevronRight className="w-5 h-5" />
                  </button>
                  <p className="text-[10px] text-slate-400 text-center mt-4 leading-relaxed">
                    ※診断は1ドメインにつき1回までとなります。解析完了後、自動メールにて結果を送付します。
                  </p>
                </form>
              ) : (
                <div className="py-12 text-center">
                  <div className="w-20 h-20 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-6">
                    <CheckCircle2 className="w-12 h-12" />
                  </div>
                  <h4 className="text-xl font-bold mb-2">受付を完了しました</h4>
                  <p className="text-slate-500">
                    現在、推論エンジンが解析を開始しています。<br />
                    24時間以内にレポートをお送りいたします。
                  </p>
                  <button onClick={() => setSubmitted(false)} className="mt-8 text-indigo-600 font-bold hover:underline">
                    入力を戻す
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
        <div className="absolute inset-0 opacity-10 pointer-events-none" style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, #fff 1px, transparent 0)', backgroundSize: '40px 40px' }}></div>
      </section>

      {/* Benefits Section */}
      <section className="py-24 bg-white" id="features">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-sm font-bold text-indigo-600 tracking-widest uppercase mb-3">Benefits</h2>
            <p className="text-3xl font-bold text-slate-900">資産としてのLP。その価値を最大化します。</p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              {
                title: "24時間以内納品",
                desc: "独自の制作エンジンにより、構成からコード生成までを一貫して高速化。",
                icon: <Zap className="w-8 h-8" />
              },
              {
                title: "ネイティブ構成",
                desc: "各媒体のユーザー行動に合わせた「溶け込む」構成をアルゴリズムが自動算出。",
                icon: <TrendingUp className="w-8 h-8" />
              },
              {
                title: "HTML/CSS一式納品",
                desc: "完全な所有権を譲渡。サーバーやツールに縛られず、自由に管理可能です。",
                icon: <FileCode className="w-8 h-8" />
              },
              {
                title: "論理的最適化",
                desc: "行動心理学に基づいた「迷わせない」導線を、推論エンジンがゼロから構築。",
                icon: <BarChart3 className="w-8 h-8" />
              }
            ].map((item, i) => (
              <div key={i} className="flex flex-col items-center text-center group p-8 hover:bg-slate-50 rounded-3xl transition-all border border-transparent hover:border-slate-100">
                <div className="text-indigo-600 mb-6 bg-indigo-50 w-16 h-16 flex items-center justify-center rounded-2xl group-hover:scale-110 transition-transform">
                  {item.icon}
                </div>
                <h3 className="font-bold mb-4 text-lg">{item.title}</h3>
                <p className="text-sm text-slate-600 leading-relaxed">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section id="pricing" className="py-24 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-sm font-bold text-indigo-600 tracking-widest uppercase mb-3">Pricing</h2>
            <p className="text-3xl font-bold text-slate-900">論理に基づく、明快な価格設定。</p>
            <p className="mt-4 text-slate-600 italic text-sm">※診断レポートにご納得いただいた後、Stripeでの前払いとなります。</p>
          </div>
          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {/* Starter Plan */}
            <div className="bg-white rounded-3xl p-8 border border-slate-200 shadow-sm relative overflow-hidden group hover:shadow-xl transition-all flex flex-col text-center items-center">
              <div className="mb-8">
                <h3 className="text-xl font-bold mb-2">スタータープラン</h3>
                <p className="text-slate-500 text-sm">短期間で1つの訴求をテストしたい方へ</p>
              </div>
              <div className="mb-8 flex items-baseline gap-1">
                <span className="text-5xl font-extrabold tracking-tight">50,000</span>
                <span className="text-slate-500 font-bold">円 (税込)</span>
              </div>
              <ul className="space-y-4 mb-10 flex-grow text-left w-full">
                {["1枚構成のLP制作", "24時間以内納品", "HTML/CSSデータ納品", "基本レスポンシブ対応", "診断レポートに基づく最適化"].map((item, i) => (
                  <li key={i} className="flex items-start gap-3 text-sm">
                    <CheckCircle2 className="w-5 h-5 text-indigo-500 shrink-0" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
              <a 
                href="#report" 
                className="w-full py-4 rounded-xl border-2 border-slate-900 font-bold hover:bg-slate-900 hover:text-white transition-all flex items-center justify-center"
              >
                レポートを確認する
              </a>
            </div>

            {/* Premium Plan */}
            <div className="bg-white rounded-3xl p-8 border-2 border-indigo-600 shadow-xl relative overflow-hidden group flex flex-col text-center items-center">
              <div className="absolute top-0 right-0 bg-indigo-600 text-white px-4 py-1 text-xs font-bold rounded-bl-xl">
                RECOMMENDED
              </div>
              <div className="mb-8">
                <h3 className="text-xl font-bold mb-2">プレミアムプラン</h3>
                <p className="text-slate-500 text-sm">本質的な成約率改善を目指す方へ</p>
              </div>
              <div className="mb-8 flex items-baseline gap-1">
                <span className="text-5xl font-extrabold text-indigo-600 tracking-tight">100,000</span>
                <span className="text-slate-500 font-bold">円 (税込)</span>
              </div>
              <ul className="space-y-4 mb-10 flex-grow text-left w-full">
                {["ロングフォームLP制作", "ABテスト用パターン(2種)提案", "HTML/CSSデータ納品", "完全レスポンシブ", "画像生成アルゴリズムによる最適化素材", "修正3回無料"].map((item, i) => (
                  <li key={i} className="flex items-start gap-3 text-sm">
                    <CheckCircle2 className="w-5 h-5 text-indigo-500 shrink-0" />
                    <span className="font-medium">{item}</span>
                  </li>
                ))}
              </ul>
              <a 
                href="#report" 
                className="w-full py-4 rounded-xl bg-indigo-600 text-white font-bold hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-200 flex items-center justify-center"
              >
                レポートを確認する
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ / Trust */}
      <section className="py-24 bg-white border-t border-slate-100">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-3 mb-10 justify-center md:justify-start">
            <ShieldCheck className="w-8 h-8 text-indigo-600" />
            <h2 className="text-2xl font-bold">安心してお任せいただくために</h2>
          </div>
          <div className="space-y-4 text-left">
            {[
              { q: "なぜそんなに早いのですか？", a: "独自の「行動心理最適化エンジン」が、過去の膨大なコンバージョンデータを学習しているためです。人間が3週間かけて行う「仮説立案」と「実装」を、数分で完了させることができるため、24時間の納品が実現可能となりました。" },
              { q: "修正はできますか？", a: "納品データはHTML/CSSですので、ご自身や他のエンジニアでも修正可能です。また、プレミアムプランでは当エンジンによる再生成（修正）を3回まで無料で承っております。" },
              { q: "前払い制の理由は？", a: "制作エンジンを即座に稼働させるためのリソースを確保するためです。その代わり、診断レポートの内容を事前に確認し、納得した方のみにご購入いただく形をとっております。" }
            ].map((faq, i) => (
              <div key={i} className="p-6 rounded-2xl bg-slate-50">
                <h3 className="font-bold text-lg mb-2">{faq.q}</h3>
                <p className="text-slate-600 leading-relaxed text-sm">{faq.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );

  const LegalNoticeView = () => (
    <div className="py-24 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-slate-700">
      <h1 className="text-3xl font-bold mb-10 text-slate-900 border-b pb-4">特定商取引法に基づく表記</h1>
      <div className="space-y-10">
        <section>
          <h2 className="font-bold text-xl mb-4 text-slate-900">販売業者名</h2>
          <p>GentleFlow 制作事業部</p>
        </section>
        <section>
          <h2 className="font-bold text-xl mb-4 text-slate-900">運営責任者</h2>
          <p>（担当者名をご記入ください）</p>
        </section>
        <section>
          <h2 className="font-bold text-xl mb-4 text-slate-900">所在地</h2>
          <p>（住所をご記入ください）</p>
        </section>
        <section>
          <h2 className="font-bold text-xl mb-4 text-slate-900">お問い合わせ先</h2>
          <p>Email: support@gentleflow.sample (仮)</p>
          <p className="text-sm mt-2 text-slate-500">※お急ぎの場合は、お問い合わせフォームよりご連絡ください。</p>
        </section>
        <section>
          <h2 className="font-bold text-xl mb-4 text-slate-900">商品代金</h2>
          <p>各プラン紹介ページに記載された価格（税込）に準じます。</p>
        </section>
        <section>
          <h2 className="font-bold text-xl mb-4 text-slate-900">代金の支払い時期および方法</h2>
          <p>支払い時期：診断レポート確認後の制作依頼時（前払い制）</p>
          <p>支払い方法：クレジットカード決済 (Stripe)</p>
        </section>
        <section>
          <h2 className="font-bold text-xl mb-4 text-slate-900">商品の引き渡し時期</h2>
          <p>決済完了および制作指示確定後、通常24時間以内にHTML/CSSソースコードをデータにて納品いたします。</p>
        </section>
        <section>
          <h2 className="font-bold text-xl mb-4 text-slate-900">返品・キャンセルについて</h2>
          <p>商品の性質上（デジタルデータ）、決済完了後の返品および返金には応じられません。</p>
          <p className="mt-2 font-bold text-rose-600">※事前の無料診断レポートを必ずご確認いただき、内容に納得された上でのご購入をお願いいたします。</p>
        </section>
      </div>
    </div>
  );

  const PrivacyPolicyView = () => (
    <div className="py-24 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-slate-700">
      <h1 className="text-3xl font-bold mb-10 text-slate-900 border-b pb-4">プライバシーポリシー</h1>
      <div className="space-y-10">
        <p>GentleFlow（以下、「当社」）は、本ウェブサイト上で提供するサービス（以下、「本サービス」）における、ユーザーの個人情報の取扱いについて、以下のとおりプライバシーポリシー（以下、「本ポリシー」）を定めます。</p>
        
        <section>
          <h2 className="font-bold text-xl mb-4 text-slate-900">1. 個人情報の収集方法</h2>
          <p>当社は、ユーザーが無料診断の申し込み、またはサービスのご購入をいただく際に、メールアドレス、氏名、会社名、サイトURL等の個人情報をご登録いただきます。</p>
        </section>
        
        <section>
          <h2 className="font-bold text-xl mb-4 text-slate-900">2. 個人情報を収集・利用する目的</h2>
          <ul className="list-disc pl-5 space-y-2">
            <li>無料診断レポートの作成および送付のため</li>
            <li>ご依頼いただいたLP制作、納品、アフターサポートのため</li>
            <li>ユーザーからのお問い合わせに対応するため</li>
            <li>当社が提供する他のサービスの案内やメンテナンス情報の送付のため</li>
          </ul>
        </section>
        
        <section>
          <h2 className="font-bold text-xl mb-4 text-slate-900">3. 個人情報の第三者提供</h2>
          <p>当社は、法令に基づき開示が必要な場合を除き、ユーザーの同意を得ることなく第三者に個人情報を提供することはありません。ただし、決済処理（Stripe）等の業務委託先については、本サービスの提供に必要な範囲内で情報を共有いたします。</p>
        </section>
        
        <section>
          <h2 className="font-bold text-xl mb-4 text-slate-900">4. セキュリティ対策</h2>
          <p>当社は、個人情報の正確性および安全性を確保するために、高度な推論アルゴリズムを含む自社インフラ内での厳重なデータ管理を行い、不正アクセスや情報漏えいの防止に努めます。</p>
        </section>
        
        <section>
          <h2 className="font-bold text-xl mb-4 text-slate-900">5. お問い合わせ窓口</h2>
          <p>本ポリシーに関するお問い合わせは、特定商取引法に基づく表記に記載のメールアドレスまでお願いいたします。</p>
        </section>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-indigo-100 scroll-smooth flex flex-col">
      <Navigation />
      
      <main className="flex-grow">
        {currentPage === 'home' && <HomeView />}
        {currentPage === 'legal' && <LegalNoticeView />}
        {currentPage === 'privacy' && <PrivacyPolicyView />}
      </main>

      <Footer />
    </div>
  );
};

export default App;