// Shared chrome + primitives for the recruit-site UI kit
const { useState, useEffect: useEffectR, useRef: useRefR } = React;

// Photo: real image when src given, else warm gradient placeholder
function PhotoSlot({ src, label, h = 220, round = 16, tone = "red", style, alt, zoom }) {
  const grads = {
    red:   "linear-gradient(135deg,#E5231F 0%,#D9892B 100%)",
    sauce: "linear-gradient(135deg,#5A2B18 0%,#E5231F 120%)",
    gold:  "linear-gradient(135deg,#D9892B 0%,#F7B731 100%)",
    char:  "linear-gradient(135deg,#2A2522 0%,#5A2B18 100%)",
  };
  return (
    <div className={zoom?"ph-zoom":""} style={{ position:"relative", height:h, borderRadius:round, background:grads[tone],
      overflow:"hidden", ...style }}>
      {src
        ? <img src={src} alt={alt||label||""} referrerPolicy="no-referrer" loading="lazy" style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }} />
        : <div style={{ position:"absolute", inset:0, opacity:.16,
            backgroundImage:"radial-gradient(circle at 22% 30%,#fff 7px,transparent 8px),radial-gradient(circle at 64% 64%,#fff 10px,transparent 11px),radial-gradient(circle at 84% 22%,#fff 6px,transparent 7px)" }} />}
      {label && <span style={{ position:"absolute", left:12, bottom:12, fontFamily:"var(--font-body)", fontWeight:700, fontSize:12, color:"#fff",
        background:"rgba(0,0,0,.34)", padding:"5px 12px", borderRadius:999, backdropFilter:"blur(2px)",
        letterSpacing:".04em", zIndex:1 }}>{label}</span>}
    </div>
  );
}

// Scroll-reveal wrapper
function Reveal({ children, style, delay = 0, y = 26 }) {
  const ref = useRefR(null);
  const [vis, setVis] = useState(false);
  useEffectR(() => {
    const el = ref.current; if (!el) return;
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setVis(true); return; }
    const o = new IntersectionObserver((es) => es.forEach(e => { if (e.isIntersecting) { setVis(true); o.disconnect(); } }), { threshold:.12, rootMargin:"0px 0px -8% 0px" });
    o.observe(el); return () => o.disconnect();
  }, []);
  return <div ref={ref} style={{ opacity: vis?1:0, transform: vis?"none":`translateY(${y}px)`,
    transition:`opacity .7s ease ${delay}ms, transform .8s cubic-bezier(.2,.7,.2,1) ${delay}ms`, ...style }}>{children}</div>;
}

function Kicker({ en, jp, light }) {
  return (
    <div style={{ marginBottom:18 }}>
      <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:6 }}>
        <span style={{ width:9, height:9, borderRadius:"50%", background:"var(--primary)" }} />
        <span style={{ fontFamily:"var(--font-latin)", fontWeight:700, textTransform:"uppercase", whiteSpace:"nowrap",
          letterSpacing:".18em", color:"var(--primary)", fontSize:13 }}>{en}</span>
      </div>
      <h2 style={{ fontFamily:"var(--font-display)", fontWeight:700, letterSpacing:".06em", fontSize:"clamp(26px,3.4vw,40px)", margin:0,
        color: light ? "var(--fg-on-dark)" : "var(--fg1)" }}>{jp}</h2>
      <div style={{ height:4, width:54, background:"var(--festival-yellow)", borderRadius:2, marginTop:12 }} />
    </div>
  );
}

function Btn({ children, variant = "primary", onClick, full, small }) {
  const base = { fontFamily:"var(--font-body)", fontWeight:700, cursor:"pointer", border:0,
    borderRadius:999, padding: small ? "9px 20px" : "14px 30px", fontSize: small ? 13 : 15,
    width: full ? "100%" : "auto", transition:"all .18s ease", display:"inline-flex",
    alignItems:"center", justifyContent:"center", gap:8 };
  const styles = {
    primary: { ...base, background:"var(--primary)", color:"#fff", boxShadow:"0 8px 22px rgba(229,35,31,.28)" },
    ghost:   { ...base, background:"transparent", color:"var(--primary)", border:"2px solid var(--primary)" },
    dark:    { ...base, background:"var(--charcoal-black)", color:"var(--fg-on-dark)" },
    gold:    { ...base, background:"var(--festival-yellow)", color:"var(--sauce-brown)" },
  };
  const [h, setH] = useState(false);
  const hov = h && variant === "primary" ? { background:"var(--primary-hover)", transform:"translateY(-2px)", boxShadow:"0 12px 26px rgba(229,35,31,.34)" } : {};
  return <button style={{ ...styles[variant], ...hov }} onClick={onClick}
    onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}>{children}</button>;
}

function Header({ onNav, page }) {
  const [open, setOpen] = useState(false);
  const links = [["home","ホーム"],["jobs","求人一覧"],["profile","会社概要"]];
  return (
    <header style={{ position:"sticky", top:0, zIndex:50, background:"var(--charcoal-black)",
      boxShadow:"0 2px 14px rgba(0,0,0,.25)" }}>
      <div style={{ maxWidth:1180, margin:"0 auto", padding:"0 24px", height:72,
        display:"flex", alignItems:"center", justifyContent:"space-between" }}>
        <div style={{ display:"flex", alignItems:"center", gap:13, cursor:"pointer" }} onClick={()=>onNav("home")}>
          <img src="../assets/logo-ynny.png" alt="YNNY" style={{ height:42, width:"auto", display:"block" }} />
          <span style={{ fontFamily:"var(--font-display)", fontWeight:700, color:"var(--fg-on-dark)", fontSize:19, letterSpacing:".03em" }}>株式会社Y.N.N.Y</span>
        </div>
        <nav style={{ display:"flex", alignItems:"center", gap:6 }} className="hp-nav">
          {links.map(([k,l]) => (
            <a key={k} onClick={()=>onNav(k)} style={{ cursor:"pointer", padding:"8px 16px",
              fontFamily:"var(--font-body)", fontWeight:700, fontSize:14, borderRadius:999,
              color: page===k ? "var(--festival-yellow)" : "var(--fg-on-dark-2)" }}>{l}</a>
          ))}
          <a href="tel:052-228-3369" style={{ display:"flex", alignItems:"center", gap:7, color:"var(--fg-on-dark)",
            fontFamily:"var(--font-latin)", fontWeight:700, fontSize:15, padding:"0 10px 0 16px", letterSpacing:".02em" }}>
            <Icon name="phone" size={17} />052-228-3369</a>
          <Btn variant="primary" small onClick={()=>onNav("apply")}>今すぐ応募</Btn>
        </nav>
      </div>
    </header>
  );
}

function FloatingCTA({ onNav }) {
  return (
    <div style={{ position:"fixed", right:20, bottom:20, zIndex:60, display:"flex", gap:10 }}>
      <a href="tel:052-228-3369" style={{ width:54, height:54, borderRadius:"50%", background:"var(--charcoal-black)",
        color:"#fff", display:"flex", alignItems:"center", justifyContent:"center", boxShadow:"var(--shadow-hover)" }}>
        <Icon name="phone" size={22} /></a>
      <Btn variant="primary" onClick={()=>onNav("apply")}><Icon name="flame" size={18} fill="currentColor" stroke="0" />今すぐ応募する</Btn>
    </div>
  );
}

function Footer() {
  return (
    <footer style={{ background:"var(--charcoal-black)", color:"var(--fg-on-dark-2)", padding:"48px 24px 28px", textAlign:"center" }}>
      <div style={{ fontFamily:"var(--font-accent)", fontWeight:700, color:"var(--festival-yellow)", fontSize:22, marginBottom:14 }}>夢を焼く場所、Y.N.N.Yで。</div>
      <div style={{ fontFamily:"var(--font-latin)", fontWeight:700, letterSpacing:".05em", fontSize:14 }}>052-228-3369</div>
      <div style={{ fontSize:12, marginTop:18, color:"#7a6f64" }}>Copyright (C) 株式会社Y.N.N.Y. All Rights Reserved.</div>
    </footer>
  );
}

Object.assign(window, { PhotoSlot, Reveal, Kicker, Btn, Header, FloatingCTA, Footer });