import Image from "next/image";
import Link from "next/link";
import { NewsletterForm } from "@/components/layout/NewsletterForm";
import type { SocialName } from "@/lib/footer";
import {
  footerBottom,
  footerColumns,
  footerCta,
  footerNewsletter,
  footerSocials,
  footerSupport,
  paymentMethods,
} from "@/lib/footer";

/**
 * Official brand glyphs (Simple Icons geometry, 24x24). The previous set was
 * hand-approximated and the Instagram mark in particular filled solid instead
 * of reading as a camera outline.
 */
const SOCIAL_PATHS: Record<SocialName, string> = {
  facebook:
    "M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z",
  instagram:
    "M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0Zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03Zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162ZM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4Zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.439.645 1.439 1.439Z",
  twitter:
    "M23.953 4.57a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.06a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.936 4.936 0 0 0 4.604 3.417 9.867 9.867 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0 0 24 4.59Z",
  x: "M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z",
  youtube:
    "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814ZM9.545 15.568V8.432L15.818 12l-6.273 3.568Z",
  linkedin:
    "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286ZM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065Zm1.782 13.019H3.555V9h3.564v11.452ZM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003Z",
  threads:
    "M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.291 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.781 3.631 2.695 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.32.142 1.487.7 2.575 1.761 3.15 3.07.798 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221Z",
};

function SocialIcon({ name }: { name: SocialName }) {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d={SOCIAL_PATHS[name]} />
    </svg>
  );
}

function PhoneIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path
        d="M6.3 4.5h2.2l1.3 3.3-1.7 1.2a10.6 10.6 0 0 0 4.9 4.9l1.2-1.7 3.3 1.3v2.2a1.8 1.8 0 0 1-1.9 1.8A13.6 13.6 0 0 1 4.5 6.4a1.8 1.8 0 0 1 1.8-1.9Z"
        stroke="#0652e0"
        strokeWidth="1.6"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function MailIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <rect x="3.2" y="5.5" width="17.6" height="13" rx="2.4" stroke="#0652e0" strokeWidth="1.6" />
      <path d="m4.5 7.5 7.5 5.2 7.5-5.2" stroke="#0652e0" strokeWidth="1.6" strokeLinejoin="round" />
    </svg>
  );
}

function PinIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path
        d="M12 21s6.5-5.2 6.5-10a6.5 6.5 0 1 0-13 0c0 4.8 6.5 10 6.5 10Z"
        stroke="#0652e0"
        strokeWidth="1.6"
        strokeLinejoin="round"
      />
      <circle cx="12" cy="11" r="2.4" stroke="#0652e0" strokeWidth="1.6" />
    </svg>
  );
}

function WhatsAppIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm5.6 14.1c-.24.67-1.4 1.28-1.94 1.32-.5.04-.98.22-3.3-.69-2.77-1.09-4.53-3.9-4.67-4.08-.13-.18-1.11-1.48-1.11-2.82 0-1.34.7-2 .95-2.27.25-.27.55-.34.73-.34h.52c.17 0 .4-.06.62.48l.85 2.06c.07.14.12.31.02.5-.1.18-.15.29-.3.45l-.44.51c-.14.14-.29.3-.12.59.16.29.72 1.19 1.55 1.93 1.06.95 1.96 1.24 2.24 1.38.28.15.44.12.6-.07l.86-1c.2-.24.37-.18.62-.09l1.77.84c.26.12.43.19.5.3.06.1.06.6-.18 1.27l.23-.27Z" />
    </svg>
  );
}

function ArrowCircle() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5" />
      <path d="M9.5 12h5M12.5 9.3l2.7 2.7-2.7 2.7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/**
 * The sky watermark is the brand wordmark, not type — Figma has it flattened to
 * outlines in a condensed squarish face that no loaded font provides. These are
 * the same glyph paths the logo uses (lifted from `/logo/dk-bazar-logo.svg`,
 * icon and swoosh omitted); their 85.57 x 20.61 box is a 4.15 ratio, which is
 * exactly the 1075 x 259 the design draws here.
 */
const WORDMARK_PATHS = [
  "M70.0946 27.8824H64.4255V48.4882H70.0946L73.2358 45.4582V30.9124L70.0946 27.8824ZM70.3899 44.8021L68.769 46.4181H67.2488V29.9524H68.7464L70.3899 31.5935V44.8003V44.8021Z",
  "M84.8623 35.2563L82.8 37.2512L84.8623 39.2212V48.4882H82.0147V39.9023L80.3694 38.2863H78.8735V48.4882H76.0503V27.8824H78.8735V36.2162H80.3955L82.0147 34.6002V27.8824H84.8623V35.2563Z",
  "M100.641 37.2262L101.28 36.0392V30.9124L98.1393 27.8824H92.4702V48.4882H100.226L102.288 45.3563V38.5634L100.643 37.2244L100.641 37.2262ZM95.316 29.9524H96.7893L98.459 31.5935V35.6335L97.9447 36.5684L95.3178 37.2763V29.9524H95.316ZM99.4649 44.8522L98.5076 46.4181H95.316V39.4482L98.5562 38.5651L99.4649 39.3481V44.8522Z",
  "M105.092 29.0443V48.4882H105.136V28.7333C105.108 28.8298 105.092 28.9353 105.092 29.0443Z",
  "M110.761 27.8824H105.137V48.4882H107.916V41.1643H111.057V48.4882H113.903V30.9124L110.761 27.8824ZM111.057 39.0943H107.916V29.9524H109.413L111.057 31.5935V39.0943Z",
  "M116.708 45.3313L122.673 31.4415L121.151 29.9524H119.653V30.7354H116.83V29.0443C116.83 28.3364 117.443 27.8824 118.376 27.8824H122.499L125.739 31.0393L119.775 44.929L121.297 46.4181H122.77V45.6351H125.618V47.3262C125.618 48.0341 125.004 48.4882 124.071 48.4882H119.949L116.708 45.3313Z",
  "M134.214 27.8824H128.545V48.4882H131.367V41.1643H134.508V48.4882H137.355V30.9124L134.214 27.8824ZM134.508 39.0943H131.367V29.9524H132.864L134.508 31.5935V39.0943Z",
  "M148.355 37.2262L148.994 36.0392V30.9124L145.829 27.8824H140.184V48.4882H143.007V39.4464L146.272 38.5634L147.18 39.3463V48.4882H150.002V38.5634L148.358 37.2244L148.355 37.2262ZM146.147 35.6352L145.657 36.5702L143.005 37.2781V29.9542H144.503L146.147 31.5952V35.6352Z",
];

/**
 * One `· DK BAZAR` pairing. The wordmark keeps the design's 4.15 ratio at every
 * step; below `lg` it scales down, because the drawn 1077px would put barely a
 * letter and a half on a phone.
 */
function WordmarkUnit() {
  return (
    <>
      {/* The separator is a large round dot, centred on the wordmark's height
          (the run's `items-center` does that) rather than sitting on its
          baseline. */}
      <span className="block size-[36px] shrink-0 rounded-full bg-white sm:size-[52px] lg:size-[68px]" />
      <svg
        viewBox="64.4255 27.8824 85.5745 20.6058"
        className="block h-[110px] w-[457px] shrink-0 sm:h-[160px] sm:w-[665px] lg:h-[259px] lg:w-[1077px]"
        fill="#ffffff"
      >
        {WORDMARK_PATHS.map((d) => (
          <path key={d} d={d} />
        ))}
      </svg>
    </>
  );
}

/**
 * One run of the marquee. Three units is wider than any realistic viewport, so
 * the strip never shows a gap at either end. The trailing padding matches the
 * internal gap, which is what keeps the spacing even across the seam between
 * this run and its duplicate.
 */
function WordmarkRun() {
  return (
    <div className="flex shrink-0 items-center gap-[40px] pr-[40px] sm:gap-[55px] sm:pr-[55px] lg:gap-[70px] lg:pr-[70px]">
      <WordmarkUnit />
      <WordmarkUnit />
      <WordmarkUnit />
    </div>
  );
}

export function Footer() {
  return (
    <footer className="bg-background relative mt-[70px] overflow-hidden">
      {/* ------------------------------------------------------------------
          Sky scene.

          In Figma this is not a gradient at all: it is ten solid ellipses,
          every one carrying a 400px LAYER_BLUR (Ellipse 16 uses 165), stacked
          inside a group named "gradient color" that is itself held at 77%
          opacity. Shipping that live would mean ten 400px CSS blurs, so the
          ellipse stack is baked to one small PNG instead — it is pure blur,
          so it upscales without any visible loss.

          Everything below is authored in the design's 1440x1198 footer box and
          anchored to the *bottom*. The content above it is taller or shorter
          than Figma's depending on how the columns wrap, and bottom-anchoring
          is what keeps the horizon, ship and waves aligned regardless.
          ------------------------------------------------------------------ */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-x-0 bottom-0 h-[1198px] bg-[url('/footer/sky.png')] bg-[length:100%_100%] bg-bottom bg-no-repeat"
      />

      {/* clouds + watermark sit behind the water */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute bottom-0 left-1/2 h-[1198px] w-[1440px] -translate-x-1/2 overflow-hidden select-none"
      >
        <Image
          src="/footer/cloud-left.png"
          alt=""
          width={900}
          height={600}
          className="animate-cloud-drift-left absolute bottom-[238px] left-0 w-[451px] max-w-none"
        />
        <Image
          src="/footer/cloud-right.png"
          alt=""
          width={1220}
          height={813}
          className="animate-cloud-drift-right absolute -bottom-[22px] left-[905px] w-[610px] max-w-none"
        />
      </div>

      {/* Watermark marquee — `· DK BAZAR · DK BAZAR ·` drifting left forever.
          Unlike the clouds this is *not* pinned inside the 1440 design box: it
          has to run edge to edge at any width, so it spans the footer itself
          and only borrows the box's vertical offset. Still 30% opacity in
          HARD_LIGHT — that blend is why it reads as a tinted emboss against
          the sky rather than as flat white. */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-x-0 bottom-[142px] overflow-hidden opacity-30 mix-blend-hard-light select-none"
      >
        <div className="animate-wordmark-drift flex w-max">
          <WordmarkRun />
          <WordmarkRun />
        </div>
      </div>

      {/* Water. Three white vector layers in the design; the far pair read as
          one mass, and the near one paints over the ship. Edge traced off the
          Figma render, so it stretches horizontally without distorting. */}
      <svg
        aria-hidden="true"
        viewBox="0 0 1440 170"
        preserveAspectRatio="none"
        className="animate-wave-far pointer-events-none absolute bottom-0 -left-[65px] h-[170px] w-[calc(100%+130px)]"
      >
        <path
          d="M 0.0,40.5 Q 0.0,40.5 28.5,40.3 Q 57.0,40.1 86.0,43.1 Q 115.0,46.1 144.0,48.7 Q 173.0,51.3 201.5,49.2 Q 230.0,47.1 259.0,41.7 Q 288.0,36.3 316.5,29.6 Q 345.0,22.9 374.0,20.4 Q 403.0,17.9 431.5,16.0 Q 460.0,14.0 517.5,13.0 Q 575.0,12.0 632.5,13.0 Q 690.0,14.0 747.5,18.5 Q 805.0,23.0 834.0,27.2 Q 863.0,31.5 892.0,28.0 Q 921.0,24.6 949.5,21.3 Q 978.0,18.1 1007.0,18.4 Q 1036.0,18.7 1064.5,21.8 Q 1093.0,24.8 1122.0,29.0 Q 1151.0,33.1 1179.5,35.8 Q 1208.0,38.6 1237.0,38.8 Q 1266.0,39.1 1295.0,38.7 Q 1324.0,38.3 1352.5,36.7 Q 1381.0,35.1 1410.5,32.5 L 1440.0,29.9 L 1440.0,200.0 L 0.0,200.0 Z"
          fill="#ffffff"
          fillOpacity="0.83"
        />
      </svg>

      <div
        aria-hidden="true"
        className="pointer-events-none absolute bottom-0 left-1/2 h-[1198px] w-[1440px] -translate-x-1/2 overflow-hidden select-none"
      >
        {/* These are Figma "crop" fills: the node shows only the window its
            imageTransform selects, not the whole source. That window is baked
            into each asset, so they are drawn here at plain 1:1. */}
        <Image
          src="/footer/buoy-right.png"
          alt=""
          width={66}
          height={98}
          className="animate-buoy absolute bottom-[141px] left-[973px] w-[33px] max-w-none"
        />
        <Image
          src="/footer/buoy-left.png"
          alt=""
          width={60}
          height={116}
          className="animate-buoy-alt absolute bottom-[107px] left-[135px] w-[30px] max-w-none"
        />
      </div>

      {/* The ship sails. Like the wordmark it lives *outside* the 1440 design
          box — it has to leave the screen, not the box, so on a wide monitor it
          would otherwise vanish mid-air at x=1440.

          It travels right to left because that is the way the bow points. It
          sits after the buoys so it passes in front of them: it is drawn lower
          in the scene (bottom 93 against their 107/141), which in this
          perspective means nearer the viewer. The near wave still comes after
          it and paints over the hull — the design's own paint order.

          Two nested elements, because one element cannot run two independent
          transform animations: the outer one makes the crossing, the inner one
          rolls on the swell. */}
      <div
        aria-hidden="true"
        className="animate-ship-voyage pointer-events-none absolute bottom-[93px] left-0 w-[240px] select-none sm:w-[330px] lg:w-[448px]"
      >
        <Image
          src="/footer/container-ship.png"
          alt=""
          width={896}
          height={272}
          className="animate-ship-roll w-full"
        />
      </div>

      <svg
        aria-hidden="true"
        viewBox="0 0 1440 170"
        preserveAspectRatio="none"
        className="animate-wave-near pointer-events-none absolute bottom-0 -left-[65px] h-[170px] w-[calc(100%+130px)] [filter:drop-shadow(0_-2px_5px_rgba(163,214,248,0.45))]"
      >
        <path
          d="M 0.0,59.5 Q 0.0,59.5 28.5,59.3 Q 57.0,59.1 86.0,62.1 Q 115.0,65.1 144.0,67.7 Q 173.0,70.3 201.5,68.2 Q 230.0,66.1 259.0,60.7 Q 288.0,55.3 316.5,48.6 Q 345.0,41.9 374.0,39.4 Q 403.0,36.9 431.5,35.0 Q 460.0,33.0 517.5,32.0 Q 575.0,31.0 632.5,32.0 Q 690.0,33.0 747.5,37.5 Q 805.0,42.0 834.0,46.2 Q 863.0,50.5 892.0,47.0 Q 921.0,43.6 949.5,40.3 Q 978.0,37.1 1007.0,37.4 Q 1036.0,37.7 1064.5,40.8 Q 1093.0,43.8 1122.0,48.0 Q 1151.0,52.1 1179.5,54.8 Q 1208.0,57.6 1237.0,57.8 Q 1266.0,58.1 1295.0,57.7 Q 1324.0,57.3 1352.5,55.7 Q 1381.0,54.1 1410.5,51.5 L 1440.0,48.9 L 1440.0,200.0 L 0.0,200.0 Z"
          fill="#ffffff"
          fillOpacity="0.5"
        />
      </svg>

      {/*
        Blueprint guide lines. Positions measured off the Figma render: a
        horizontal hairline 50px down, a vertical one 60px in from the viewport
        edge with a node dot where they cross, and the column split at 555px
        into the 1200 container. Very low contrast by design — barely there.
      */}
      <div aria-hidden="true" className="pointer-events-none absolute inset-0 hidden lg:block">
        <div className="absolute top-[50px] right-0 left-[27px] h-px bg-[#29b6f6]/15" />
        {/* the rail runs the full height in Figma — it just disappears into
            the sky, where 15% cyan on blue is no longer distinguishable */}
        <div className="absolute inset-y-0 left-[61px] w-px bg-[#29b6f6]/15" />
        <div className="absolute top-[47px] left-[58px] h-[7px] w-[7px] rounded-full bg-[#29b6f6]/30" />
        <div className="absolute top-[315px] left-1/2 h-[300px] w-[1200px] -translate-x-1/2">
          <div className="absolute top-0 bottom-0 left-[555px] w-px bg-[#29b6f6]/12" />
        </div>
      </div>

      <div className="relative mx-auto max-w-[1200px] px-4 lg:px-0">
        {/* Link columns + newsletter. The top padding clears the blueprint
            crossbar at y=50 — without it the columns start at the footer's
            top edge and the hairline runs straight through them. */}
        <div className="grid gap-[40px] pt-[74px] pb-[42px] lg:grid-cols-[repeat(3,minmax(0,1fr))_minmax(0,1.4fr)]">
          {footerColumns.map((column) => (
            <div key={column.title}>
              <h3 className="mb-[18px] inline-block border-b border-[#29b6f6] pb-[2px] text-[13px] font-bold tracking-[0.02em] text-[#29b6f6]">
                {column.title}
              </h3>
              <ul className="flex flex-col gap-[10px]">
                {column.links.map((link, i) => (
                  <li key={link.label}>
                    <span className="flex items-center gap-[8px]">
                      <span className="h-[4px] w-[4px] shrink-0 rounded-full bg-[#1a1a1a]" />
                      <Link
                        href={link.href}
                        className="text-[14px] text-[#1a1a1a] transition-colors hover:text-brand"
                      >
                        {link.label}
                      </Link>
                      {link.online && (
                        <span className="flex items-center gap-[4px] rounded-full bg-[#e8fbef] px-[7px] py-[2px] text-[10px] font-semibold text-[#12a150]">
                          <span className="h-[5px] w-[5px] rounded-full bg-[#12a150]" />
                          Online
                        </span>
                      )}
                    </span>

                    {column.ctaAfterIndex === i && (
                      <Link
                        href={footerCta.href}
                        className="bg-ink mt-[14px] mb-[4px] inline-flex items-center gap-[10px] rounded-[10px] py-[9px] pr-[14px] pl-[20px] text-[13px] font-bold text-[#eefc72] transition-transform duration-300 hover:scale-[1.03]"
                      >
                        {footerCta.label}
                        <ArrowCircle />
                      </Link>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))}

          <div>
            {/* Plane sits beside the heading, clear of the form below it. */}
            <div className="flex items-start justify-between gap-[12px]">
              <h3 className="text-[22px] leading-[30px] font-bold">
                <span className="text-[#141B34]">{footerNewsletter.headingLead}</span>
                <span className="text-[#34CBFE]">{footerNewsletter.headingAccent}</span>
                <br />
                <span className="text-[#1a1a1a]">{footerNewsletter.headingRest}</span>
              </h3>
              <Image
                src="/footer/airplane.png"
                alt=""
                width={314}
                height={314}
                className="pointer-events-none -mt-[24px] -mr-[8px] w-[112px] shrink-0 select-none sm:w-[128px]"
              />
            </div>
            <NewsletterForm />
          </div>
        </div>
      </div>

      {/* Rails run full-bleed in the design, not just across the container. */}
      <div className="relative h-px w-full bg-[#29b6f6]/15" />

      <div className="relative mx-auto max-w-[1200px] px-4 lg:px-0">
        {/* brand + support | contact actions + payments */}
        <div className="grid gap-[40px] py-[42px] lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
          <div>
            <Image
              src="/logo/dk-bazar-logo.svg"
              alt="DK Bazar"
              width={176}
              height={64}
              className="h-auto w-[176px]"
            />
            <p className="mt-[18px] text-[14px] text-[#1a1a1a]">{footerSupport.tagline}</p>

            <h3 className="mt-[28px] mb-[16px] inline-block border-b border-[#29b6f6] pb-[2px] text-[13px] font-bold text-[#29b6f6]">
              {footerSupport.title}
            </h3>

            <address className="not-italic">
              <ul className="flex max-w-[540px] flex-col gap-[14px] rounded-[16px] border border-[#e6e8ee] bg-white px-[22px] py-[20px] shadow-[0_10px_30px_-24px_rgba(1,14,35,0.4)]">
                <li className="flex items-center gap-[12px]">
                  <PhoneIcon />
                  <a href={`tel:${footerSupport.phone.replace(/\s/g, "")}`} className="text-[14px] text-[#1a1a1a] transition-colors hover:text-brand">
                    {footerSupport.phone}
                  </a>
                </li>
                <li className="flex items-center gap-[12px]">
                  <MailIcon />
                  <a href={`mailto:${footerSupport.email}`} className="text-[14px] break-all text-[#1a1a1a] transition-colors hover:text-brand">
                    {footerSupport.email}
                  </a>
                </li>
                <li className="flex items-start gap-[12px]">
                  <span className="mt-[2px]">
                    <PinIcon />
                  </span>
                  <span className="text-[14px] leading-[21px] text-[#1a1a1a]">{footerSupport.address}</span>
                </li>
              </ul>
            </address>
          </div>

          <div>
            <div className="flex flex-wrap items-center gap-[14px]">
              <a
                href="https://wa.me/8801896127507"
                target="_blank"
                rel="noreferrer"
                className="flex h-[44px] items-center gap-[10px] rounded-[10px] bg-[#3ec14f] px-[22px] text-[14px] font-bold text-white transition-transform duration-300 hover:scale-[1.03]"
              >
                <WhatsAppIcon />
                WhatsApp
              </a>
              <Link
                href={footerCta.href}
                className="bg-ink flex h-[44px] min-w-[260px] flex-1 items-center justify-between rounded-[10px] px-[24px] text-[14px] font-bold text-white transition-transform duration-300 hover:scale-[1.01]"
              >
                Get a Free Quote
                <ArrowCircle />
              </Link>
            </div>

            <ul className="mt-[22px] flex flex-wrap gap-[6px]">
              {footerSocials.map((social) => (
                <li key={social.name}>
                  <a
                    href={social.href}
                    target="_blank"
                    rel="noreferrer"
                    aria-label={social.label}
                    className="flex h-[34px] w-[34px] items-center justify-center rounded-full bg-[#29b6f6] text-white transition-transform duration-300 hover:scale-110"
                  >
                    <SocialIcon name={social.name} />
                  </a>
                </li>
              ))}
            </ul>

            <p className="mt-[26px] mb-[14px] text-[14px] text-[#1a1a1a]">Payment Method</p>
            {/* 6 x 4 of 93x34 tiles on a 5.4px gutter — 585px across, which is
                the design's block width, not the full column. */}
            <ul className="grid max-w-[585px] grid-cols-3 gap-[5.4px] sm:grid-cols-5 lg:grid-cols-6">
              {paymentMethods.map((method) => (
                <li
                  key={method.id}
                  className="flex h-[34px] items-center justify-center rounded-[4px] border border-[#e9ecf2] bg-white px-[6px]"
                >
                  {method.image && (
                    <Image
                      src={method.image}
                      alt={method.name}
                      width={method.w * 3}
                      height={method.h * 3}
                      style={{ width: method.w, height: method.h }}
                      className="object-contain"
                    />
                  )}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      <div className="relative h-px w-full bg-[#29b6f6]/12" />

      {/* Clear space for the sky scene painted behind the whole footer. */}
      <div className="h-[300px] sm:h-[360px]" />

      {/* Bottom bar rides on the water, which is why it carries no fill. */}
      {/* No background here — the strip keeps the footer's own sky tint rather
          than being washed out white, and a rail separates it. */}
      <div className="relative border-t border-[#29b6f6]/15">
          <div className="mx-auto flex max-w-[1200px] flex-col items-center justify-between gap-[10px] px-4 py-[14px] text-[12px] text-[#1a1a1a] sm:flex-row lg:px-0">
            <p>{footerBottom.copyright}</p>

            <a
              href={footerBottom.developedBy.href}
              target="_blank"
              rel="noreferrer"
              className="group flex items-center gap-[8px] transition-opacity hover:opacity-80"
            >
              <span>{footerBottom.developedBy.label}</span>
              <Image
                src={footerBottom.developedBy.logo}
                alt={footerBottom.developedBy.name}
                width={891}
                height={927}
                className="h-[34px] w-auto object-contain transition-transform duration-300 group-hover:scale-105"
              />
            </a>

            <ul className="flex gap-[18px]">
              {footerBottom.links.map((link) => (
                <li key={link.label}>
                  <Link href={link.href} className="transition-colors hover:text-brand">
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
      </div>
    </footer>
  );
}