import SEOSchema from "@/components/SEOSchema";
import { useNavigate } from "react-router-dom";
import WelcomeHero from "@/components/home/welcome/WelcomeHero";
import WelcomeServiceGrid from "@/components/home/welcome/WelcomeServiceGrid";
import WelcomeHowItWorks from "@/components/home/welcome/WelcomeHowItWorks";
import WelcomePartnerSection from "@/components/home/welcome/WelcomePartnerSection";
import WelcomeDriverZeroFee from "@/components/home/welcome/WelcomeDriverZeroFee";
import WelcomeSafetyStrip from "@/components/home/welcome/WelcomeSafetyStrip";
import WelcomeConversionTop from "@/components/home/welcome/WelcomeConversionTop";
import ReliableImage from "@/components/ReliableImage";
import { useTranslation } from "@/hooks/useTranslation";

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-md mx-auto flex flex-col flex-1 bg-white">

        {/* ── 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>
              {/* Small "Get it on Google Play" button — direct to the store listing */}
              <a
                href="https://play.google.com/store/apps/details?id=com.base69d5830a1029e260b1be47bf.app"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Get it on Google Play"
                className="flex items-center bg-black text-white active:scale-95 transition-all px-3 py-1.5 rounded-full shadow-sm whitespace-nowrap"
              >
                <span className="leading-none text-left">
                  <span className="block text-[7px] font-medium text-gray-300 uppercase tracking-wide">Get it on</span>
                  <span className="block text-[11px] font-black">Google Play</span>
                </span>
              </a>
            </div>
          </div>
        </header>

        {/* ── MAIN ── */}
        <main className="flex-1 px-4 pt-2 pb-24" role="main">
          {/* ROI-focused top block: value headline + social proof + urgent offer */}
          <WelcomeConversionTop />

          <WelcomeHero />
          <WelcomeServiceGrid />
          {/* Below-the-fold sections defer their layout/paint (content-visibility:auto)
              so the hero + service grid render instantly on mobile. */}
          <div className="cv-auto">
            <WelcomeHowItWorks />
          </div>
          <div className="cv-auto">
            <WelcomeDriverZeroFee />
          </div>
          <div className="cv-auto">
            <WelcomePartnerSection />
          </div>
          <div className="cv-auto">
            <WelcomeSafetyStrip />
          </div>

          {/* 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">Already have an 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>
    </>
  );
}