function IPhone17ProMax() {
  return (
    <div className="relative w-[310px] sm:w-[350px] aspect-[9/19.5] bg-[#161619] rounded-[54px] border-[8px] border-[#222226] ring-1 ring-white/20 shadow-[0_35px_90px_-15px_rgba(0,0,0,0.3)] p-2.5 flex flex-col justify-between overflow-hidden select-none">
      
      {/* Metallic Titanium Side Buttons */}
      {/* Action / Mute Button */}
      <div className="absolute -left-[11px] top-24 w-[3.5px] h-7 bg-gradient-to-r from-[#3a3a40] to-[#1a1a1e] rounded-l-md" />
      {/* Volume Up */}
      <div className="absolute -left-[11px] top-36 w-[3.5px] h-12 bg-gradient-to-r from-[#3a3a40] to-[#1a1a1e] rounded-l-md" />
      {/* Volume Down */}
      <div className="absolute -left-[11px] top-52 w-[3.5px] h-12 bg-gradient-to-r from-[#3a3a40] to-[#1a1a1e] rounded-l-md" />
      {/* Side Power Button */}
      <div className="absolute -right-[11px] top-40 w-[3.5px] h-16 bg-gradient-to-l from-[#3a3a40] to-[#1a1a1e] rounded-r-md" />

      {/* Screen Inner Display */}
      <div className="relative w-full h-full bg-[#f6f8f6] rounded-[44px] overflow-hidden flex flex-col justify-between font-sans border border-black/10">
        
        {/* Glass Glare Reflection Overlay */}
        <div className="absolute inset-0 bg-gradient-to-tr from-transparent via-white/15 to-transparent pointer-events-none z-50" />

        {/* Dynamic Island */}
        <div className="absolute top-2.5 left-1/2 -translate-x-1/2 w-[118px] h-[30px] bg-black rounded-full z-40 flex items-center justify-between px-3 shadow-md">
          <div className="w-3.5 h-3.5 rounded-full bg-[#0d0d10] border border-[#222] flex items-center justify-center">
            <div className="w-1.5 h-1.5 rounded-full bg-[#0096F7] animate-pulse" />
          </div>
          <div className="w-2.5 h-2.5 rounded-full bg-[#141418]" />
        </div>

        {/* iOS Status Bar */}
        <div className="pt-3 px-6 pb-2 flex justify-between items-center text-xs font-semibold text-[#171717] z-30">
          <span className="font-bold text-[13px]">9:41</span>
          <div className="flex items-center gap-1.5">
            {/* Cellular */}
            <svg className="w-3.5 h-3.5 fill-current text-[#171717]" viewBox="0 0 24 24">
              <path d="M2 22h20V2z" />
            </svg>
            {/* Wi-Fi */}
            <svg className="w-3.5 h-3.5 fill-current text-[#171717]" viewBox="0 0 24 24">
              <path d="M12 3C7.95 3 4.21 4.34 1.2 6.6L12 21 22.8 6.6C19.79 4.34 16.05 3 12 3z" />
            </svg>
            {/* Battery */}
            <div className="w-5 h-2.5 border border-[#171717] rounded-sm p-0.5 flex items-center">
              <div className="w-full h-full bg-[#171717] rounded-xs" />
            </div>
          </div>
        </div>

        {/* Screen App Body */}
        <div className="flex-1 overflow-hidden px-3.5 pt-1 pb-2 flex flex-col gap-3 relative z-20">
          
          {/* Header Map Graphic Background Effect */}
          <div className="absolute top-0 left-0 right-0 h-28 bg-gradient-to-b from-[#e8f2ea] to-transparent -z-10 opacity-70" />

          {/* Nav Icons */}
          <div className="flex justify-between items-center pt-1">
            <div className="w-8 h-8 rounded-full bg-white/90 border border-[#e0e0e0] flex items-center justify-center text-sm font-bold text-[#171717] shadow-xs cursor-pointer">
              ‹
            </div>
            <div className="w-8 h-8 rounded-full bg-white/90 border border-[#e0e0e0] flex items-center justify-center text-xs font-bold text-[#171717] shadow-xs cursor-pointer">
              ✕
            </div>
          </div>

          {/* Title & Route Bar */}
          <div>
            <h3 className="text-xl font-bold text-[#171717] tracking-tight">
              Select product
            </h3>

            {/* Route Input Bar */}
            <div className="mt-2 bg-white/95 backdrop-blur-md border border-[#e2e2e2] rounded-full px-3.5 py-2 flex items-center gap-2 shadow-xs">
              <svg className="w-4 h-4 text-[#0096F7]" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
              </svg>
              <span className="text-xs font-semibold text-[#171717]">
                Athens to <span className="text-[#0096F7]">Thessaloniki</span>
              </span>
            </div>
          </div>

          {/* Product Pill Selector Tabs */}
          <div className="flex justify-between bg-white/80 backdrop-blur-md p-1 rounded-full border border-[#e2e2e2] text-xs font-medium shadow-xs">
            <div className="px-3 py-1 text-[#6a6a6a]">Standby €18</div>
            <div className="px-3 py-1 bg-[#171717] text-white rounded-full font-bold shadow-xs">Shared €28</div>
            <div className="px-3 py-1 text-[#6a6a6a]">Private €55</div>
          </div>

          {/* Main Selected Product Card */}
          <div className="bg-white border border-[#e2e2e2] rounded-2xl p-3.5 shadow-sm flex flex-col gap-2.5">
            <div className="flex justify-between items-start">
              <div>
                <div className="flex items-center gap-2">
                  <span className="font-bold text-sm text-[#171717]">Shared</span>
                  <span className="text-[9px] font-bold uppercase bg-[#e6f4fe] text-[#0096F7] px-2 py-0.5 rounded-full">
                    Popular
                  </span>
                </div>
                <div className="text-[11px] text-[#6a6a6a] leading-snug mt-0.5 max-w-[180px]">
                  Save by splitting fuel & tolls with verified travelers
                </div>
              </div>
              <div className="w-8 h-8 rounded-full bg-[#f3f3f3] flex items-center justify-center text-base">
                🚘
              </div>
            </div>

            {/* Departure Slots */}
            <div className="flex flex-col gap-2 mt-1">
              
              {/* Slot 1 (Selected) */}
              <div className="bg-[#e6f4fe] border border-[#0096F7]/30 rounded-xl p-2.5 flex justify-between items-center shadow-xs">
                <div>
                  <div className="text-xs font-bold text-[#171717] flex items-center gap-1.5">
                    <span>7:00 AM - 7:30 AM</span>
                    <span className="w-1.5 h-1.5 rounded-full bg-[#0096F7]" />
                  </div>
                  <div className="text-[10px] text-[#6a6a6a] mt-0.5">Latest arrival 11:45 AM</div>
                </div>
                <div className="text-right">
                  <div className="text-xs font-bold text-[#0096F7]">€18.50</div>
                  <div className="text-[9px] text-[#0080d4] font-semibold">Open Fare™</div>
                </div>
              </div>

              {/* Slot 2 */}
              <div className="bg-[#f9f9f9] border border-[#ebebeb] rounded-xl p-2.5 flex justify-between items-center hover:bg-white transition-colors">
                <div>
                  <div className="text-xs font-bold text-[#171717]">10:00 AM - 10:30 AM</div>
                  <div className="text-[10px] text-[#a3a3a3] mt-0.5">Latest arrival 2:45 PM</div>
                </div>
                <span className="text-xs font-bold text-[#171717]">€18.50</span>
              </div>

              {/* Slot 3 */}
              <div className="bg-[#f9f9f9] border border-[#ebebeb] rounded-xl p-2.5 flex justify-between items-center hover:bg-white transition-colors">
                <div>
                  <div className="text-xs font-bold text-[#171717]">1:00 PM - 1:30 PM</div>
                  <div className="text-[10px] text-[#a3a3a3] mt-0.5">Latest arrival 5:45 PM</div>
                </div>
                <span className="text-xs font-bold text-[#171717]">€18.50</span>
              </div>

            </div>
          </div>

        </div>

        {/* Home Indicator Bar */}
        <div className="pb-2.5 pt-1 flex justify-center z-30">
          <div className="w-32 h-1 bg-[#171717]/80 rounded-full" />
        </div>

      </div>
    </div>
  );
}

function DownloadApp() {
  const [showTooltip, setShowTooltip] = React.useState(false);
  const t = window.t;
  const lang = window.__LANG__ || 'el';

  const isGreek = lang === 'el';
  const badgeText = isGreek ? 'Διαθέσιμο σε iOS και Android' : 'Available on iOS and Android';
  const headingText = isGreek ? 'Κατέβασε την εφαρμογή' : 'Download today';
  const subtextText = isGreek ? 'Η εφαρμογή μας για κινητά έρχεται σύντομα. Μείνετε συντονισμένοι για ενημερώσεις.' : 'Our mobile app is coming soon. Stay tuned for updates.';
  const buttonText = isGreek ? 'Κατέβασμα' : 'Download';
  const comingSoonText = isGreek ? 'Σύντομα κοντά σας' : 'Coming soon';
  const qrSubtext = isGreek ? 'Ο κωδικός QR θα είναι διαθέσιμος σύντομα' : 'QR code available soon';

  return (
    <section 
      id="download" 
      className="bg-white w-full py-16 md:py-24 border-t border-b border-[#e5e5e5] overflow-hidden"
      aria-label={headingText}
    >
      <div className="max-w-[1140px] mx-auto px-4 md:px-10 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
        
        {/* Left Column: Info & Actions */}
        <div className="lg:col-span-6 flex flex-col items-center lg:items-start text-center lg:text-left gap-6 max-w-[540px] mx-auto lg:mx-0" data-reveal>
          
          {/* Badge with Apple & Android icons */}
          <div className="inline-flex items-center gap-2 rounded-full px-4 py-2 bg-[#f9f9f9] border border-[#e5e5e5] text-sm text-[#171717] font-medium shadow-sm">
            {/* Apple Icon */}
            <svg className="w-4 h-4 fill-current text-[#171717]" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.31c.67-.82 1.13-1.96.99-3.1-.97.04-2.17.65-2.86 1.46-.61.72-1.15 1.88-.99 3 1.09.09 2.21-.54 2.86-1.36z" />
            </svg>
            {/* Android Icon */}
            <svg className="w-4 h-4 fill-current text-[#171717]" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M6 18c0 .55.45 1 1 1h1v3c0 .55.45 1 1 1s1-.45 1-1v-3h4v3c0 .55.45 1 1 1s1-.45 1-1v-3h1c.55 0 1-.45 1-1v-9H6v9zm1.5-12C6.67 6 6 6.67 6 7.5S6.67 9 7.5 9 9 8.33 9 7.5 8.33 6 7.5 6zm9 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S17.33 6 16.5 6zm-9 12h9v-7h-9v7zm6.7-14.7L19.5 1.5c.34-.34.34-.89 0-1.23-.34-.34-.89-.34-1.23 0l-5.35 5.35C12.44 5.22 11.74 5 11 5s-1.44.22-1.92.62L3.73.27C3.39-.07 2.84-.07 2.5.27c-.34.34-.34.89 0 1.23L7.8 6.8C4.46 8.36 2 11.66 2 15.5V17c0 .55.45 1 1 1h18c.55 0 1-.45 1-1v-1.5c0-3.84-2.46-7.14-5.8-8.7z" />
            </svg>
            <span>{badgeText}</span>
          </div>

          {/* Large Heading */}
          <h2 className="font-sans text-4xl md:text-[54px] md:leading-[1.1] font-medium tracking-tight text-[#171717]">
            {headingText}
          </h2>

          {/* Subtitle */}
          <p className="text-base md:text-lg text-[#6a6a6a] leading-relaxed max-w-[460px]">
            {subtextText}
          </p>

          {/* Interactive Button Container with Hover / Focus Popup */}
          <div className="relative mt-2">
            
            {/* Hover / Focus QR Code Popup */}
            <div 
              id="qr-tooltip"
              role="tooltip"
              onMouseEnter={() => setShowTooltip(true)}
              onMouseLeave={() => setShowTooltip(false)}
              className={`absolute bottom-full mb-3 left-1/2 -translate-x-1/2 lg:left-0 lg:translate-x-0 bg-white border border-[#e5e5e5] rounded-[20px] p-5 shadow-[0_20px_40px_rgba(0,0,0,0.12)] z-50 w-[220px] flex flex-col items-center gap-3 transition-all duration-200 pointer-events-auto ${
                showTooltip 
                  ? 'opacity-100 translate-y-0 scale-100' 
                  : 'opacity-0 translate-y-2 scale-95 pointer-events-none'
              }`}
            >
              {/* Coming soon chip */}
              <span className="text-[11px] font-bold text-[#0096F7] bg-[#e6f4fe] px-3 py-1 rounded-full uppercase tracking-wider">
                {comingSoonText}
              </span>

              {/* Non-functional Placeholder QR Code SVG */}
              <div className="w-32 h-32 bg-[#f9f9f9] border border-[#e5e5e5] rounded-xl p-2 flex items-center justify-center relative overflow-hidden">
                <svg className="w-full h-full text-[#171717]" viewBox="0 0 100 100" fill="currentColor">
                  <rect x="5" y="5" width="30" height="30" rx="4" fill="none" stroke="currentColor" strokeWidth="6" />
                  <rect x="13" y="13" width="14" height="14" rx="2" />
                  <rect x="65" y="5" width="30" height="30" rx="4" fill="none" stroke="currentColor" strokeWidth="6" />
                  <rect x="73" y="13" width="14" height="14" rx="2" />
                  <rect x="5" y="65" width="30" height="30" rx="4" fill="none" stroke="currentColor" strokeWidth="6" />
                  <rect x="13" y="73" width="14" height="14" rx="2" />
                  <rect x="42" y="10" width="8" height="8" />
                  <rect x="52" y="18" width="8" height="8" />
                  <rect x="42" y="28" width="8" height="8" />
                  <rect x="10" y="42" width="8" height="8" />
                  <rect x="24" y="48" width="8" height="8" />
                  <rect x="42" y="45" width="16" height="16" rx="2" />
                  <rect x="65" y="42" width="8" height="8" />
                  <rect x="80" y="48" width="8" height="8" />
                  <rect x="45" y="68" width="8" height="8" />
                  <rect x="60" y="65" width="8" height="8" />
                  <rect x="75" y="75" width="16" height="16" rx="2" />
                </svg>
              </div>

              {/* Subtle Message */}
              <span className="text-xs text-[#6a6a6a] text-center font-medium leading-tight">
                {qrSubtext}
              </span>

              {/* Tooltip Arrow Indicator */}
              <div className="absolute -bottom-2 left-1/2 -translate-x-1/2 lg:left-8 lg:translate-x-0 w-4 h-4 bg-white border-b border-r border-[#e5e5e5] rotate-45"></div>
            </div>

            {/* Blue Download Button */}
            <button
              type="button"
              onClick={(e) => e.preventDefault()}
              onMouseEnter={() => setShowTooltip(true)}
              onMouseLeave={() => setShowTooltip(false)}
              onFocus={() => setShowTooltip(true)}
              onBlur={() => setShowTooltip(false)}
              aria-describedby="qr-tooltip"
              aria-expanded={showTooltip}
              aria-label={`${buttonText} - ${comingSoonText}`}
              className="bg-[#0096F7] hover:bg-[#0080d4] text-white font-medium text-base rounded-full px-8 py-3.5 h-[52px] transition-colors shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0096F7] focus-visible:ring-offset-2 flex items-center justify-center cursor-pointer"
            >
              {buttonText}
            </button>

          </div>

        </div>

        {/* Right Column: High-End iPhone 17 Pro Max Frame */}
        <div className="lg:col-span-6 flex justify-center w-full" data-reveal data-reveal-delay="120">
          <IPhone17ProMax />
        </div>

      </div>
    </section>
  );
}

window.DownloadApp = DownloadApp;