// ============================================================
// Alprovid — Nav, Hero, About, Clients, Midrag, Services
// ============================================================

const REEL_1 = "assets/reel-1.gif";
const REEL_2 = "assets/reel-2.gif";
const EDITING = "assets/editing.png";
const PORTRAIT = "assets/avraham.jpg";

const scrollTo = (id) => {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.offsetTop - 64, behavior: "smooth" });
};

/* ---------- NAV ---------- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState("");

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    const ids = ["portfolio", "about", "contact"];
    const obs = ids.map((id) => {
      const el = document.getElementById(id);
      if (!el) return null;
      const io = new IntersectionObserver(([e]) => {if (e.isIntersecting) setActive(id);}, { rootMargin: "-35% 0px -55% 0px" });
      io.observe(el);
      return io;
    });
    return () => obs.forEach((o) => o && o.disconnect());
  }, []);

  const go = (id) => (e) => {e.preventDefault();setOpen(false);scrollTo(id);};

  return (
    <>
      <nav className={`nav ${scrolled ? "scrolled" : ""}`} aria-label="ניווט ראשי">
        <a href="#top" className="nav-brand" onClick={go("top")}>
          <span className="mark">A</span>
          <span>אברהם לוי · עורך וידאו לסושיאל</span>
        </a>
        <ul className="nav-links">
          <li><a href="#portfolio" className={active === "portfolio" ? "active" : ""} onClick={go("portfolio")}>תיק עבודות</a></li>
          <li><a href="#about" className={active === "about" ? "active" : ""} onClick={go("about")}>קצת עליי</a></li>
          <li style={{ width: "56px" }}><a href="#contact" className="nav-cta" onClick={go("contact")} style={{ fontWeight: "900" }}>צור קשר</a></li>
        </ul>
        <button className={`nav-hamburger ${open ? "open" : ""}`} onClick={() => setOpen(!open)} aria-label={open ? "סגור תפריט" : "פתח תפריט"}>
          <span /><span /><span />
        </button>
      </nav>
      <div className={`nav-mobile ${open ? "open" : ""}`}>
        <a href="#portfolio" onClick={go("portfolio")}>תיק עבודות</a>
        <a href="#about" onClick={go("about")}>קצת עליי</a>
        <a href="#contact" className="nav-cta" onClick={go("contact")}>צור קשר</a>
      </div>
    </>);

}

/* ---------- HERO ---------- */
function Hero() {
  const reels = useMemo(() => [
  { src: REEL_1 },
  { mark: "✦", tint: 0 },
  { src: REEL_2 },
  { mark: "◇", tint: 2 },
  { src: REEL_1 },
  { mark: "▲", tint: 3 },
  { src: REEL_2 },
  { mark: "✺", tint: 4 }],
  []);

  return (
    <section className="hero" id="top">
      <div className="hero-wall" aria-hidden="true">
        <div className="hero-wall-track">
          {[...reels, ...reels].map((r, i) =>
          <div key={i} className="hero-reel">
              <Media src={r.src} mark={r.mark} tint={r.tint || 0} loading="eager" />
            </div>
          )}
        </div>
      </div>
      <div className="hero-glow" aria-hidden="true" />
      <div className="hero-overlay" />

      <div className="hero-content">
        <Reveal as="div" className="hero-eyebrow">
          <span className="pulse" />
          <span className="eyebrow">אברהם לוי · עורך וידאו לסושיאל</span>
        </Reveal>

        <Reveal as="h1" className="hero-headline" delay={120}>
          <span className="line1">נעים להכיר <span className="smile">:)</span></span>
          <span className="line2">הסרטון הבא שלך יעלה על הדמיון.</span>
        </Reveal>

        <Reveal as="div" className="hero-cta-row" delay={260}>
          <a href="#contact" className="btn-primary" onClick={(e) => {e.preventDefault();scrollTo("contact");}}>
            <span>שנדבר?</span>
            <span className="arrow" aria-hidden="true">←</span>
          </a>
          <a href="#portfolio" className="hero-secondary-cta" onClick={(e) => {e.preventDefault();scrollTo("portfolio");}}>
            <Typewriter
              lines={["תנו לסרטונים לדבר ←", "סרטון אחד שווה אלף מילים ←", "או שאתם מעדיפים תיק עבודות? ←"]}
              typeSpeed={50} deleteSpeed={28} holdMs={2500} />
            
          </a>
        </Reveal>
      </div>

      <div className="scroll-indicator" aria-hidden="true">
        <span>SCROLL</span>
        <span className="chev" />
      </div>
    </section>);

}

/* ---------- ABOUT ---------- */
function About() {
  const frameRef = useRef(null);
  const onMove = (e) => {
    const el = frameRef.current;if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    el.style.setProperty("--ry", (px * 9).toFixed(2) + "deg");
    el.style.setProperty("--rx", (py * -9).toFixed(2) + "deg");
  };
  const onLeave = () => {
    const el = frameRef.current;if (!el) return;
    el.style.setProperty("--ry", "0deg");
    el.style.setProperty("--rx", "0deg");
  };
  return (
    <section className="section about" id="about">
      <div className="about-grid">
        <div className="about-text">
          <Reveal as="div" className="eyebrow">קצת עליי</Reveal>

          <Reveal as="blockquote" className="about-hook" delay={80}>
            המדד שלי לעריכה טובה?<br />כשאני לוחץ אקספורט, צופה בסרטון הסופי, ופתאום תופס את עצמי חושב: <span className="qm">׳</span>וואלה, נראלי שאני <span className="hl">חייב את השירות שלכם לעצמי</span>...<span className="qm">׳</span>
          </Reveal>

          <Reveal as="p" className="about-paragraph" delay={160}>
            <span className="lead-line">אהלן, אני אברהם.</span>
            <span className="dim">ירושלמי, מילואימניק ביחידה מובחרת, מגיע מעולם הצילום — ומתמחה ב<span className="hl">עריכת וידאו לסושיאל</span>.</span>
          </Reveal>

          <Reveal as="p" className="about-paragraph" delay={240}>
            רץ עם הלקוחות שלי <span className="hl">למרחקים ארוכים</span>.<br />
            מלווה יד ביד עד התוצר המושלם,<br />ככה שתקבלו <span className="hl">שקט נפשי</span>, <span className="hl">דיוק לפרטים</span>, ו<span className="hl">יחס אישי</span>.
          </Reveal>

          <Reveal as="p" className="about-paragraph" delay={320}>
            <span className="hl">ה-AI</span> הוא מגרש המשחקים ליצירתיות שלי.<br />
            את העריכה אני עדיין עושה בידיים — כמו פעם,<br />רק שעכשיו <span style={{ whiteSpace: "nowrap" }}><span className="hl">השמיים הם לא הגבול</span> <span className="smile">:)</span></span>
          </Reveal>
        </div>

        <Reveal as="div" className="about-portrait" delay={140}>
          <div className="frame" ref={frameRef} onMouseMove={onMove} onMouseLeave={onLeave}>
            <img src={PORTRAIT} alt="אברהם לוי, עורך וידאו" />
            <span className="cbrkt tl" aria-hidden="true" />
            <span className="cbrkt brr" aria-hidden="true" />
            <span className="scan" aria-hidden="true" />
            <div className="rec"><span className="d" />REC</div>
            <div className="tc">JLM · FREELANCE · 27</div>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ---------- CLIENTS ---------- */
const CLIENT_LOGOS = [
{ src: "assets/logos/t/playcast.png", alt: "PlayCast", h: 50 },
{ src: "assets/logos/t/greenpeace.png", alt: "Greenpeace Israel", h: 34 },
{ src: "assets/logos/t/idf.png", alt: "צה״ל", h: 68 },
{ src: "assets/logos/t/jaffa.png", alt: "מכון יפו", h: 70 },
{ src: "assets/logos/t/different.png", alt: "DIFFERENT", h: 22 },
{ src: "assets/logos/t/perkoff.png", alt: "פסח פרקוף", h: 64 },
{ src: "assets/logos/t/remax.png", alt: "RE/MAX", h: 52 },
{ src: "assets/logos/t/yeshmachin.png", alt: "יש מצ׳ין", h: 56 },
{ src: "assets/logos/t/guitar.png", alt: "לנגן גיטרה ב-5 שבועות", h: 52 }];


function Clients() {
  return (
    <section className="clients">
      <Reveal as="h2" className="clients-headline">
        אלה הלקוחות שכבר רצים איתי.<br />
        <span style={{ fontFamily: "var(--font-hand)", color: "var(--accent)" }}>רוצה לראות גם את הלוגו שלך כאן?</span> <span className="accent">:)</span>
      </Reveal>
      <div className="marquee">
        <div className="logos-track">
          {[...CLIENT_LOGOS, ...CLIENT_LOGOS].map((l, i) =>
          <div className="logo-chip" key={i}>
              <img src={l.src} alt={l.alt} loading="lazy" style={{ height: l.h + "px" }} />
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- MIDRAG ---------- */
function Midrag() {
  return (
    <section className="midrag">
      <Reveal as="h2">
        אנשים של מספרים?<br />
        תראו את הציון שלי במידרג <span className="accent">:)</span>
      </Reveal>
      <Reveal as="div" delay={120}>
        <a className="midrag-badge" href="https://www.midrag.co.il/SpCard/Sp/117208?areaId=1&serviceId=1499&sortByCategory=1351&isGeneric=false" target="_blank" rel="noopener noreferrer">
          <span className="score ltr">9.83</span>
          <span className="sep" />
          <span className="stack">
            <span className="big">ציון כללי במידרג</span>
            <span className="small">לצפייה בפרופיל ←</span>
          </span>
        </a>
        <div className="midrag-stars" aria-hidden="true">★★★★★</div>
        <div className="midrag-sub ltr">13 ביקורות 10/10 · חוות דעת</div>
      </Reveal>
    </section>);

}

/* ---------- SERVICES ---------- */
function Services() {
  const items = [
  { name: "סושיאל ורילז", src: REEL_1, badge: "01" },
  { name: "קורסים דיגיטליים", src: EDITING, badge: "02" },
  { name: "פודקאסטים", src: REEL_2, badge: "03" }];

  return (
    <section className="section services">
      <Reveal as="h2">מה אני עורך <span className="smile">:)</span></Reveal>
      <div className="services-grid">
        {items.map((it, i) =>
        <Reveal as="a" href="#portfolio" key={it.name} className="service-card" delay={i * 90}
        onClick={(e) => {e.preventDefault();scrollTo("portfolio");}}>
            <div className="media"><Media src={it.src} alt={it.name} /></div>
            <div className="gradient" />
            <div className="badge ltr">{it.badge}</div>
            <div className="label">{it.name}</div>
            <div className="arrow-tag">לצפייה בעבודות ←</div>
          </Reveal>
        )}
      </div>
      <div className="swipe-hint" aria-hidden="true">החליקו לצפייה בעוד ←</div>
    </section>);

}

Object.assign(window, { Nav, Hero, About, Clients, Midrag, Services, scrollTo, REEL_1, REEL_2, EDITING });