/* global React, Icon */
const { useState: useStateSh, useEffect: useEffectSh, useRef: useRefSh } = React;

const APPS = [
  {
    id: "private-video-recorder",
    name: "Private Video Recorder",
    short: "Private Video Recorder",
    tag: "Encrypted recordings, locked behind your face.",
    desc: "Record video in a passcode-protected vault. Disguised app icon, decoy passcode, no traces in the camera roll.",
    accent: "#10b981",
    accentGlow: "rgba(16,185,129,0.4)",
    icon: "shield",
    iconImage: "assets/icons/pvr.png",
    comingSoon: false,
    bundleId: "com.encryptcam.app",
    playUrl: "https://play.google.com/store/apps/details?id=com.encryptcam.app",
    appStoreUrl: null,
  },
  {
    id: "motion-clock-camera",
    name: "Motion Clock Camera",
    short: "Motion Clock Camera",
    tag: "Trigger on motion. Burn the time onto every frame.",
    desc: "Surveillance-grade recording with motion detection, embedded timestamps, and event-based clipping. 4K, 60fps, encrypted in transit and at rest.",
    accent: "#f59e0b",
    accentGlow: "rgba(245,158,11,0.4)",
    icon: "clock",
    iconImage: "assets/icons/mcc.png",
    comingSoon: false,
    bundleId: "com.motionclockcam.app",
    playUrl: "https://play.google.com/store/apps/details?id=com.motionclockcam.app",
    appStoreUrl: null,
  },
  {
    id: "truetide",
    name: "TrueTide",
    short: "TrueTide",
    sub: "Progress Pic Fitness Tracker",
    tag: "Same pose. Same light. Every week.",
    desc: "Take fitness progress photos in the exact same frame, side-by-side comparisons, and trend charts of weight, measurements, and lifts.",
    accent: "#06b6d4",
    accentGlow: "rgba(6,182,212,0.4)",
    icon: "trending-up",
    iconImage: "assets/icons/truetide.png",
    comingSoon: false,
    bundleId: "com.truetide.app",
    playUrl: "https://play.google.com/store/apps/details?id=com.truetide.app",
    appStoreUrl: null,
  },
  {
    id: "dual-camera",
    name: "Dual Camera",
    short: "Dual Camera",
    sub: "Front and Back Recording",
    tag: "React. Vlog. React again.",
    desc: "Record from front and back lenses simultaneously. Picture-in-picture, side-by-side, or stacked. 4K HDR with synced audio.",
    accent: "#a855f7",
    accentGlow: "rgba(168,85,247,0.4)",
    icon: "switch-camera",
    iconImage: null,
    comingSoon: true,
    bundleId: "com.encryptcam.dualcamera",
    playUrl: null,
    appStoreUrl: null,
  },
];

window.APPS = APPS;

// ===== Tiny hash router =====
const useRoute = () => {
  const [route, setRoute] = useStateSh(() => window.location.hash.replace(/^#\/?/, "") || "home");
  useEffectSh(() => {
    const onHash = () => {
      setRoute(window.location.hash.replace(/^#\/?/, "") || "home");
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  const navigate = (path) => { window.location.hash = "/" + path; };
  return [route, navigate];
};
window.useRoute = useRoute;

// Reveal-on-scroll observer hook
const useReveal = () => {
  useEffectSh(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    document.querySelectorAll(".reveal:not(.in)").forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  });
};
window.useReveal = useReveal;

// ===== Logo =====
const Logo = ({ onClick }) => (
  <div className="logo" onClick={onClick}>
    <div className="logo-mark"></div>
    <div className="logo-text">cryptdapp<span className="dot">.com</span></div>
  </div>
);

// ===== Nav =====
const Nav = ({ route, navigate }) => {
  const [mobileOpen, setMobileOpen] = useStateSh(false);
  const goto = (p) => { navigate(p); setMobileOpen(false); };
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <Logo onClick={() => goto("home")} />
        <div className="nav-links">
          <div className={"nav-link" + (route === "home" ? " active" : "")} onClick={() => goto("home")}>Home</div>
          <div className="apps-menu-wrap">
            <div className={"nav-link" + (APPS.some(a => a.id === route) ? " active" : "")}>Apps ▾</div>
            <div className="apps-menu">
              {APPS.map(a => (
                <div key={a.id} className="apps-menu-item" onClick={() => goto(a.id)}>
                  <div className="apps-menu-icon" style={{color: a.accent, borderColor: `${a.accent}40`, padding: a.iconImage ? 0 : undefined, overflow: "hidden"}}>
                    {a.iconImage
                      ? <img src={a.iconImage} alt="" style={{width: "100%", height: "100%", objectFit: "cover", borderRadius: 9}}/>
                      : <Icon name={a.icon} size={18} stroke={1.8}/>}
                  </div>
                  <div>
                    <div className="apps-menu-name">{a.short}{a.comingSoon && <span style={{marginLeft: 6, fontSize: 9.5, fontFamily: "var(--font-mono)", color: a.accent, letterSpacing: "0.08em"}}>SOON</span>}</div>
                    <div className="apps-menu-desc">{a.tag}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className={"nav-link" + (route === "contact" ? " active" : "")} onClick={() => goto("contact")}>Contact</div>
          <a className="nav-link" href="/privacy-policy/" style={{textDecoration: "none"}}>Privacy</a>
        </div>
        <button className="nav-burger" onClick={() => setMobileOpen(o => !o)} aria-label="Menu">
          <Icon name={mobileOpen ? "x" : "menu"} size={20}/>
        </button>
        {mobileOpen && (
          <div className="nav-mobile">
            <div className="nav-link" onClick={() => goto("home")}>Home</div>
            {APPS.map(a => <div key={a.id} className="nav-link" onClick={() => goto(a.id)}>{a.short}</div>)}
            <div className="nav-link" onClick={() => goto("contact")}>Contact</div>
            <a className="nav-link" href="/privacy-policy/" style={{textDecoration: "none"}}>Privacy policy</a>
          </div>
        )}
      </div>
    </nav>
  );
};

// ===== Footer =====
const Footer = ({ navigate }) => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <Logo />
          <p style={{color: "var(--muted)", fontSize: 14, marginTop: 16, maxWidth: 300}}>
            A small studio building utility apps with strong encryption, transparent privacy, and zero dark patterns.
          </p>
        </div>
        <div className="footer-col">
          <h4>Apps</h4>
          {APPS.map(a => <a key={a.id} onClick={() => navigate(a.id)}>{a.short}</a>)}
        </div>
        <div className="footer-col">
          <h4>Company</h4>
          <a onClick={() => navigate("home")}>Home</a>
          <a onClick={() => navigate("contact")}>Contact</a>
          <a href="/privacy-policy/">Privacy policy</a>
        </div>
        <div className="footer-col">
          <h4>Connect</h4>
          <a href="mailto:apps@cryptdapp.com"><Icon name="mail" size={14} style={{verticalAlign:"middle",marginRight:6}}/>apps@cryptdapp.com</a>
          <a><Icon name="twitter" size={14} style={{verticalAlign:"middle",marginRight:6}}/>@cryptdapp</a>
          <a><Icon name="instagram" size={14} style={{verticalAlign:"middle",marginRight:6}}/>cryptdapp</a>
        </div>
      </div>
      <div className="footer-bottom" style={{flexDirection: "column", alignItems: "flex-start", gap: 8}}>
        <div style={{
          fontFamily: "var(--font-display)",
          fontSize: 15,
          fontWeight: 600,
          color: "var(--text)",
          letterSpacing: "-0.01em",
        }}>
          2784951 Alberta Inc.
        </div>
        <div style={{display: "flex", justifyContent: "space-between", width: "100%", flexWrap: "wrap", gap: 12, fontSize: 13, color: "var(--muted)"}}>
          <span>© 2026 2784951 Alberta Inc. — operating as Cryptdapp. All rights reserved.</span>
          <span className="mono" style={{fontSize: 12}}>Built in Alberta · Encrypted in transit and at rest</span>
        </div>
      </div>
    </div>
  </footer>
);

window.Nav = Nav;
window.Footer = Footer;