/* global React */
const { useState, useEffect, useRef } = React;

/* External endpoints — production app + support center subdomains. */
window.APP_URL = "https://app.reservwise.com";
window.SUPPORT_URL = "https://support.reservwise.com";

/* =========================================================
   Logo — uses the official ReservWise PNG assets.
   LogoMark renders the icon only (works on any background).
   Logo renders the horizontal lockup (mark + wordmark) for nav use.
   ========================================================= */
function LogoMark({ size = 32, animated = false }) {
  return (
    <img
      src="assets/logo-mark.png"
      alt="ReservWise"
      width={size}
      height={size}
      style={{ display: "block", width: size, height: size, objectFit: "contain" }}
    />
  );
}

function Logo({ size = 28 }) {
  return (
    <div className="nav-brand">
      <img
        src="assets/logo-horizontal.png"
        alt="ReservWise"
        style={{ height: size, width: "auto", display: "block" }}
      />
    </div>
  );
}

/* =========================================================
   Navigation
   ========================================================= */
function Nav({ route, go }) {
  const links = [
    { id: "product", label: "Product" },
    { id: "features", label: "Features" },
    { id: "pricing", label: "Pricing" },
    { id: "about", label: "About" },
    { id: "contact", label: "Contact" },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div onClick={() => go("home")} style={{cursor:"pointer"}}>
          <Logo />
        </div>
        <div className="nav-links">
          {links.map(l => (
            <a key={l.id}
               className={"nav-link" + (route === l.id ? " active" : "")}
               onClick={() => go(l.id)}>{l.label}</a>
          ))}
          <a className="nav-link" href={window.SUPPORT_URL}>Help</a>
        </div>
        <div className="nav-cta">
          <a className="btn btn-ghost btn-sm" href={window.APP_URL + "/login"}>Login</a>
          <a className="btn btn-primary btn-sm" href={window.APP_URL + "/register"}>Get Started</a>
        </div>
      </div>
    </nav>
  );
}

/* =========================================================
   Footer
   ========================================================= */
function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="container-wide">
        <div className="footer-grid">
          <div>
            <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:16}}>
              <LogoMark size={32} />
              <div style={{fontFamily:"var(--font-display)",fontWeight:700,fontSize:20}}>
                <span style={{color:"#fff"}}>Reserv</span>
                <span style={{color:"var(--green-400)"}}>Wise</span>
              </div>
            </div>
            <p style={{fontSize:14, color:"#9ba1bb", maxWidth:280, lineHeight:1.6}}>
              Cashflow discipline for entrepreneurs with unpredictable income.
            </p>
            <div style={{marginTop:24, fontSize:12, color:"#7c829c", letterSpacing:".08em", textTransform:"uppercase"}}>
              ReservWise.com
            </div>
          </div>
          <div>
            <h4>Product</h4>
            <a onClick={() => go("product")}>How it works</a>
            <a onClick={() => go("features")}>Features</a>
            <a onClick={() => go("dashboard")}>Dashboard preview</a>
            <a onClick={() => go("pricing")}>Pricing</a>
            <a href={window.APP_URL + "/login"}>Open the app →</a>
          </div>
          <div>
            <h4>Company</h4>
            <a onClick={() => go("about")}>About</a>
            <a onClick={() => go("contact")}>Contact</a>
            <a>Press</a>
            <a>Careers</a>
          </div>
          <div>
            <h4>Resources</h4>
            <a>Reserve playbook</a>
            <a>Owner draw guide</a>
            <a href={window.SUPPORT_URL}>Help center</a>
            <a>Changelog</a>
          </div>
          <div>
            <h4>Legal</h4>
            <a href="/privacy">Privacy</a>
            <a href="/terms">Terms</a>
            <a href="/security">Security</a>
            <a href="/security#compliance">SOC 2</a>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 ReservWise, Inc. Built for unpredictable income.</div>
          <div>Made for entrepreneurs · Not your bank</div>
        </div>
      </div>
    </footer>
  );
}

/* =========================================================
   Icon set — minimal geometric line icons (original)
   ========================================================= */
const Icon = {
  reserve: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M4 8 L12 4 L20 8 L20 18 L12 22 L4 18 Z" />
      <path d="M4 8 L12 12 L20 8" />
      <path d="M12 12 L12 22" />
    </svg>
  ),
  forecast: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M3 17 L9 11 L13 14 L21 6" />
      <path d="M16 6 L21 6 L21 11" />
    </svg>
  ),
  draw: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7 L12 17 M8 12 L16 12" />
    </svg>
  ),
  tax: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="4" y="4" width="16" height="16" rx="2" />
      <path d="M8 9 L16 9 M8 13 L13 13 M8 17 L11 17" />
    </svg>
  ),
  ai: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 3 L14 9 L20 11 L14 13 L12 19 L10 13 L4 11 L10 9 Z" />
    </svg>
  ),
  growth: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M4 20 L4 14 M10 20 L10 10 M16 20 L16 6 M22 20 L2 20" />
    </svg>
  ),
  shield: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 3 L20 6 L20 12 C20 17 16 20 12 21 C8 20 4 17 4 12 L4 6 Z" />
      <path d="M9 12 L11 14 L15 10" />
    </svg>
  ),
  pulse: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M3 12 L8 12 L10 6 L14 18 L16 12 L21 12" />
    </svg>
  ),
  arrow: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 12 L19 12 M13 6 L19 12 L13 18" />
    </svg>
  ),
  check: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 12 L10 17 L19 7" />
    </svg>
  ),
  spark: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M12 2 L13.5 9.5 L21 11 L13.5 12.5 L12 20 L10.5 12.5 L3 11 L10.5 9.5 Z" />
    </svg>
  ),
};

Object.assign(window, { Logo, LogoMark, Nav, Footer, Icon });