import React, { useState, useEffect } from 'react';

import {

ArrowRight,

BarChart3,

CheckCircle2,

TrendingUp,

Zap,

Target,

Award,

MessageSquare,

Globe,

Shield,

Briefcase,

Mail,

MapPin,

User,

Scale,

DollarSign,

Handshake,

ExternalLink,

Rocket,

ShieldCheck,

Percent,

CalendarCheck,

MousePointerClick

} from 'lucide-react';

const App = () => {

const [activeTab, setActiveTab] = useState('home');

const [scrolled, setScrolled] = useState(false);

const CONTACT_FORM_URL = "https://forms.gle/8CXG6bsb583oL2Tz6";

useEffect(() => {

const handleScroll = () => {

setScrolled(window.scrollY > 50);

};

window.addEventListener('scroll', handleScroll);

return () => window.removeEventListener('scroll', handleScroll);

}, []);

const NavItem = ({ id, label }) => (

<button

onClick={() => {

setActiveTab(id);

window.scrollTo(0, 0);

}}

className={`px-4 py-2 text-sm font-bold transition-all hover:text-blue-600 ${

activeTab === id ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-600'

}`}

{label}

</button>

);

const SectionTitle = ({ title, subtitle, light = false }) => (

<h2 className={`text-3xl md:text-5xl font-black mb-4 tracking-tighter ${light ? 'text-white' : 'text-slate-900'}`}>{title}</h2>

<p className={`text-lg max-w-2xl mx-auto font-medium ${light ? 'text-gray-300' : 'text-gray-600'}`}>{subtitle}</p>

</div>

);

const renderContent = () => {

switch (activeTab) {

case 'home':

return (

{/* ヒーローセクション */}

{/* */}

</div>

Zero Risk / Performance Based Marketing

</div>

完全成果報酬。<br/><span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500">リスクは、俺が持つ。</span>

</h1>

WEB広告を活用したダイレクトマーケティングの極致。<br/>

成果が出ないなら、1円も受け取らない。それがプロとしての覚悟。<br/>

クライアントの日本トップ10入りに貢献した実戦知と、120億企業の経営参画経験を、貴社の成長エンジンに。

</p>

<button

onClick={() => setActiveTab('services')}

className="px-10 py-5 bg-blue-600 hover:bg-blue-700 text-white font-black rounded-lg transition-all transform hover:-translate-y-1 shadow-2xl flex items-center justify-center group"

成果報酬メニューを見る <ArrowRight className="ml-2 w-6 h-6 group-hover:translate-x-1 transition-transform" />

</button>

href={CONTACT_FORM_URL}

target="_blank"

rel="noopener noreferrer"

className="px-10 py-5 bg-transparent hover:bg-white/5 text-white font-black rounded-lg border-2 border-white/20 transition-all flex items-center justify-center"

お問い合わせ

</a>

</div>

</section>

{/* コンセプトセクション */}

<SectionTitle

title="「実行力」で、成果に貢献する。"

subtitle="机上の空論、美しいだけの戦略は不要。WEB広告を通じたダイレクトレスポンスに特化し、貴社のKPI達成に執着します。"

<h3 className="text-2xl font-black mb-4">即戦力の実行支援</h3>

<p className="text-gray-600 font-medium">代理店役員として120億を動かした実戦経験を、貴社の現場へ注入。自らペンを取り、自ら広告を運用し、成果が出るまで手を止めません。</p>

</div>

<h3 className="text-2xl font-black mb-4">WEB広告のプロ</h3>

<p className="text-gray-600 font-medium">アポ獲得、リードジェネレーション、売上向上。多くの事業成長に貢献してきた勝ち筋を、貴社のビジネスに最適化させます。</p>

</div>

<h3 className="text-2xl font-black mb-4">完全運命共同体</h3>

<p className="text-gray-600 font-medium">初期・月額費用はゼロベース。貴社の「成果」が、私の報酬。結果が出た時だけ利益を分かち合う、潔いパートナーシップを約束します。</p>

</div>

</section>

{/* 実績ハイライト */}

<p className="text-blue-500 font-black tracking-widest uppercase mb-8">Proven Expertise</p>

<div className="text-gray-500 text-xs font-black tracking-widest uppercase mt-3">Executive Management Exp.</div>

</div>

<div className="text-4xl md:text-6xl font-black text-white group-hover:text-blue-500 transition-colors">Japan Top 10</div>

<div className="text-gray-500 text-xs font-black tracking-widest uppercase mt-3">Contributing to Success</div>

</div>

<div className="text-gray-500 text-xs font-black tracking-widest uppercase mt-3">Result Based Only</div>

</div>

</section>

</>

);

case 'profile':

return (

<SectionTitle

title="プロフェッショナル"

subtitle="経営と現場、両方の頂点を知るからこそ可能な、成果コミットメント。"

{/* */}

</div>

<div className="text-blue-500 font-black text-sm tracking-widest uppercase mb-2">CEO & Founder</div>

<p className="text-gray-400 font-bold">Youkichi Sawanobori</p>

</div>

「成果」以外に、語るべき言葉はない。

</h4>

<p>

自衛隊での規律ある経験を経て、広告代理店の最前線へ。現場での圧倒的な成果により、若くして年商120億円規模の企業の経営役員に就任。巨大な広告予算を動かし、マーケティング戦略の全責任を負い、組織を牽引してきた。

</p>

<p>

特にダイレクトレスポンス領域において、**クライアントの日本トップ10入り（健康食品等の激戦区）に大きく貢献した実戦データ**を持つ。

</p>

<p>

現在は「ZEUS株式会社」代表として、自らがセールスライティングを行い、広告を運用する「実行型」のスタイルを貫く。机上の空論ではなく、自らのリスクで成果を出すことにのみ心血を注いでいる。

</p>

「成果が出ないなら、1円も受け取らない。私はその覚悟で仕事を引き受けている。」

</p>

</div>

</section>

);

case 'services':

return (

<SectionTitle

title="二つの成果報酬代行メニュー"

subtitle="WEB広告ダイレクトマーケティングとSaaS、それぞれの最適解。"

{/* ダイレクトマーケティング・獲得保証モデル */}

</div>

For Direct Marketing / WEB Ads

</div>

<h3 className="text-3xl font-black mb-6 text-slate-900">WEB広告マーケ<br/><span className="text-blue-600">【完全獲得保証】</span>代行</h3>

D2C・ECを中心に、WEB広告を用いたダイレクトマーケティング全般。

**日本トップクラスの事業成長に貢献してきた戦略**を貴社のビジネスに落とし込み、獲得（リード・売上）に応じた完全成果報酬で並走します。

</p>

<CheckCircle2 className="text-blue-600 w-5 h-5" /> 獲得単価（CPA）完全固定

</li>

<CheckCircle2 className="text-blue-600 w-5 h-5" /> 高成約セールスライティング・LP改善

</li>

<CheckCircle2 className="text-blue-600 w-5 h-5" /> ダイレクトレスポンス施策の継続的最適化

</li>

</ul>

獲得保証の相談をする <ArrowRight className="ml-2 w-5 h-5" />

</a>

</div>

{/* SaaS・永久バックモデル */}

</div>

For SaaS & Subscription

</div>

<h3 className="text-3xl font-black mb-6 text-white">SaaS向け<br/><span className="text-blue-400">【永久バック型】</span>成長代行</h3>

アポ獲得から成約、その後の売上シェアまでをカバー。

初期・月額完全無料。アポイント獲得報酬＋成約売上の一定％を「永久バック」いただく、永続的な成長支援モデルです。

</p>

<CalendarCheck className="text-blue-400 w-5 h-5" /> 確度の高い商談（アポイント）の安定供給

</li>

<CalendarCheck className="text-blue-400 w-5 h-5" /> 成約時売上の永久レベニューシェア

</li>

<CalendarCheck className="text-blue-400 w-5 h-5" /> スケールに特化した実戦的実行支援

</li>

</ul>

SaaS成長代行の相談をする <ArrowRight className="ml-2 w-5 h-5" />

</a>

</div>

</section>

);

case 'company':

return (

<div>

<Globe className="w-4 h-4" /> Company Name

</div>

<div className="text-slate-900 font-bold text-lg">ZEUS株式会社</div>

</div>

<div>

<User className="w-4 h-4" /> Representative

</div>

</div>

<MapPin className="w-4 h-4" /> Location

</div>

<div className="text-slate-900 font-bold text-lg">〒530-0001 大阪府大阪市北区梅田1丁目2番2号大阪駅前第2ビル12-12</div>

</div>

<Briefcase className="w-4 h-4" /> Business Domains

</div>

<div className="text-slate-900 font-bold text-lg">成果報酬型代行 / SaaS成長代行 / ダイレクトマーケティング実行支援</div>

</div>

<Mail className="w-4 h-4" /> Inquiry

</div>

href={CONTACT_FORM_URL}

target="_blank"

rel="noopener noreferrer"

className="text-blue-600 font-bold text-lg hover:underline flex items-center gap-2"

お問い合わせフォームはこちら <ExternalLink className="w-4 h-4" />

</a>

</div>

<div>

<p className="text-blue-900 font-black mb-2">コンプライアンスと誠実さ</p>

弊社は、誇大広告や消費者を欺く手法を一切認めません。

マジで良いものを、正しい言葉で広め、クライアントと消費者が共に豊かになる「三方良し」のビジネス実行を信条としています。

</p>

</div>

</section>

);

default:

return null;

}

};

return (

{/* ナビゲーション */}

<nav className={`fixed w-full z-50 transition-all duration-500 ${

scrolled ? 'bg-white/90 backdrop-blur-md shadow-lg py-4' : 'bg-transparent py-8'

}`}>

<div

className={`text-3xl font-black cursor-pointer tracking-tighter transition-colors ${scrolled ? 'text-slate-900' : 'text-white'}`}

onClick={() => {

setActiveTab('home');

window.scrollTo(0, 0);

}}

ZEUS<span className="text-blue-600">.</span>

</div>

</div>

href={CONTACT_FORM_URL}

target="_blank"

rel="noopener noreferrer"

className={`px-8 py-3 rounded-lg font-black transition-all transform hover:scale-105 ${

scrolled ? 'bg-blue-600 text-white shadow-blue-500/30 shadow-lg' : 'bg-white text-slate-900'

}`}

成果報酬で相談

</a>

</div>

</nav>

{/* メインコンテンツ */}

<main>

{renderContent()}

</main>

{/* フッター */}

「成果が出ないなら、1円も受け取らない。」<br/>

結果を出すために必要なのは、優れたアイデアではなく、それを完遂させる実行力です。

成果報酬型で、貴社のビジネスを加速させます。

</p>

</div>

<div>

<h4 className="text-white font-black mb-8 text-sm tracking-widest uppercase">Expertise</h4>

<li className="hover:text-white transition-colors cursor-default">WEB Ads Marketing</li>

<li className="hover:text-white transition-colors cursor-default">SaaS Growth</li>

<li className="hover:text-white transition-colors cursor-default">Sales Writing</li>

<li className="hover:text-white transition-colors cursor-default">Direct Response</li>

</ul>

</div>

<div>

<h4 className="text-white font-black mb-8 text-sm tracking-widest uppercase">Information</h4>

<li><button onClick={() => setActiveTab('profile')} className="hover:text-white transition-colors">澤登について</button></li>

<li><button onClick={() => setActiveTab('company')} className="hover:text-white transition-colors">会社概要</button></li>

<li><a href="#" className="hover:text-white transition-colors">プライバシーポリシー</a></li>

</ul>

</div>

</div>

</footer>

</div>

);

};

export default App;