// ===== Cross-page links for the v2 site =====
// Live: the v2 pages are promoted to the clean routes, so Nav/Footer point at
// the clean paths ( / , /pricing , /blog , /contact , /privacy , /terms ,
// /security ). vercel.json maps these to the -v2 files and 301-redirects the
// -v2 URLs back to the clean routes.
const V2_LINKS = {
  home:     "/",
  features: "/#features",
  how:      "/#how",
  pricing:  "/pricing",
  blog:     "/blog",
  contact:  "/contact",
  privacy:  "/privacy",
  terms:    "/terms",
  security: "/security",
  login:    "/app",
};

function Btn({ variant = "primary", size = "lg", children, href = "#", ...p }) {
  return <a href={href} className={`btn btn-${variant} btn-${size}`} {...p}>{children}</a>;
}
function Eyebrow({ children }) {
  return <span className="eyebrow" style={{ display:"inline-flex", alignItems:"center", gap:8, background:"var(--accent-tint)", border:"1px solid #D7EADE", padding:"7px 14px", borderRadius:999 }}>
    <span style={{ width:6, height:6, borderRadius:"50%", background:"var(--accent)" }} />{children}
  </span>;
}
function TrustBar({ items = ["Free to 25 employees","No credit card","Your data stays yours","Encrypted + RLS"] }) {
  return <div className="mono" style={{ display:"flex", gap:14, justifyContent:"center", flexWrap:"wrap", fontSize:12.5, color:"var(--muted)" }}>
    {items.map((t,i) => <React.Fragment key={i}>{i>0 && <span style={{opacity:.4}}>·</span>}<span>{t}</span></React.Fragment>)}
  </div>;
}
function Nav() {
  // Preview cross-links (see V2_LINKS note above). Reverts to clean routes at go-live.
  const items = [
    { t: "Features",     h: V2_LINKS.features },
    { t: "How it works", h: V2_LINKS.how },
    { t: "Pricing",      h: V2_LINKS.pricing },
    { t: "Blog",         h: V2_LINKS.blog },
    { t: "Contact",      h: V2_LINKS.contact },
  ];
  return <nav className="wrap" style={{ height:74, display:"flex", alignItems:"center", justifyContent:"space-between" }}>
    <a href={V2_LINKS.home} aria-label="OrgPlease home" style={{ display:"inline-flex" }}><img src="brand/logo-lockup.svg" alt="OrgPlease!" height="26" /></a>
    <div className="nav-links" style={{ display:"flex", gap:30, fontSize:14.5, color:"var(--ink-2)", fontWeight:500 }}>
      {items.map(it => <a key={it.t} href={it.h}>{it.t}</a>)}
    </div>
    <div style={{ display:"flex", alignItems:"center", gap:18 }}>
      <a href={V2_LINKS.login} style={{ fontSize:14.5, color:"var(--ink-2)", fontWeight:500 }}>Log in</a>
      <Btn size="md" href={V2_LINKS.pricing}>Start free →</Btn>
    </div>
  </nav>;
}
// Browser-chrome window that wraps any product image identically.
// `src` may be a string (single image) or { desktop, mobile } for a responsive
// <picture> swap. `children` render as an absolute inset:0 overlay layer on top
// of the image area only (never over the chrome bar).
function ProductFrame({ src, mobileSrc, alt, addr = "app.orgplease.com/org-chart", children, glow = true }) {
  return <div style={{ position:"relative" }}>
    {glow && <div aria-hidden style={{ position:"absolute", left:"50%", top:"42%", transform:"translate(-50%,-50%)",
      width:1180, height:640, zIndex:0, pointerEvents:"none",
      background:"radial-gradient(ellipse at center, rgba(47,148,97,.20), rgba(47,148,97,.06) 44%, transparent 68%)" }} className="hero-glow" />}
    <div className="product-frame" style={{ position:"relative", zIndex:1, maxWidth:1000, margin:"0 auto",
      borderRadius:18, overflow:"hidden", border:"1px solid var(--line)", background:"var(--surface)", boxShadow:"var(--e3)" }}>
      <div style={{ height:42, borderBottom:"1px solid var(--hairline)", display:"flex", alignItems:"center", gap:8, padding:"0 16px", background:"var(--surface-2)" }}>
        <div style={{ display:"flex", gap:7 }}>{[0,1,2].map(i => <span key={i} style={{ width:11, height:11, borderRadius:"50%", background:"#E4E0D6" }} />)}</div>
        {addr != null && <div className="mono" style={{ flex:1, textAlign:"center", fontSize:12, color:"var(--muted)" }}>{addr}</div>}
      </div>
      {/* image area — children overlay sits absolutely inset:0 over this region only */}
      <div className="product-frame-media" style={{ position:"relative" }}>
        {src ? (
          mobileSrc
            ? <picture>
                <source media="(max-width:767px)" srcSet={mobileSrc} />
                <img className="product-frame-img" src={src} alt={alt} style={{ display:"block", width:"100%" }} />
              </picture>
            : <img className="product-frame-img" src={src} alt={alt} style={{ display:"block", width:"100%" }} />
        ) : children}
        {src && children
          ? <div style={{ position:"absolute", inset:0, zIndex:2 }}>{children}</div>
          : null}
      </div>
    </div>
  </div>;
}
// Play button overlay + modal lightbox for the narrated tour.
// Plays a local <video> with responsive sources: the 1:1 square clip on narrow
// mobile, the 16:9 landscape clip otherwise. Closing (X / Escape / backdrop)
// pauses + rewinds so audio doesn't keep playing.
function VideoLightbox({ videoUrl, videoUrlSquare, label = "Watch how OrgPlease works", duration = "0:51" }) {
  const [open, setOpen] = React.useState(false);
  const videoRef = React.useRef(null);

  const close = React.useCallback(() => {
    const v = videoRef.current;
    if (v) { try { v.pause(); v.currentTime = 0; } catch (_) {} }
    setOpen(false);
  }, []);

  // Escape closes the lightbox while open.
  React.useEffect(() => {
    if (!open) return;
    const onKey = e => { if (e.key === "Escape") close(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, close]);

  // When the lightbox opens, explicitly start playback. The modal mounts from a
  // user click (transient activation), so an explicit play() is honored by browsers
  // that block the bare autoPlay attribute for videos with audio. If a browser still
  // blocks it (e.g. mobile), preload="auto" has loaded the first frame and the visible
  // controls let the user start it — so the box is never just black.
  React.useEffect(() => {
    if (!open) return;
    const v = videoRef.current;
    if (v) { const p = v.play(); if (p && p.catch) p.catch(() => {}); }
  }, [open]);

  return <>
    <div style={{ position:"absolute", inset:0, display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", gap:16, cursor:"pointer" }}
         onClick={() => videoUrl && setOpen(true)} role="button" aria-label={label} tabIndex={0}
         onKeyDown={e => { if(e.key==="Enter" && videoUrl) setOpen(true); }}>
      <span className="play-btn" style={{ width:78, height:78, borderRadius:"50%", background:"#fff", display:"grid", placeItems:"center", boxShadow:"0 18px 44px -14px rgba(12,14,13,.5)" }}>
        <span style={{ width:0, height:0, borderLeft:"22px solid var(--accent)", borderTop:"13px solid transparent", borderBottom:"13px solid transparent", marginLeft:6 }} />
      </span>
      <span style={{ color:"#fff", fontWeight:600, fontSize:15, textShadow:"0 1px 12px rgba(0,0,0,.4)", display:"flex", gap:10, alignItems:"center" }}>
        {label} <span className="mono" style={{ fontSize:12, background:"rgba(255,255,255,.18)", border:"1px solid rgba(255,255,255,.25)", padding:"3px 9px", borderRadius:6 }}>{duration}</span>
      </span>
    </div>
    {open && <div onClick={close} style={{ position:"fixed", inset:0, zIndex:1000, background:"rgba(12,14,13,.78)", display:"grid", placeItems:"center", padding:24 }}>
      <div style={{ position:"relative", width:"min(960px, 92vw)", maxHeight:"88vh", aspectRatio:"16/9", background:"#000", borderRadius:14, overflow:"hidden", boxShadow:"var(--e3)" }} onClick={e=>e.stopPropagation()}>
        <button onClick={close} aria-label="Close video"
          style={{ position:"absolute", top:10, right:10, zIndex:2, width:38, height:38, borderRadius:"50%", border:"1px solid rgba(255,255,255,.25)", background:"rgba(12,14,13,.55)", color:"#fff", fontSize:20, lineHeight:1, cursor:"pointer", display:"grid", placeItems:"center" }}>×</button>
        <video ref={videoRef} controls autoPlay playsInline preload="auto" style={{ display:"block", width:"100%", height:"100%", objectFit:"contain" }}>
          {videoUrlSquare && <source src={videoUrlSquare} media="(max-width: 600px)" type="video/mp4" />}
          <source src={videoUrl} type="video/mp4" />
        </video>
      </div>
    </div>}
  </>;
}
Object.assign(window, { V2_LINKS, Btn, Eyebrow, TrustBar, Nav, ProductFrame, VideoLightbox });