// Main app — routing, pages, mounting
function HomePage({ openBooking }) {
  return (
    <>
      <Hero openBooking={() => openBooking(0)} />
      <IntroSection />
      <CruisesSection openBooking={openBooking} />
      <BoatSection />
      <TestimonialsSection />
      <TrustStrip />
    </>
  );
}

function CruisesPage({ openBooking }) {
  const { t, lang } = useI18n();
  return (
    <>
      <PageHero
        eyebrow={t.cruises.eyebrow}
        title={t.cruises.title}
        sub={t.cruises.sub}
        bg={IMAGES.cove}
      />
      <CruisesSection openBooking={openBooking} />
      <BoatSection />
    </>
  );
}

function AboutPage({ openBooking }) {
  const { t, lang } = useI18n();
  const story = {
    ro: [
      'Am crescut pe malul Mării Negre. Mama mea îmi spunea de mic că marea îți spune lucruri pe care nimeni altcineva nu le poate spune — trebuie doar să stai liniștit și să asculți.',
      'Acum cinci ani m-am mutat la Málaga și am cumpărat prima ambarcațiune. Am început cu prieteni — apus, o sticlă de vin, muzică — și am realizat că asta e ceea ce vreau să fac.',
      'Kain Ama înseamnă "căpitan al mării" într-un dialect vechi. E un nume pe care l-am ales pentru că, atunci când ești pe mare, marea e cea care decide. Eu doar conduc ambarcațiunea și am grijă de voi.',
    ],
    en: [
      'I grew up on the Black Sea coast. My mother told me as a child that the sea tells you things no one else can — you just have to be still and listen.',
      'Five years ago I moved to Málaga and bought my first boat. I started with friends — sunset, a bottle of wine, music — and I realised this is what I want to do.',
      'Kain Ama means "master of the sea" in an old dialect. I chose this name because, when you\'re out there, the sea makes the decisions. I just steer and take care of you.',
    ],
    es: [
      'Crecí en la costa del Mar Negro. Mi madre me decía de pequeño que el mar te cuenta cosas que nadie más puede contarte — solo hay que quedarse quieto y escuchar.',
      'Hace cinco años me mudé a Málaga y compré mi primera embarcación. Empecé con amigos — atardecer, una botella de vino, música — y entendí que esto es lo que quiero hacer.',
      'Kain Ama significa "capitán del mar" en un dialecto antiguo. Elegí este nombre porque, cuando estás allí fuera, el mar es el que decide. Yo solo llevo la embarcación y cuido de vosotros.',
    ],
  }[lang];

  return (
    <>
      <PageHero
        eyebrow={t.intro.eyebrow}
        title={t.intro.title}
        sub=""
        bg={IMAGES.heroAlt}
      />
      <section className="section" style={{ background: 'var(--bone)' }}>
        <div className="container">
          <div className="intro-grid">
            <div className="intro-img reveal">
              <img src={IMAGES.about} alt="Aron, Captain" />
            </div>
            <div className="intro-content reveal">
              <span className="eyebrow">{ {ro: 'Povestea', en: 'Story', es: 'Historia'}[lang] }</span>
              <h2 className="display intro-title">{ {ro: 'De pe Marea Neagră, în Mediterana.', en: 'From the Black Sea to the Mediterranean.', es: 'Del Mar Negro al Mediterráneo.'}[lang] }</h2>
              {story.map((p, i) => (
                <p key={i} className="intro-body" style={{ marginBottom: 16 }}>{p}</p>
              ))}
              <div className="intro-sign">{t.intro.sign}</div>
            </div>
          </div>
        </div>
      </section>
      <BoatSection />
      <TestimonialsSection />
    </>
  );
}

function GalleryPage() {
  const { t } = useI18n();
  return (
    <>
      <PageHero
        eyebrow={t.gallery.eyebrow}
        title={t.gallery.title}
        sub={t.gallery.sub}
        bg={IMAGES.g1}
      />
      <GallerySection />
    </>
  );
}

function RoutesPage() {
  const { t } = useI18n();
  return (
    <>
      <PageHero
        eyebrow={t.routes.eyebrow}
        title={t.routes.title}
        sub={t.routes.sub}
        bg={IMAGES.g2}
      />
      <RoutesSection />
    </>
  );
}

function FAQPage() {
  const { t } = useI18n();
  return (
    <>
      <PageHero
        eyebrow={t.faq.eyebrow}
        title={t.faq.title}
        sub=""
        bg={IMAGES.g6}
      />
      <FAQSection />
    </>
  );
}

function ContactPage() {
  const { t } = useI18n();
  return (
    <>
      <PageHero
        eyebrow={t.contact.eyebrow}
        title={t.contact.title}
        sub={t.contact.sub}
        bg={IMAGES.g5}
      />
      <ContactSection />
    </>
  );
}

// Reusable page-hero (smaller than home hero)
function PageHero({ eyebrow, title, sub, bg }) {
  return (
    <section className="page-hero">
      <div className="page-hero-bg">
        <img src={bg} alt="" />
      </div>
      <div className="container page-hero-inner">
        <span className="hero-eyebrow">{eyebrow}</span>
        <h1 className="display" style={{ fontSize: 'clamp(40px, 6vw, 84px)', color: 'var(--bone)', marginTop: 8, lineHeight: 1.05 }}>{title}</h1>
        {sub && <p style={{ fontSize: 17, color: 'rgba(245,239,230,0.85)', marginTop: 20, maxWidth: 640, lineHeight: 1.6 }}>{sub}</p>}
      </div>
    </section>
  );
}

// Inject page-hero styles
const phStyle = document.createElement('style');
phStyle.textContent = `
.page-hero {
  position: relative;
  padding: 200px 0 120px;
  color: var(--bone);
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
}
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 40, 54, 0.65) 0%, rgba(20, 40, 54, 0.45) 50%, rgba(20, 40, 54, 0.90) 100%);
  z-index: 1;
}
.page-hero-inner { position: relative; z-index: 2; width: 100%; }
@media (max-width: 768px) {
  .page-hero { padding: 140px 0 80px; min-height: 50vh; }
}
`;
document.head.appendChild(phStyle);

// ===== ROOT APP =====
function App() {
  const route = useHashRoute();
  const [bookingOpen, setBookingOpen] = React.useState(false);
  const [bookingCruise, setBookingCruise] = React.useState(0);

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "heroImage": "sea-boat",
    "accentColor": "#C8624A",
    "darkSections": true,
    "showWhatsApp": true
  }/*EDITMODE-END*/;
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply hero image override
  const HERO_OPTIONS = {
    'sea-boat': 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=2400&q=80',
    'sunset': 'https://images.unsplash.com/photo-1493558103817-58b2924bce98?w=2400&q=80',
    'turquoise': 'https://images.unsplash.com/photo-1502209524164-acea936639a2?w=2400&q=80',
    'cliffs': 'https://images.unsplash.com/photo-1530541930197-ff16ac917b0e?w=2400&q=80',
    'sailing': 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=2400&q=80',
  };
  React.useEffect(() => {
    window.IMAGES.hero = HERO_OPTIONS[tw.heroImage] || HERO_OPTIONS['sea-boat'];
    document.documentElement.style.setProperty('--terracotta', tw.accentColor);
  }, [tw.heroImage, tw.accentColor]);

  const openBooking = (cruiseIdx = 0) => {
    setBookingCruise(typeof cruiseIdx === 'number' ? cruiseIdx : 0);
    setBookingOpen(true);
  };

  useReveal();
  React.useEffect(() => {
    const t = setTimeout(() => {
      document.querySelectorAll('.reveal:not(.in)').forEach(el => {
        const rect = el.getBoundingClientRect();
        if (rect.top < window.innerHeight) el.classList.add('in');
      });
    }, 50);
    return () => clearTimeout(t);
  }, [route]);

  const renderRoute = () => {
    switch (route) {
      case 'cruises': return <CruisesPage openBooking={openBooking} />;
      case 'about': return <AboutPage openBooking={openBooking} />;
      case 'gallery': return <GalleryPage />;
      case 'routes': return <RoutesPage />;
      case 'faq': return <FAQPage />;
      case 'contact': return <ContactPage />;
      default: return <HomePage openBooking={openBooking} />;
    }
  };

  return (
    <>
      <Header openBooking={() => openBooking(0)} />
      <main key={route + '-' + tw.heroImage}>
        {renderRoute()}
        {route !== 'contact' && route !== 'home' && <ContactSection />}
      </main>
      <Footer openBooking={() => openBooking(0)} />
      {tw.showWhatsApp && <WhatsAppFloat />}
      <BookingModal open={bookingOpen} onClose={() => setBookingOpen(false)} initialCruise={bookingCruise} />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakSelect label="Hero image" value={tw.heroImage}
          options={[
            { value: 'sea-boat', label: 'Boat on sea (default)' },
            { value: 'sunset', label: 'Mediterranean sunset' },
            { value: 'turquoise', label: 'Turquoise water' },
            { value: 'cliffs', label: 'Coastal cliffs' },
            { value: 'sailing', label: 'Sailing scene' },
          ]}
          onChange={(v) => setTweak('heroImage', v)} />
        <TweakSection label="Brand" />
        <TweakColor label="Accent color" value={tw.accentColor} onChange={(v) => setTweak('accentColor', v)} />
        <TweakSection label="Layout" />
        <TweakToggle label="WhatsApp float button" value={tw.showWhatsApp} onChange={(v) => setTweak('showWhatsApp', v)} />
      </TweaksPanel>
    </>
  );
}

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