/* eslint-disable @next/next/no-html-link-for-pages -- Sites/vinext currently cancels hydrated Next Link navigation; native anchors preserve reliable multi-route navigation. */
import type { ReactNode } from "react";
import { MobileNav } from "./MobileNav";

function BrandMark() {
  return (
    <span aria-hidden="true" className="brand-mark">
      <span className="brand-frame" />
      <span className="brand-cut" />
    </span>
  );
}

const nav = [
  ["Features", "/features"],
  ["Formats", "/formats"],
  ["Demo", "/demo"],
  ["User guide", "/help"],
  ["Licensing", "/licensing"],
  ["Support", "/support"],
] as const;

export function SiteShell({ children }: { children: ReactNode }) {
  return (
    <div className="site-shell">
      <a className="skip-link" href="#main-content">Skip to content</a>
      <header className="site-header">
        <div className="header-inner">
          <a className="brand" href="/" aria-label="SmartCut64 home">
            <BrandMark />
            <span>SmartCut<span className="brand-64">64</span></span>
          </a>
          <nav className="main-nav" aria-label="Main navigation">
            {nav.map(([label, href]) => <a href={href} key={href}>{label}</a>)}
          </nav>
          <a className="header-cta" href="/release-readiness">Release status</a>
          <MobileNav items={nav} />
        </div>
      </header>
      <main id="main-content">{children}</main>
      <footer className="site-footer">
        <div className="footer-grid">
          <div>
            <a className="brand footer-brand" href="/">
              <BrandMark />
              <span>SmartCut<span className="brand-64">64</span></span>
            </a>
            <p>A native 64-bit Windows editor for precise, efficient video cuts.</p>
          </div>
          <div>
            <h2>Product</h2>
            <a href="/features">Features</a>
            <a href="/formats">Format support</a>
            <a href="/demo">Product demo</a>
            <a href="/licensing">Licensing</a>
          </div>
          <div>
            <h2>Resources</h2>
            <a href="/help">User guide</a>
            <a href="/support">Support</a>
            <a href="/about">About the product</a>
            <a href="/release-readiness">Release status</a>
          </div>
          <div>
            <h2>Contact</h2>
            <a href="mailto:support@linekerpandi.com">support@linekerpandi.com</a>
            <p>LINEKERPANDI LIMITED<br />Company no. 06406014<br />England &amp; Wales</p>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 LINEKERPANDI LIMITED</span>
          <span className="footer-legal"><a href="/terms">Terms</a><a href="/privacy">Privacy</a><a href="/refunds">Refunds</a></span>
          <span>Independent software. No third-party endorsement implied.</span>
        </div>
      </footer>
    </div>
  );
}

export function PageIntro({ eyebrow, title, children }: { eyebrow: string; title: string; children: ReactNode }) {
  return (
    <section className="page-intro">
      <div className="content-narrow">
        <p className="eyebrow">{eyebrow}</p>
        <h1>{title}</h1>
        <div className="intro-copy">{children}</div>
      </div>
    </section>
  );
}

export function StatusNote({ children, tone = "neutral" }: { children: ReactNode; tone?: "neutral" | "good" | "warn" }) {
  return <div className={`status-note status-${tone}`}>{children}</div>;
}
