'use client';
import {useState} from 'react';
import Game,{ShipArt} from './game';
import EmailAuth from './email-auth';
import {makeShip} from '../lib/engine';
import {DEFAULT_CONTENT} from '../lib/content';
import {Anchor,ArrowUpRight,Compass,Shield,Swords,X} from 'lucide-react';
type Props=React.ComponentProps<typeof Game>;
export default function Entrance(props:Props){
 const [playing,setPlaying]=useState(false),[auth,setAuth]=useState(false),[choice,setChoice]=useState('sovereign');
 if(props.signedIn||playing)return <Game {...props}/>;
 const model=DEFAULT_CONTENT.ships.find(s=>s.id===choice)!;
 return <main className="entrance"><header className="entry-nav"><a href="#" className="entry-brand"><Anchor/> KARAYEL<small>AÇIK DENİZLER</small></a><nav><a href="#filo">Filoyu keşfet</a><a href="#sefer">İlk seferin</a><button onClick={()=>setAuth(true)}>Giriş / Üye ol <ArrowUpRight size={16}/></button></nav></header><section className="entry-hero"><div><span className="entry-kicker">TARAYICIDA KORSAN SAVAŞLARI · ALFA</span><h1>Ufuk senin.<br/><em>Efsaneni yaz.</em></h1><p>Küçük bir yelkenliden büyük bir savaş filosuna. Rotanı çiz, toplarını kuşan ve açık denizlerde kendi hikâyeni başlat.</p><div className="entry-actions"><button className="gold-button" onClick={()=>setAuth(true)}>Kaptanını oluştur <ArrowUpRight size={18}/></button><button className="text-button" onClick={()=>setPlaying(true)}>Üye olmadan dene →</button></div><small>İndirme yok · Bilgisayar ve mobil tarayıcı</small></div><div className="entry-vessel"><div className="entry-orbit"/><ShipArt ship={{...makeShip('preview','Önizleme',1700000000000),model:model.id,spec:model}} large/><div className="entry-caption"><span>FİLONUN AMİRAL GEMİSİ</span><strong>{model.name}</strong><small>{model.class} · {model.capacity} top kapasitesi</small></div></div></section><section id="filo" className="entry-fleet"><div className="entry-section-title"><span>TERSANE DEFTERİ</span><h2>Her geminin bir karakteri var.</h2><p>Hız, dayanıklılık ve top kapasitesi arasında kendi savaş tarzını seç.</p></div><div className="entry-ships">{DEFAULT_CONTENT.ships.filter(s=>['albatros','frigate','inferno','sovereign'].includes(s.id)).map(s=><button key={s.id} aria-pressed={choice===s.id} onClick={()=>setChoice(s.id)}><ShipArt ship={{...makeShip('preview','Önizleme',1700000000000),model:s.id,spec:s}}/><strong>{s.name}</strong><span>{s.currency==='gold'?'Altın filosu':'Elmas filosu'} · {s.capacity} top</span></button>)}</div><p className="entry-disclaimer">Vitrin başlangıç filosunu gösterir. Güncel fiyatlar ve satış durumu oyun içindeki tersanededir.</p></section><section id="sefer" className="entry-journey"><div><span className="entry-kicker">İLK SEFERİN</span><h2>Denizi öğren.<br/>Filonu büyüt.</h2><button className="gold-button" onClick={()=>setAuth(true)}>Yelken aç <ArrowUpRight size={18}/></button></div><ol>{[[Compass,'Rotanı çiz','Bağlı denizleri keşfet, görevler yap ve yeni bölgelerin kilidini aç.'],[Shield,'Gemini hazırla','Her aktif top için bir topçu al. Yelkenlerini ve mühimmatını savaşına göre seç.'],[Swords,'Mücadeleni seç','NPC gemileriyle savaş. PvP bölgelerinde rakip kaptanlarla karşılaş; limanda güvenle onar.']].map(([Icon,title,description],i)=>{const I=Icon as typeof Compass;return <li key={i}><I size={24}/><div><h3>{title as string}</h3><p>{description as string}</p></div></li>;})}</ol></section><footer><span>⚓ KARAYEL · AÇIK DENİZLER</span><p>Geliştirme alfa sürümü. Deneme seferindeki ilerleme kaydedilmez.</p><button onClick={()=>setAuth(true)}>Kaptan hesabına giriş →</button></footer>{auth&&<div className="entry-auth-backdrop" onClick={()=>setAuth(false)}><section className="entry-auth" role="dialog" aria-modal="true" aria-label="Kaptan hesabı" onClick={e=>e.stopPropagation()}><button className="entry-close" aria-label="Kapat" onClick={()=>setAuth(false)}><X/></button><Anchor size={30}/><h2>Güverteye hoş geldin.</h2><p>Kaptan hesabınla filonu ve ilerlemeni koru.</p>{props.phpApi?<EmailAuth endpoint={props.phpApi+'?route=auth'} csrf={props.csrf??''}/>:<><a className="gold-button" href={props.signInPath} target="_top">ChatGPT ile devam et →</a><p>Bu özel önizleme ChatGPT girişi kullanır. E-posta üyeliği PHP sunucu sürümünde çalışır.</p></>}</section></div>}</main>;
}