// shell.jsx — Miniera Motors: nav, footer, wordmark, whatsapp wiring

const WA_PHONE = "15551234567"; // placeholder per user
const waLink = (msg) => {
  const text = encodeURIComponent(msg || "Hello Miniera Motors — I'd like to order a Tipo 01.");
  return `https://wa.me/${WA_PHONE}?text=${text}`;
};
window.MM_WA = { WA_PHONE, waLink };

function Wordmark({ size = "sm" }) {
  return (
    <div className={`wordmark ${size}`}>
      <span className="wm-top">MINIERA</span>
      <span className="wm-rule" />
      <span className="wm-bot">MOTORS</span>
    </div>
  );
}

function Monogram() {
  return (
    <svg viewBox="0 0 48 48" width="36" height="36" aria-label="MM">
      <rect x="0" y="0" width="48" height="48" fill="none"/>
      <text x="24" y="32" textAnchor="middle" fontFamily="Prata, serif" fontSize="28" fill="currentColor" letterSpacing="-1">MM</text>
      <line x1="10" y1="40" x2="38" y2="40" stroke="#b8935a" strokeWidth="1"/>
    </svg>
  );
}

function Nav({ page, setPage }) {
  const links = [
    ["models", "Models"],
    ["tipo01", "Tipo 01"],
    ["configure", "Configure"],
    ["gallery", "Gallery"],
    ["workshop", "The Workshop"],
  ];
  return (
    <nav className="nav" data-screen-label="Navigation">
      <div className="nav-inner">
        <div className="nav-links left">
          {links.slice(0, 3).map(([k, label]) => (
            <span key={k} className={`nav-link ${page === k ? "active" : ""}`} onClick={() => setPage(k)}>{label}</span>
          ))}
        </div>
        <div style={{ cursor: "pointer" }} onClick={() => setPage("home")}>
          <Wordmark size="sm" />
        </div>
        <div className="nav-links right">
          {links.slice(3).map(([k, label]) => (
            <span key={k} className={`nav-link ${page === k ? "active" : ""}`} onClick={() => setPage(k)}>{label}</span>
          ))}
          <span className="nav-link" onClick={() => setPage("commission")}>Order</span>
        </div>
      </div>
    </nav>
  );
}

function Footer({ setPage }) {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="footer-grid">
        <div>
          <div style={{ color: "var(--paper)" }}>
            <Wordmark size="lg" />
          </div>
          <p className="mono" style={{ marginTop: 28, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.55, maxWidth: 280 }}>
            Handbuilt electric motor cars.<br/>Small, by design.
          </p>
        </div>
        <div>
          <h4>Catalogue</h4>
          <ul>
            <li><a onClick={() => setPage("tipo01")}>Tipo 01 Standard</a></li>
            <li><a onClick={() => setPage("tipo01")}>Tipo 01 Corsa</a></li>
            <li><a onClick={() => setPage("configure")}>Configure</a></li>
            <li><a onClick={() => setPage("gallery")}>Gallery</a></li>
          </ul>
        </div>
        <div>
          <h4>The House</h4>
          <ul>
            <li><a onClick={() => setPage("workshop")}>The Workshop</a></li>
            <li><a onClick={() => setPage("commission")}>Order</a></li>
            <li><a href={MM_WA.waLink("Hello Miniera — I have a press enquiry.")} target="_blank" rel="noreferrer">Press</a></li>
            <li><a href={MM_WA.waLink("Hello Miniera — I'm interested in owners' events.")} target="_blank" rel="noreferrer">Owners' Register</a></li>
          </ul>
        </div>
        <div>
          <h4>Contact</h4>
          <ul>
            <li><a href={MM_WA.waLink()} target="_blank" rel="noreferrer">WhatsApp the workshop</a></li>
            <li><a href="mailto:hello@minieramotors.com">hello@minieramotors.com</a></li>
            <li className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", opacity: 0.6, textTransform: "uppercase" }}>By appointment only</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Miniera Motors s.r.l.</span>
        <span>— Small, by design —</span>
        <span>Est. MMXXV</span>
      </div>
    </footer>
  );
}

function WhatsAppFab({ msg }) {
  return (
    <a className="fab-whatsapp" href={MM_WA.waLink(msg)} target="_blank" rel="noreferrer" title="WhatsApp the workshop">
      <span className="wa-ic">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2A10 10 0 0 0 3.5 17.2L2 22l4.9-1.5A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .9.9-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1s-.6.8-.8 1c-.1.1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.6-1.1.1-.2 0-.4 0-.5l-.7-1.8c-.2-.4-.4-.4-.5-.4h-.5c-.2 0-.5.1-.7.3-.2.3-.9.9-.9 2.1s.9 2.4 1.1 2.6a9.4 9.4 0 0 0 4.3 3.7c1.7.6 1.7.4 2 .4a2.2 2.2 0 0 0 1.4-1 1.8 1.8 0 0 0 .1-1c-.1 0-.2-.1-.4-.2z"/></svg>
      </span>
      WhatsApp the workshop
    </a>
  );
}

function Eyebrow({ children }) {
  return <span className="eyebrow">{children}</span>;
}

function HairlineRow({ label, right }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16, padding: "16px 0" }}>
      {label && <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)", flexShrink: 0 }}>{label}</span>}
      <hr className="hairline faint" style={{ flex: 1 }}/>
      {right && <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)", flexShrink: 0 }}>{right}</span>}
    </div>
  );
}

Object.assign(window, { Wordmark, Monogram, Nav, Footer, WhatsAppFab, Eyebrow, HairlineRow });