Footers

"use client";

import { ArrowRight } from "lucide-react";

import { Button, Input, WaveinnoLogo } from "@waveinno/ui";

/* Brand marks, drawn inline: icon sets no longer ship company logos. */
const SOCIAL = [
  { label: "Facebook", d: "M14 8.5V6.6c0-.8.2-1.3 1.4-1.3H17V2.2c-.3 0-1.3-.2-2.5-.2-2.5 0-4.2 1.5-4.2 4.3v2.2H7.6v3.4h2.7V22h3.7v-10.1h2.7l.4-3.4H14Z" },
  { label: "LinkedIn", d: "M6.9 8.8H3.3V21h3.6V8.8ZM5.1 3a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Zm15.6 10.6c0-3.3-1.8-5-4.3-5-2 0-2.9 1.1-3.4 1.9V8.8H9.4V21H13v-6.3c0-1.7.3-3.3 2.4-3.3s2.1 1.9 2.1 3.4V21h3.6l-.4-7.4Z" },
  { label: "YouTube", d: "M21.6 7.2a2.6 2.6 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4A2.6 2.6 0 0 0 2.4 7.2 27 27 0 0 0 2 12a27 27 0 0 0 .4 4.8 2.6 2.6 0 0 0 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-.4a2.6 2.6 0 0 0 1.8-1.8A27 27 0 0 0 22 12a27 27 0 0 0-.4-4.8ZM10 15V9l5.2 3L10 15Z" },
];

const COLUMNS = [
  { title: "Product", links: ["Sessions", "Gates", "Payments", "Reports", "Pricing"] },
  { title: "Solutions", links: ["Malls", "Hospitals", "Offices", "Residences", "Events"] },
  { title: "Company", links: ["About", "Careers", "Customers", "Press", "Contact"] },
  { title: "Help", links: ["Docs", "Status", "Security", "Terms", "Privacy"] },
];

export default function FooterColumns() {
  return (
    <footer className="border-t border-border bg-surface">
      <div className="mx-auto max-w-6xl px-4 pb-10 pt-16 sm:px-6">
        <div className="grid gap-12 lg:grid-cols-[1.3fr_2fr]">
          <div className="max-w-sm">
            <WaveinnoLogo className="h-5" />
            <p className="mt-4 text-[14px] leading-[1.6] text-muted">The operating system for car parks in Bangladesh. Made in Dhaka.</p>
            <form onSubmit={(e) => e.preventDefault()} className="mt-6">
              <label htmlFor="f-news" className="text-[13px] font-semibold text-text">
                Product news, monthly
              </label>
              <div className="mt-2 flex gap-2">
                <Input id="f-news" type="email" placeholder="you@company.com" />
                <Button type="submit" variant="primary" aria-label="Subscribe" className="shrink-0">
                  <ArrowRight />
                </Button>
              </div>
            </form>
          </div>
          <nav aria-label="Footer" className="grid grid-cols-2 gap-8 sm:grid-cols-4">
            {COLUMNS.map((c) => (
              <div key={c.title}>
                <p className="text-[13px] font-semibold text-text">{c.title}</p>
                <ul className="mt-4 space-y-2.5">
                  {c.links.map((l) => (
                    <li key={l}>
                      <a href="#" className="text-[13.5px] text-muted transition-colors hover:text-text">
                        {l}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </nav>
        </div>
        <div className="mt-14 flex flex-col-reverse items-center justify-between gap-4 border-t border-border pt-6 sm:flex-row">
          <p className="text-[12.5px] text-muted">© 2026 WAVEINNO Ltd. All rights reserved.</p>
          <div className="flex items-center gap-1">
            {SOCIAL.map((x) => (
              <a key={x.label} href="#" aria-label={x.label} className="grid size-9 place-items-center rounded-full text-muted transition-colors hover:bg-hover hover:text-text">
                <svg viewBox="0 0 24 24" className="size-4" fill="currentColor" aria-hidden>
                  <path d={x.d} />
                </svg>
              </a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

import { WaveinnoLogo } from "@waveinno/ui";

const SOCIAL = [
  { label: "Facebook", d: "M14 8.5V6.6c0-.8.2-1.3 1.4-1.3H17V2.2c-.3 0-1.3-.2-2.5-.2-2.5 0-4.2 1.5-4.2 4.3v2.2H7.6v3.4h2.7V22h3.7v-10.1h2.7l.4-3.4H14Z" },
  { label: "LinkedIn", d: "M6.9 8.8H3.3V21h3.6V8.8ZM5.1 3a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Zm15.6 10.6c0-3.3-1.8-5-4.3-5-2 0-2.9 1.1-3.4 1.9V8.8H9.4V21H13v-6.3c0-1.7.3-3.3 2.4-3.3s2.1 1.9 2.1 3.4V21h3.6l-.4-7.4Z" },
  { label: "YouTube", d: "M21.6 7.2a2.6 2.6 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4A2.6 2.6 0 0 0 2.4 7.2 27 27 0 0 0 2 12a27 27 0 0 0 .4 4.8 2.6 2.6 0 0 0 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-.4a2.6 2.6 0 0 0 1.8-1.8A27 27 0 0 0 22 12a27 27 0 0 0-.4-4.8ZM10 15V9l5.2 3L10 15Z" },
];

export default function FooterSimple() {
  return (
    <footer className="border-t border-border bg-canvas">
      <div className="mx-auto flex max-w-6xl flex-col items-center gap-6 px-4 py-10 sm:px-6 md:flex-row md:justify-between">
        <a href="#" aria-label="Home">
          <WaveinnoLogo className="h-5" />
        </a>
        <nav aria-label="Footer" className="flex flex-wrap justify-center gap-x-6 gap-y-2 text-[13.5px] text-muted">
          {["Product", "Pricing", "Customers", "Docs", "Privacy", "Terms"].map((l) => (
            <a key={l} href="#" className="transition-colors hover:text-text">
              {l}
            </a>
          ))}
        </nav>
        <div className="flex gap-1">
          {SOCIAL.map((x) => (
            <a key={x.label} href="#" aria-label={x.label} className="grid size-9 place-items-center rounded-full text-muted transition-colors hover:bg-hover hover:text-text">
              <svg viewBox="0 0 24 24" className="size-4" fill="currentColor" aria-hidden>
                <path d={x.d} />
              </svg>
            </a>
          ))}
        </div>
      </div>
      <p className="border-t border-border py-5 text-center text-[12.5px] text-muted">© 2026 WAVEINNO. Made in Dhaka.</p>
    </footer>
  );
}