/* nav-hero.jsx — sticky nav + editorial hero with draggable profile card stack */

const Icon = {
  Check: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>,

  Arrow: ({ size = 14 }) =>
  <svg className="arr" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="13 6 19 12 13 18" /></svg>,

  Heart: ({ size = 22 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-7-4.5-9.5-9.5C.8 8.4 2.6 5 6 5c2 0 3.5 1 4.4 2.2.4.5 1.2.5 1.5 0C12.8 6 14.4 5 16 5c3.4 0 5.2 3.4 3.5 6.5C19 16.5 12 21 12 21z" /></svg>,

  X: ({ size = 20 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></svg>,

  Lock: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></svg>,

  Shield: ({ size = 24 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-12V5l-8-3-8 3v5c0 8 8 12 8 12z" /></svg>,

  Verified: ({ size = 24 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l2.4 2 3.1-.4.6 3 2.5 1.8-1.4 2.8 1 3-2.6 1.5-.7 3-3.1-.2L12 21l-1.8-2.5-3.1.2-.7-3L3.8 14.2l1-3L3.4 8.4 5.9 6.6l.6-3 3.1.4L12 2z" /><polyline points="9 12 11 14 15 10" /></svg>,

  Filters: ({ size = 24 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><line x1="4" y1="7" x2="14" y2="7" /><circle cx="17" cy="7" r="2.5" /><line x1="20" y1="7" x2="20" y2="7" /><line x1="4" y1="17" x2="8" y2="17" /><circle cx="11" cy="17" r="2.5" /><line x1="14" y1="17" x2="20" y2="17" /><line x1="4" y1="12" x2="6" y2="12" /><circle cx="9" cy="12" r="2.5" /><line x1="12" y1="12" x2="20" y2="12" /></svg>,

  Chat: ({ size = 24 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a8 8 0 0 1-12.3 6.8L4 20l1.2-4.7A8 8 0 1 1 21 12z" /></svg>,

  Star: ({ size = 24 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"><polygon points="12 2 14.5 9 22 9.5 16 14.5 18 22 12 18 6 22 8 14.5 2 9.5 9.5 9 12 2" /></svg>,

  Concierge: ({ size = 24 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4" /><path d="M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8" /><path d="M9 5l3-2 3 2" /></svg>,

  Apple: ({ size = 22 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 12.04c-.02-2.7 2.2-4 2.3-4.06-1.25-1.83-3.2-2.08-3.9-2.1-1.66-.17-3.24.97-4.08.97-.85 0-2.15-.95-3.53-.93-1.82.03-3.5 1.06-4.43 2.68-1.9 3.28-.48 8.12 1.35 10.78.9 1.3 1.97 2.76 3.36 2.71 1.35-.06 1.86-.87 3.5-.87 1.62 0 2.1.87 3.53.84 1.46-.02 2.38-1.32 3.27-2.63a11.7 11.7 0 0 0 1.5-3.04c-.04-.02-2.85-1.09-2.87-4.35zM14.4 4.1c.74-.9 1.24-2.15 1.1-3.4-1.07.05-2.37.71-3.13 1.6-.68.79-1.28 2.06-1.12 3.27 1.2.1 2.42-.6 3.15-1.47z" /></svg>,

  Play: ({ size = 22 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M3.6 2.3c-.4.2-.6.6-.6 1.1v17.2c0 .5.2.9.6 1.1l10.4-9.7L3.6 2.3z" opacity=".95" /><path d="M14 12l3.4-3.2L5.3 2.4l8.7 9.6zm0 0l8.7 9.6-12.1-6.4L14 12zm0 0l3.4 3.2 4.6-2.4c.7-.4.7-1.2 0-1.6l-4.6-2.4L14 12z" /></svg>

};

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " nav--scrolled" : "")}>
      <div className="container nav__row">
        <a href="#" className="brand" aria-label="Lahmee — home">
          <img
            src="https://lahmee.com/wp-content/uploads/2024/11/Final-Logo-2023-V2.png"
            alt="Lahmee"
            style={{ display: "block", width: "150px", height: "63px", margin: "0px 0px 0px 15px" }} />
          
        </a>
        <div className="nav__links">
          <a href="#how">How it works</a>
          <a href="#features">Privacy</a>
          <a href="#watch">Watch</a>
          <a href="#stories">Stories</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav__cta">
          <a href="#download" className="btn btn--primary" style={{ height: 40, padding: "0 18px" }}>
            Get the app <Icon.Arrow />
          </a>
        </div>
      </div>
    </nav>);

}

/* ─── Card stack ─────────────────────────────────────────────────────────── */
const PROFILES = [
{
  alias: "Mira S.",
  name: "Meera Shrestha",
  age: 28, prof: "Architect", loc: "Kathmandu → Brooklyn",
  tags: ["Newar", "Hindu", "Veg"],
  photo: "assets/profile-mira-blurred.png",
  blurred: true,
  preBlurred: true
},
{
  alias: "Aarav T.",
  name: "Aarav Thapa",
  age: 31, prof: "Software Engineer", loc: "Pokhara → Atlanta",
  tags: ["Chhetri", "Hindu", "Non-veg"],
  photo: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=900&q=80",
  blurred: false
},
{
  alias: "Sneha R.",
  name: "Sneha Rai",
  age: 26, prof: "Pediatric Doctor", loc: "Lalitpur → London",
  tags: ["Kirat", "Veg"],
  photo: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=900&q=80",
  blurred: true
},
{
  alias: "Rohan K.",
  name: "Rohan KC",
  age: 30, prof: "MBA · Finance", loc: "Biratnagar → Toronto",
  tags: ["Chhetri", "Hindu"],
  photo: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=900&q=80",
  blurred: false
}];


function Card({ profile, depth, total, onSwipe }) {
  const ref = React.useRef(null);
  const [drag, setDrag] = React.useState(null); // {dx, dy, dragging}

  React.useEffect(() => {
    if (depth !== 0) return;
    const el = ref.current;if (!el) return;
    let start = null;

    const onDown = (e) => {
      const p = e.touches ? e.touches[0] : e;
      start = { x: p.clientX, y: p.clientY };
      setDrag({ dx: 0, dy: 0, dragging: true });
      el.classList.add("is-dragging");
    };
    const onMove = (e) => {
      if (!start) return;
      const p = e.touches ? e.touches[0] : e;
      const dx = p.clientX - start.x;
      const dy = p.clientY - start.y;
      setDrag({ dx, dy, dragging: true });
    };
    const onUp = () => {
      if (!start) return;
      el.classList.remove("is-dragging");
      setDrag((d) => {
        if (!d) return null;
        const threshold = 110;
        if (Math.abs(d.dx) > threshold) {
          const dir = d.dx > 0 ? 1 : -1;
          // animate off-screen
          setDrag({ dx: dir * 800, dy: d.dy + 80, dragging: false });
          setTimeout(() => {onSwipe(dir);setDrag(null);}, 380);
        } else {
          setDrag({ dx: 0, dy: 0, dragging: false });
          setTimeout(() => setDrag(null), 400);
        }
      });
      start = null;
    };

    el.addEventListener("mousedown", onDown);
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", onUp);
    el.addEventListener("touchstart", onDown, { passive: true });
    window.addEventListener("touchmove", onMove, { passive: true });
    window.addEventListener("touchend", onUp);
    return () => {
      el.removeEventListener("mousedown", onDown);
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", onUp);
      el.removeEventListener("touchstart", onDown);
      window.removeEventListener("touchmove", onMove);
      window.removeEventListener("touchend", onUp);
    };
  }, [depth, onSwipe]);

  const baseY = depth * 14;
  const scale = 1 - depth * 0.05;
  const rot = drag ? drag.dx * 0.06 : 0;
  const tx = drag ? drag.dx : 0;
  const ty = drag ? drag.dy : 0;
  const opacity = depth > 2 ? 0 : 1 - depth * 0.05;

  return (
    <div
      ref={ref}
      className="stack__card"
      style={{
        transform: `translate(${tx}px, ${baseY + ty}px) scale(${scale}) rotate(${rot}deg)`,
        opacity,
        zIndex: total - depth,
        pointerEvents: depth === 0 ? "auto" : "none"
      }}>
      
      <div
        className="stack__photo"
        style={{
          backgroundImage: `url(${profile.photo})`,
          filter: profile.blurred ? (profile.preBlurred ? "blur(3px) saturate(95%)" : "blur(12px) saturate(90%)") : "none",
          transform: profile.blurred ? (profile.preBlurred ? "scale(1.02)" : "scale(1.06)") : "none"
        }} />
      
      <div className="stack__veil" />
      <span className="stack__badge"><span className="check"><Icon.Verified size={12} /></span> Verified</span>
      {profile.blurred &&
      <span className="stack__priv"><Icon.Lock size={11} /> Private photo</span>
      }
      <div className="stack__meta">
        <div className="name">
          {profile.blurred ? profile.alias : profile.name}, {profile.age}
        </div>
        <div className="row">
          <span>{profile.prof}</span>
          <span className="sep">·</span>
          <span>{profile.loc}</span>
        </div>
        <div className="row" style={{ marginTop: 10 }}>
          {profile.tags.map((t) =>
          <span key={t} style={{
            padding: "3px 10px", borderRadius: 999,
            background: "rgba(251,247,241,.18)", border: "1px solid rgba(251,247,241,.3)",
            fontSize: 11.5, letterSpacing: ".02em"
          }}>{t}</span>
          )}
        </div>
      </div>
    </div>);

}

function CardStack() {
  const [idx, setIdx] = React.useState(0);
  const order = React.useMemo(() => {
    return Array.from({ length: PROFILES.length }, (_, i) => PROFILES[(idx + i) % PROFILES.length]);
  }, [idx]);

  const advance = () => setIdx((i) => (i + 1) % PROFILES.length);
  const cards = order.slice(0, 3).reverse(); // render back to front

  return (
    <div className="stack">
      {cards.map((p, i) => {
        const depth = cards.length - 1 - i;
        return (
          <Card key={idx + "-" + depth} profile={p} depth={depth} total={cards.length} onSwipe={advance} />);

      })}
      <div className="stack__actions">
        <button className="stack__act is-pass" aria-label="Pass" onClick={advance}><Icon.X /></button>
        <button className="stack__act is-like" aria-label="Like" onClick={advance}><Icon.Heart size={20} /></button>
      </div>
    </div>);

}

function Hero() {
  return (
    <section className="hero">
      <div className="container hero__grid">
        <div className="reveal is-in">
          <div className="eyebrow"><span className="dot"></span>Nepali matrimony, modern by design</div>
          <h1 style={{ marginTop: 22 }}>
            Find the one<br />
            <span className="ital">who fits</span> your life,<br />
            not just your feed.
          </h1>
          <p className="lead hero__lead">
            Lahmee is a privacy-first matrimony app built for Nepalis who are serious about a life partner.
            Blur your photos, use an alias, and only reveal yourself to people who match your values.
          </p>
          <div className="hero__ctas">
            <a href="https://apps.apple.com/us/app/nepalilami/id1547398543" target="_blank" rel="noopener noreferrer" aria-label="Download on the App Store" className="store-badge">
              <img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" alt="Download on the App Store" style={{ height: 52, width: "auto", display: "block" }} />
            </a>
            <a href="https://play.google.com/store/apps/details?id=com.nepalilami&hl=en_US&gl=US&pli=1" target="_blank" rel="noopener noreferrer" aria-label="Get it on Google Play" className="store-badge">
              <img src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png" alt="Get it on Google Play" style={{ height: 76, width: "auto", display: "block", margin: "-12px 0" }} />
            </a>
          </div>
          <div className="hero__trust">
            <div className="avatars">
              <span style={{ backgroundImage: "url(https://i0.wp.com/nepalilami.com/wp-content/uploads/2021/11/kamala_promod.jpg?fit=600&ssl=1)" }}></span>
              <span style={{ backgroundImage: "url(https://i0.wp.com/nepalilami.com/wp-content/uploads/2021/11/reecha_bishesh.png?fit=600&ssl=1)" }}></span>
              <span style={{ backgroundImage: "url(https://i0.wp.com/nepalilami.com/wp-content/uploads/2021/11/Smirti_Prassana.jpeg?fit=600&ssl=1)" }}></span>
              <span style={{ backgroundImage: "url(https://i0.wp.com/nepalilami.com/wp-content/uploads/2021/11/shristi_biresh.jpg?fit=600&ssl=1)" }}></span>
            </div>
            <div>
              <div><b>Real couples</b> across the global Nepali diaspora.</div>
              <div style={{ marginTop: 2 }}>100% verified · Privacy-first by default</div>
            </div>
          </div>
        </div>

        <div style={{ position: "relative" }}>
          <CardStack />
          {/* ornaments */}
          <svg className="ornament-ring" style={{ top: -40, right: -40, width: 180, height: 180 }} viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="48" fill="none" stroke="#C99A4B" strokeWidth=".4" strokeDasharray="1 3" />
            <circle cx="50" cy="50" r="40" fill="none" stroke="#C99A4B" strokeWidth=".4" />
          </svg>
          <svg className="ornament-ring" style={{ bottom: -60, left: -50, width: 140, height: 140, opacity: .35 }} viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="48" fill="none" stroke="#6B1F2A" strokeWidth=".5" />
          </svg>
        </div>
      </div>
    </section>);

}

function Pillar({ k, v }) {
  return (
    <div>
      <div style={{
        fontFamily: "var(--font-mono)",
        fontSize: 11,
        letterSpacing: ".14em",
        textTransform: "uppercase",
        color: "var(--primary)",
        marginBottom: 10,
      }}>{k}</div>
      <div style={{
        fontFamily: "var(--font-serif)",
        fontSize: 19,
        lineHeight: 1.3,
        color: "var(--ink)",
        maxWidth: "26ch",
      }}>{v}</div>
    </div>
  );
}

function StatBar() {
  const stats = [
    { v: "10K+", k: "Registered members" },
    { v: "200+", k: "Matched & counting" },
    { v: "20+",  k: "Countries worldwide" },
  ];
  return (
    <div className="container" style={{ borderTop: "1px solid var(--line)", marginTop: 40 }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
        gap: 32,
        padding: "56px 0",
        alignItems: "end",
      }}>
        {stats.map((s) => (
          <div key={s.k}>
            <div style={{
              fontFamily: "var(--font-serif)",
              fontSize: "clamp(48px, 5vw, 72px)",
              lineHeight: 1,
              color: "var(--ink)",
              letterSpacing: "-.02em",
            }}>{s.v}</div>
            <div style={{
              fontFamily: "var(--font-sans)",
              fontSize: 13,
              letterSpacing: ".14em",
              textTransform: "uppercase",
              color: "var(--muted)",
              marginTop: 12,
            }}>{s.k}</div>
          </div>
        ))}
      </div>
    </div>);

}

Object.assign(window, { Nav, Hero, StatBar, Icon, PROFILES });