// Footer.jsx
//
// Multi-column sitemap footer. Links to pages that will always be
// lead-capture-only by design - Resources/Insights (no blog CMS exists) and
// Developer Platform (no public API exists) - carry an explicit "Early
// Access Portal" tag, per SPEC-07's anti-hallucination conversion pattern
// (Section 3/9). Everything else (Product/Solutions, Case Studies, Careers)
// is NOT tagged: each now has real content behind it, not a placeholder.
//
// Also renders PrivacyNotice, a small dismissible banner - deliberately
// NOT a cookie-consent prompt with an accept/reject choice, since this
// site sets zero tracking or advertising cookies (verified: no
// document.cookie, no analytics/ad scripts anywhere in this codebase). A
// consent prompt for tracking that doesn't exist would be a dark pattern,
// not a real feature - so this states the honest fact instead and links to
// the Privacy Policy. Its own dismissal flag is the one piece of local
// storage LegalPage.jsx's Cookies section already covers ("limited to
// what's needed for the site to function").
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment. PrivacyNotice uses React.useState, so
// (unlike the rest of this file) it does depend on `window.React` being
// ready by the time Footer actually renders - true by then, since App()
// only boots after the react-ready bridge script runs (see index.html).

function EarlyAccessTag() {
  return (
    <span className="ml-2 inline-flex items-center rounded-full border border-brand-green/30 bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-700">
      Early Access
    </span>
  );
}

function FooterLink({ href, label, tagged }) {
  return (
    <li>
      <a href={href} className="inline-flex items-center text-sm text-blue-100 transition hover:text-white">
        {label}
        {tagged && <EarlyAccessTag />}
      </a>
    </li>
  );
}

function FooterColumn({ title, children }) {
  return (
    <div>
      <h4 className="text-xs font-semibold uppercase tracking-wide text-blue-300">{title}</h4>
      <ul className="mt-4 space-y-3">{children}</ul>
    </div>
  );
}

const PRIVACY_NOTICE_DISMISSED_KEY = "skelbiz_privacy_notice_dismissed";

function PrivacyNotice() {
  const [dismissed, setDismissed] = React.useState(() => {
    try {
      return window.localStorage.getItem(PRIVACY_NOTICE_DISMISSED_KEY) === "1";
    } catch (e) {
      return false;
    }
  });

  if (dismissed) return null;

  const dismiss = () => {
    try {
      window.localStorage.setItem(PRIVACY_NOTICE_DISMISSED_KEY, "1");
    } catch (e) {
      // Private browsing / storage disabled - fine, it just re-shows next visit.
    }
    setDismissed(true);
  };

  return (
    <div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 px-6 py-4 shadow-lifted backdrop-blur">
      <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-3 sm:flex-row">
        <p className="text-sm text-slate-600">
          This site doesn't use tracking or advertising cookies - no analytics, no ad pixels, nothing
          watching you across visits.{" "}
          <a href="/privacy-policy/" className="font-semibold text-emerald-700 hover:text-emerald-800">
            Read our Privacy Policy
          </a>
          .
        </p>
        <button
          type="button"
          onClick={dismiss}
          className="shrink-0 rounded-card bg-brand-navy px-4 py-2 text-xs font-semibold text-white transition hover:bg-brand-navy/90"
        >
          Got it
        </button>
      </div>
    </div>
  );
}

const PRODUCT_COLUMN_LINKS = [
  { slug: "fleet-dispatch", label: "Fleet & Dispatch" },
  { slug: "sales-orders", label: "Sales Orders" },
  { slug: "purchase-grn", label: "Purchase Orders & GRN" },
  { slug: "inventory", label: "Inventory Management" },
  { slug: "warehouses", label: "Multi-Warehouse Management" },
  { slug: "production-workflow", label: "Production & WIP Workflow" },
  { slug: "business-rules", label: "Business Rules Engine" },
  { slug: "analytics-dashboards", label: "Analytics & Dashboards" },
  { slug: "ai-assistant", label: "AI Business Assistant" },
];

function Footer() {
  const year = new Date().getFullYear();

  return (
    <>
    <footer className="bg-brand-navy">
      <div className="mx-auto max-w-7xl px-6 py-16">
        <div className="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
          <div>
            <img
              src="/src/assets/logo-navy.png"
              alt="SkelBiz - Manufacturing Operations Automation Platform"
              className="h-8 w-auto"
            />
            <p className="mt-4 max-w-xs text-sm leading-relaxed text-blue-100">
              Manufacturing operations automation - purchase, production, inventory, and dispatch on one
              configurable platform.
            </p>
            <p className="mt-4 font-medium text-emerald-300">
              SkelBiz - A product by Upmarx Digi-Labs Private Limited
            </p>
          </div>

          <FooterColumn title="Product">
            {PRODUCT_COLUMN_LINKS.map((l) => (
              <FooterLink key={l.slug} href={`/product/${l.slug}/`} label={l.label} />
            ))}
            <FooterLink href="/product/" label="View Full Platform →" />
          </FooterColumn>

          <FooterColumn title="Company & Solutions">
            <FooterLink href="/solutions/manufacturing/" label="Manufacturing SMEs" />
            <FooterLink href="/solutions/processing/" label="Processing & Converting" />
            <FooterLink href="/solutions/distribution/" label="Distribution & Logistics" />
            <FooterLink href="/solutions/" label="View All Solutions →" />
            <FooterLink href="/about/" label="About" />
            <FooterLink href="/careers/" label="Careers" />
            <FooterLink href="/contact/" label="Contact" />
          </FooterColumn>

          <FooterColumn title="Resources & Legal">
            <FooterLink href="/resources/" label="Insights & Resources" tagged />
            <FooterLink href="/developers/" label="Developer Platform" tagged />
            <FooterLink href="/case-studies/" label="Case Studies" />
            <FooterLink href="/security/" label="Security & Trust" />
            <FooterLink href="/tally-integration/" label="Tally Integration" />
            <FooterLink href="/skelbiz-vs-tally-zoho-odoo/" label="vs Tally, Zoho & Odoo" />
            <FooterLink href="/vs-tally-prime/" label="vs Tally Prime" />
            <FooterLink href="/vs-zoho/" label="vs Zoho" />
            <FooterLink href="/vs-odoo/" label="vs Odoo" />
            <FooterLink href="/privacy-policy/" label="Privacy Policy" />
            <FooterLink href="/terms-of-service/" label="Terms of Service" />
          </FooterColumn>
        </div>

        <div className="mt-14 flex flex-col items-center justify-between gap-4 border-t border-white/10 pt-8 sm:flex-row">
          <p className="text-xs text-blue-200">© {year} SkelBiz. All rights reserved.</p>
          <p className="text-xs text-blue-200">Multi-languages live today, more on request</p>
        </div>
      </div>
    </footer>
    <PrivacyNotice />
    </>
  );
}