import SEOSchema from "@/components/SEOSchema";
import { useNavigate } from "react-router-dom";
import WelcomePromoBar from "@/components/home/welcome/WelcomePromoBar";
import WelcomeHeroPro from "@/components/home/welcome/WelcomeHeroPro";
import WelcomeServicePreview from "@/components/home/welcome/WelcomeServicePreview";
import WelcomeSignupBonusBanner from "@/components/home/welcome/WelcomeSignupBonusBanner";
import WelcomePayYourWay from "@/components/home/welcome/WelcomePayYourWay";
import WelcomeWhyZipgy from "@/components/home/welcome/WelcomeWhyZipgy";
import WelcomeDriverZeroFee from "@/components/home/welcome/WelcomeDriverZeroFee";
import WelcomeSafetyStrip from "@/components/home/welcome/WelcomeSafetyStrip";
import WelcomePartnerSection from "@/components/home/welcome/WelcomePartnerSection";
import Reveal from "@/components/home/welcome/Reveal";
import ReliableImage from "@/components/ReliableImage";
import { useTranslation } from "@/hooks/useTranslation";
import { isNativeApp } from "@/lib/isNativeApp";

export default function WelcomeMobile() {
  const navigate = useNavigate();
  const { t } = useTranslation();

  return (
    <>
      <SEOSchema page="home" />

      <div className="w-full bg-white min-h-[100dvh] flex flex-col overflow-x-hidden">
        <div className="w-full max-w-[520px] mx-auto flex flex-col flex-1 bg-white">

        {/* ── PROMO BAR ── */}
        <WelcomePromoBar />

        {/* ── HEADER ── */}
        <header
          className="sticky top-0 z-20 bg-white border-b border-gray-100 px-4"
          style={{ paddingTop: 'max(12px, env(safe-area-inset-top, 12px))', paddingBottom: '12px' }}
          role="banner"
        >
          <div className="flex items-center justify-between gap-2 min-w-0">
            <ReliableImage
              src="https://media.base44.com/images/public/69d5830a1029e260b1be47bf/b24ad3f8c_zipgy-final-2x-961.png?width=160"
              alt="ZIP.GY"
              className="h-7 w-auto flex-shrink-0"
              loading="eager"
              decoding="async"
              style={{ imageRendering: 'auto', objectFit: 'contain', WebkitBackfaceVisibility: 'hidden', transform: 'translateZ(0)' }}
            />
            <div className="flex items-center gap-1.5 flex-shrink-0">
              <button
                onClick={() => navigate('/signup')}
                className="text-xs font-extrabold text-emerald-700 border-2 border-emerald-600 active:scale-95 transition-all px-3 py-2 rounded-full whitespace-nowrap"
              >
                {t('landing.signup') !== 'landing.signup' ? t('landing.signup') : 'Sign Up'}
              </button>
              {/* "Get App" link — hidden inside the native app (App Store Guideline 2.3.10/4.2) */}
              {!isNativeApp() && (
                <button
                  onClick={() => navigate('/install')}
                  aria-label="Get the app"
                  className="flex items-center bg-black text-white active:scale-95 transition-all px-4 py-2 rounded-full shadow-sm whitespace-nowrap text-xs font-black"
                >
                  {t('welcome.get_app')}
                </button>
              )}
            </div>
          </div>
        </header>

        {/* ── MAIN ── */}
        <main className="flex-1 px-4 pt-0 pb-24" role="main">
          {/* NOTE: no content-visibility:auto deferral here. On mobile /welcome the
              Layout renders this inside a fixed h-[100dvh] overflow-y-auto scroll
              box; cv-auto collapses off-screen sections to a tiny intrinsic height,
              so on first paint the container thinks everything fits and there is
              nothing to scroll — the page appears STUCK until a reflow. Rendering
              these short marketing sections normally keeps scroll height correct. */}
          <WelcomeHeroPro />
          <Reveal delay={0}><WelcomeServicePreview /></Reveal>
          <Reveal delay={0}><WelcomeSignupBonusBanner /></Reveal>
          <Reveal delay={0}><WelcomeWhyZipgy /></Reveal>
          <Reveal delay={0}><WelcomeSafetyStrip /></Reveal>
          <Reveal delay={0}><WelcomePayYourWay /></Reveal>
          <Reveal delay={0}><WelcomeDriverZeroFee /></Reveal>
          <Reveal delay={0}><WelcomePartnerSection /></Reveal>

          {/* Copyright + contact — trust signal for first-time visitors */}
          <div className="mt-6 text-center">
            <a
              href="tel:+5926323314"
              className="text-xs font-semibold text-gray-400 hover:text-emerald-600"
            >
              📞 +592-632-3314
            </a>
            <p className="text-[11px] text-gray-400 mt-1">
              Copyright © 2026 ZIP.GY EXPRESS SERVICE.
            </p>
          </div>
        </main>

        {/* ── STICKY BOTTOM CTA — join path always one tap away ── */}
        <div
          className="sticky bottom-0 z-20 bg-white/95 backdrop-blur-sm border-t border-gray-100 px-4 pt-3"
          style={{ paddingBottom: 'max(12px, env(safe-area-inset-bottom, 12px))' }}
        >
          <button
            onClick={() => navigate('/signup')}
            className="w-full bg-emerald-600 hover:bg-emerald-700 active:scale-[0.98] transition-all text-white font-bold text-base py-3.5 rounded-2xl shadow-md"
          >
            {t('landing.join_free')}
          </button>
          <div className="flex items-center justify-center gap-2 mt-2.5">
            <span className="text-sm text-gray-500">{t('welcome.already_account')}</span>
            <button
              onClick={() => navigate('/signin')}
              className="text-sm font-bold text-emerald-700 underline underline-offset-2 active:scale-95 transition-all"
            >
              {t('landing.login')}
            </button>
          </div>
        </div>
        </div>
      </div>
    </>
  );
}