// later.jsx: How it works, FAQ, Final CTA, Footer (PH)

function HowItWorks() {
  const T = window.l2uTokens;
  const steps = [
    { n: "01", title: "Book a 15-minute demo", body: "We'll show you Locate2u running with your business: your logo on the tracking page, your delivery types, your customer experience. No generic walkthroughs.", dur: "15 min" },
    { n: "02", title: "Set up your account", body: "We'll do it with you. Import drivers, set service areas, and configure your tracking page in one session. Most fleets are live within a week.", dur: "1 session" },
    { n: "03", title: "Train your drivers in 10 minutes", body: "The driver app has two buttons: start and finish. Your drivers will get it the first time. We provide a quick guide in English and basic Tagalog.", dur: "10 min" },
    { n: "04", title: "Go live and measure", body: 'Your first week tells you everything. Most customers see "where is my order?" calls drop within days. By month 2, drivers are doing more drops per day.', dur: "Week 1" },
  ];
  return (
    <section style={{ background: T.cream, padding: "120px 80px", fontFamily: T.fontSans }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <window.L2U_SectionHead
          eyebrow="HOW IT WORKS"
          title="From signup to first delivery in under a week."
          body="Most fleets complete onboarding in one session. We do it with you, not at you."
        />
        <div style={{ position: "relative" }}>
          {/* Horizontal line connecting steps */}
          <div style={{
            position: "absolute", top: 36, left: 36, right: "calc(25% - 51px)",
            height: 2, background: "repeating-linear-gradient(to right, rgba(43,147,255,0.30) 0 8px, transparent 8px 16px)",
            zIndex: 0,
          }}/>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, position: "relative", zIndex: 1 }}>
            {steps.map((s) => (
              <div key={s.n} style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", textAlign: "left", gap: 18 }}>
                <div style={{
                  width: 72, height: 72, borderRadius: 20,
                  background: "#fff",
                  border: "1px solid rgba(28,62,97,0.10)",
                  boxShadow: "0 8px 18px rgba(15,31,56,0.06)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: T.fontMono, fontWeight: 700, fontSize: 22,
                  color: T.primary, letterSpacing: "-0.5px",
                }}>{s.n}</div>
                <div style={{ alignSelf: "stretch", textAlign: "left" }}>
                  <div style={{
                    fontFamily: T.fontMono, fontSize: 10, letterSpacing: "1.4px",
                    color: T.primaryDeep, fontWeight: 700, marginBottom: 8,
                  }}>{s.dur.toUpperCase()}</div>
                  <div style={{ fontWeight: 900, fontSize: 19, color: T.bluishGrey, lineHeight: "24px", letterSpacing: "-0.2px", marginBottom: 10 }}>
                    {s.title}
                  </div>
                  <div style={{ fontSize: 14, lineHeight: "22px", color: T.mute }}>{s.body}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const T = window.l2uTokens;
  const items = [
    { q: "How much does Locate2u cost in the Philippines?", a: "Plans start at ₱795 per driver per month for Starter (3–9 drivers) and ₱1,114 per driver per month for Growth (10–30 drivers). No setup fees, save with annual billing, and a 30-day money-back guarantee." },
    { q: "Is Locate2u different from Lalamove, Grab, or Borzo?", a: "Yes, completely different. Lalamove, Grab, and Borzo are marketplaces that book a third-party driver when you don't have one. Locate2u is delivery management software for businesses that already have their own drivers. Many businesses use both." },
    { q: "What kind of businesses is Locate2u for in the Philippines?", a: "Businesses that own their fleet of drivers and do daily deliveries, typically 5 to 100+ drivers. The sweet spot is 10 to 30 drivers. Common verticals are furniture & appliances, water & LPG, pharmacy, florists, F&B distribution, and cleaning & field services." },
    { q: "Will my drivers actually use the app?", a: "Yes. The driver app has one button to start a trip and one to finish, simple enough that a first-time driver is comfortable within a day. We train your team in your language during onboarding." },
    { q: "How is Locate2u different from using Viber, WhatsApp, or Excel?", a: "Viber and Excel work until your fleet grows past about 5 drivers. After that, you lose visibility, drivers take inefficient routes, customers call constantly asking for updates, and proof of delivery becomes a guessing game. Locate2u replaces all of that with one platform built for the job." },
    { q: "Do you support local e-wallets or PH bank transfers?", a: "Local e-wallet and InstaPay payments are coming next quarter. Today we accept credit card and international bank transfer." },
    { q: "Do you offer support in Tagalog?", a: "Yes. Our local team supports customers in English and Tagalog via email, Viber, and Zoom. Driver app translation is rolling out in phases." },
    { q: "How long is the commitment?", a: "Choose monthly or annual billing. Annual is billed once a year and saves you about 17% (two months free), which is what most fleets pick. Either way, you're covered by our 30-day money-back guarantee, so you can commit with confidence." },
    { q: "Where in the Philippines do you operate?", a: "Anywhere with mobile data coverage. Whether you're in Metro Manila, Cebu, Davao, or a smaller city, the software works the same, as long as your drivers have a mobile signal." },
    { q: "Can I see Locate2u running before I commit?", a: "Yes, book a 15-minute demo. We'll set it up with your business details so you see exactly what your dispatchers, drivers, and customers will experience." },
  ];
  return (
    <section style={{ background: "#fff", padding: "120px 80px", fontFamily: T.fontSans }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "0.9fr 1.4fr", gap: 80, alignItems: "flex-start",
        }}>
          <div style={{ position: "sticky", top: 20 }}>
            <window.L2U_Eyebrow>FAQ</window.L2U_Eyebrow>
            <h2 style={{
              margin: "16px 0 16px", fontSize: 44, fontWeight: 900,
              lineHeight: "52px", letterSpacing: "-1.2px", color: T.bluishGrey,
              textWrap: "balance",
            }}>
              Frequently asked questions.
            </h2>
            <p style={{ margin: "0 0 24px", fontSize: 16, lineHeight: "26px", color: T.mute }}>
              Can't find what you need? Our team replies via Viber, email, or Zoom, usually within a few hours during PH business hours.
            </p>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              <a href="/request-access" style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                padding: "10px 14px", borderRadius: 999, background: T.cream,
                border: "1px solid rgba(28,62,97,0.10)",
                color: T.bluishGrey, fontSize: 13, textDecoration: "none", fontWeight: 600,
              }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#7B5FD2" }}/>
                Chat on Viber
              </a>
              <a href="/pricing" style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                padding: "10px 14px", borderRadius: 999, background: T.cream,
                border: "1px solid rgba(28,62,97,0.10)",
                color: T.bluishGrey, fontSize: 13, textDecoration: "none", fontWeight: 600,
              }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: T.primary }}/>
                See pricing in pesos
              </a>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {items.map((it, i) => (
              <FAQItem key={i} q={it.q} a={it.a} open={i === 0}/>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQItem({ q, a, open }) {
  const T = window.l2uTokens;
  const [isOpen, setOpen] = React.useState(!!open);
  return (
    <div
      style={{
        background: T.cream, border: `1px solid ${isOpen ? "rgba(43,147,255,0.35)" : "rgba(28,62,97,0.08)"}`,
        borderRadius: 14, padding: "18px 22px", cursor: "pointer",
        transition: "border-color .15s ease, background .15s ease",
      }}
      onClick={() => setOpen(!isOpen)}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
        <div style={{ fontWeight: 600, fontSize: 16, color: T.bluishGrey, lineHeight: "22px" }}>{q}</div>
        <span style={{
          flexShrink: 0, width: 28, height: 28, borderRadius: "50%",
          background: isOpen ? T.primary : "rgba(43,147,255,0.10)",
          color: isOpen ? "#fff" : T.primary,
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          fontWeight: 700, fontSize: 18, lineHeight: 1,
        }}>{isOpen ? "−" : "+"}</span>
      </div>
      {isOpen && (
        <div style={{ marginTop: 12, fontSize: 14, lineHeight: "22px", color: T.body }}>{a}</div>
      )}
    </div>
  );
}

function FinalCTA() {
  const T = window.l2uTokens;
  return (
    <section style={{ background: T.cream, padding: "0 80px 120px", fontFamily: T.fontSans }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto",
        background: "linear-gradient(135deg,#1C3E61 0%,#01101F 100%)",
        color: "#fff", borderRadius: 28,
        padding: "88px 80px", textAlign: "center",
        position: "relative", overflow: "hidden",
      }}>
        <div style={{ position: "relative" }}>
          <window.L2U_Eyebrow color="#6EC1F7">SEE IT IN 15 MIN</window.L2U_Eyebrow>
          <h2 style={{
            margin: "20px 0 0", fontSize: 56, fontWeight: 900,
            lineHeight: "64px", letterSpacing: "-1.6px",
            textWrap: "balance",
          }}>
            See how much your fleet could save in <span style={{ color: "#6EC1F7" }}>15 minutes</span>.
          </h2>
          <p style={{ margin: "24px auto 36px", maxWidth: 760, fontSize: 18, lineHeight: "28px", color: "rgba(255,255,255,0.78)" }}>
            Request access and we'll show you Locate2u with your business set up: your logo, your delivery type, your customer's experience. No sales pressure. If it's not a fit, we'll tell you.
          </p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", marginBottom: 20, flexWrap: "wrap" }}>
            <button onClick={() => { window.location.href = "/request-access"; }}
              onMouseEnter={(e) => { e.currentTarget.style.background = "#1C82EF"; e.currentTarget.style.transform = "translateY(-1px)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = T.primary; e.currentTarget.style.transform = ""; }}
              style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              background: T.primary, color: "#fff", border: "none", cursor: "pointer",
              padding: "16px 30px", borderRadius: 12, fontWeight: 700, fontSize: 16,
              boxShadow: "0 8px 28px rgba(43,147,255,0.4)",
              transition: "background .15s ease, transform .15s ease",
            }}>
              Request Access
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
            </button>
            <button
              onClick={() => { const a = document.createElement("a"); a.href = "/Locate2u-PH-Pricing.pdf"; a.download = "Locate2u-PH-Pricing.pdf"; document.body.appendChild(a); a.click(); a.remove(); }}
              onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.16)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.40)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.08)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.20)"; }}
              style={{
              padding: "16px 28px", borderRadius: 12,
              background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.20)",
              color: "#fff", cursor: "pointer", fontWeight: 700, fontSize: 16,
              display: "inline-flex", alignItems: "center", gap: 8,
              transition: "background .15s ease, border-color .15s ease",
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 3v4a1 1 0 0 0 1 1h4M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2Z"/></svg>
              Download pricing PDF
            </button>
          </div>
          <div style={{ fontFamily: T.fontMono, fontSize: 12, color: "rgba(255,255,255,0.5)", letterSpacing: "0.3px" }}>
            Cancel anytime
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const T = window.l2uTokens;
  const cols = [
    {
      h: "PRODUCT",
      items: [{ label: "Route optimization", href: "/ph/products/route-optimization" }, { label: "Customer tracking", href: "/ph/products/customer-tracking" }, { label: "Proof of delivery", href: "/ph/products/proof-of-delivery" }, { label: "Driver app", href: "/ph/products/driver-app" }, { label: "Dispatch dashboard", href: "/ph/products/dispatch-dashboard" }, { label: "API & integrations", href: "/ph/products/api-integrations" }],
    },
    {
      h: "BY INDUSTRY",
      items: [{ label: "Furniture delivery", href: "/ph/solutions/furniture-delivery" }, { label: "Water & LPG delivery", href: "/ph/solutions/water-lpg-delivery" }, { label: "Pharmacy delivery", href: "/ph/solutions/pharmacy-delivery" }, { label: "Florist delivery", href: "/ph/solutions/florist-delivery" }, { label: "F&B distribution", href: "/ph/solutions/fb-distribution" }, { label: "Field service scheduling", href: "/ph/solutions/field-service-scheduling" }],
    },
    {
      h: "BY CITY",
      items: [{ label: "Metro Manila", href: "/ph/solutions/metro-manila" }, { label: "Quezon City", href: "/ph/solutions/quezon-city" }, { label: "Makati", href: "/ph/solutions/makati" }, { label: "Cebu", href: "/ph/solutions/cebu" }, { label: "Davao", href: "/ph/solutions/davao" }, { label: "Clark · Pampanga", href: "/ph/solutions/clark-pampanga" }],
    },
    {
      h: "RESOURCES",
      items: [
        { label: "Blog",                 href: "https://www.locate2u.com/blog/" },
        { label: "Editorial Policy",      href: "https://www.locate2u.com/blog/editorial-policy/" },
        { label: "Customer Stories",      href: "https://www.locate2u.com/customers/" },
        { label: "Masterclasses",         href: "https://www.locate2u.com/resources/masterclasses/" },
        { label: "API Documentation",     href: "https://www.locate2u.com/resources/api-docs/" },
        { label: "Help Center",           href: "https://www.locate2u.com/resources/help-center/" },
        { label: "Product Updates",       href: "https://www.locate2u.com/resources/product-updates/" },
        { label: "Software Alternatives", href: "https://www.locate2u.com/alternatives/" },
      ],
    },
    {
      h: "COMPANY",
      items: [
        { label: "About Us",        href: "https://www.locate2u.com/company/about/" },
        { label: "Customers",       href: "https://www.locate2u.com/customers/" },
        { label: "Pricing",         href: "https://locate2u-ph.com/pricing" },
        { label: "Press",           href: "https://www.locate2u.com/company/press/" },
        { label: "Events",          href: "https://www.locate2u.com/company/events/" },
        { label: "Investor Center", href: "https://locatetech.nz/" },
        { label: "Security",        href: "https://www.locate2u.com/security/" },
        { label: "Contact Us",      href: "https://locate2u-ph.com/company/contact/" },
      ],
    },
  ];
  return (
    <footer style={{ background: T.darkBlue, color: "#fff", padding: "96px 80px 32px", fontFamily: T.fontSans }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr repeat(5, 1fr)", gap: 40 }}>
          <div>
            <a href="index.html" aria-label="Locate2u Philippines, home" style={{ display: "inline-block", marginBottom: 18 }}>
              <img src={(window.__resources && window.__resources.logoBlue) || "assets/logo-blue.png"} alt="Locate2u" style={{ height: 36, width: "auto", display: "block" }}/>
            </a>
            <div style={{ fontSize: 14, lineHeight: "24px", color: "rgba(255,255,255,0.65)", marginBottom: 24, maxWidth: 280 }}>
              Delivery management software for Philippine fleets: route optimization, real-time tracking, and proof of delivery.
            </div>
            <div style={{
              fontFamily: T.fontMono, fontSize: 11, color: "rgba(255,255,255,0.55)",
              lineHeight: "20px", letterSpacing: "0.3px", marginBottom: 18,
            }}>
              <div style={{ color: "rgba(255,255,255,0.85)", marginBottom: 6, fontWeight: 700 }}>LOCATE2U PHILIPPINES</div>
              Metro Manila<br/>
              <span style={{ color: "#6EC1F7" }}>+63 918 239 7914</span><br/>
              hello@locate2u.ph
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <div style={{
                fontFamily: T.fontMono, fontWeight: 700, fontSize: 11,
                letterSpacing: "1.4px", color: "rgba(255,255,255,0.45)", marginBottom: 18,
              }}>{c.h}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
                {c.items.map((it) => {
                  const label = typeof it === "string" ? it : it.label;
                  const href = typeof it === "string" ? "#" : it.href;
                  return (
                    <li key={label}>
                      <a href={href} style={{ color: "rgba(255,255,255,0.78)", textDecoration: "none", fontSize: 13.5 }}>{label}</a>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </div>
        {/* Region switcher */}
        <div style={{
          marginTop: 64, padding: "24px 0",
          borderTop: "1px solid rgba(255,255,255,0.10)",
          borderBottom: "1px solid rgba(255,255,255,0.10)",
          display: "flex", alignItems: "center", flexWrap: "wrap", gap: 30,
        }}>
          <span style={{
            fontFamily: T.fontMono, fontWeight: 700, fontSize: 14,
            letterSpacing: "1.5px", color: "rgba(255,255,255,0.9)",
          }}>REGION</span>
          {[
            { label: "Global", href: "https://www.locate2u.com/" },
            { label: "AU", href: "https://www.locate2u.com/au/" },
            { label: "US", href: "https://www.locate2u.com/us/" },
            { label: "CA", href: "https://www.locate2u.com/ca/" },
            { label: "NZ", href: "https://www.locate2u.com/nz/" },
            { label: "UK", href: "https://www.locate2u.com/uk/" },
            { label: "IN", href: "https://www.locate2u.com/in/" },
            { label: "PH", href: "https://locate2u-ph.com/" },
          ].map((r) => {
            const active = r.label === "PH";
            return (
              <a key={r.label} href={r.href} style={{
                fontSize: 16, textDecoration: "none", lineHeight: 1,
                padding: active ? "8px 16px" : "8px 0", borderRadius: 8,
                background: active ? "rgba(255,255,255,0.10)" : "transparent",
                color: active ? "#fff" : "rgba(255,255,255,0.8)",
                fontWeight: active ? 600 : 500,
              }}>{r.label}</a>
            );
          })}
          {/* Country dropdown (all regions) */}
          <div style={{ marginLeft: "auto", position: "relative", display: "inline-flex", alignItems: "center" }}>
            <select
              defaultValue="https://locate2u-ph.com/"
              onChange={(e) => { if (e.target.value) window.location.href = e.target.value; }}
              aria-label="Choose region"
              style={{
                appearance: "none", WebkitAppearance: "none", MozAppearance: "none",
                background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.16)",
                color: "#fff", fontFamily: T.fontSans, fontSize: 15, lineHeight: 1,
                padding: "10px 40px 10px 16px", borderRadius: 10, cursor: "pointer",
              }}>
              {[
                { u: "https://www.locate2u.com/",    t: "🌐 Global" },
                { u: "https://www.locate2u.com/au/", t: "🇦🇺 Australia" },
                { u: "https://www.locate2u.com/ca/", t: "🇨🇦 Canada" },
                { u: "https://www.locate2u.com/in/", t: "🇮🇳 India" },
                { u: "https://www.locate2u.com/nz/", t: "🇳🇿 New Zealand" },
                { u: "https://locate2u-ph.com/",     t: "🇵🇭 Philippines" },
                { u: "https://www.locate2u.com/uk/", t: "🇬🇧 United Kingdom" },
                { u: "https://www.locate2u.com/us/", t: "🇺🇸 United States" },
              ].map((o) => (
                <option key={o.u} value={o.u} style={{ color: "#1C3E61", background: "#fff" }}>{o.t}</option>
              ))}
            </select>
            <span style={{ position: "absolute", right: 13, pointerEvents: "none", display: "inline-flex", color: "rgba(255,255,255,0.55)" }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
            </span>
          </div>
        </div>

        {/* Legal links + social */}
        <div style={{
          marginTop: 28,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          flexWrap: "wrap", gap: 20,
        }}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 28, fontSize: 14 }}>
            {[
              { label: "System Status", href: "https://status.locate2u.com/", ext: true },
              { label: "Privacy Policy", href: "https://www.locate2u.com/legal/privacy/", ext: true },
              { label: "Terms & Conditions", href: "https://www.locate2u.com/legal/terms/", ext: true },
              { label: "Cookie Policy", href: "https://www.locate2u.com/legal/cookies/", ext: true },
              { label: "Sitemap", href: "/sitemap.xml", ext: false },
            ].map((it) => (
              <a key={it.label} href={it.href} {...(it.ext ? { target: "_blank", rel: "noopener noreferrer" } : {})} style={{ color: "rgba(255,255,255,0.78)", textDecoration: "none" }}>{it.label}</a>
            ))}
          </div>
          <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
            {[
              { name: "Facebook", href: "https://www.facebook.com/locate2u", path: "M24 12.07C24 5.41 18.63 0 12 0S0 5.41 0 12.07c0 6 4.39 10.97 10.13 11.87v-8.4H7.08v-3.47h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.52c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.47h-2.8v8.4C19.61 23.04 24 18.07 24 12.07z" },
              { name: "X", href: "https://x.com/locate2u", path: "M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.41l-5.8-7.58-6.64 7.58H.46l8.6-9.83L0 1.15h7.59l5.24 6.93zm-1.29 19.49h2.04L6.49 3.24H4.31z" },
              { name: "YouTube", href: "https://www.youtube.com/@locate2u", path: "M23.5 6.2a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.51A3.02 3.02 0 0 0 .5 6.2C0 8.07 0 12 0 12s0 3.93.5 5.8a3.02 3.02 0 0 0 2.12 2.14c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.8zM9.55 15.57V8.43L15.82 12z" },
              { name: "LinkedIn", href: "https://www.linkedin.com/company/locate2u", path: "M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z" },
            ].map((s) => (
              <a key={s.name} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.name} title={s.name} style={{
                width: 36, height: 36, borderRadius: "50%",
                border: "1px solid rgba(255,255,255,0.25)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                color: "rgba(255,255,255,0.75)", textDecoration: "none",
              }}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" fillRule="evenodd" aria-hidden="true">
                  <path d={s.path}/>
                </svg>
              </a>
            ))}
          </div>
        </div>

        {/* Copyright */}
        <div style={{
          marginTop: 28,
          fontFamily: T.fontMono, fontSize: 11, color: "rgba(255,255,255,0.45)",
          letterSpacing: "0.4px", lineHeight: 1.6,
        }}>
          © 2026 Locate Technologies Limited · Listed on NZX: LOC
        </div>
      </div>
    </footer>
  );
}

window.L2U_HowItWorks = HowItWorks;
window.L2U_FAQ = FAQ;
window.L2U_FinalCTA = FinalCTA;
window.L2U_Footer = Footer;
