/* global React */
// =====================================================================
// Anna Gruzman Photography — shared website UI kit components
// Exports to window so each page script can use them.
// =====================================================================
const { useState, useEffect, useRef } = React;

const WA_LINK = "https://wa.link/r5lpl9";
const IG_LINK = "https://www.instagram.com/anna_gruzman_photography/";
const FB_LINK = "https://www.facebook.com/annagruzman.photo/";
const PHONE = "054-5330090";
const EMAIL = "annagruzman.photo@gmail.com";

const NAV = [
  { key: "home", label: "בית", href: "index.html" },
  { key: "family", label: "משפחה", href: "family.html" },
  { key: "batmitzvah", label: "בת מצווה", href: "batmitzvah.html" },
  { key: "lifestyle", label: "מיתוג", href: "lifestyle.html" },
];

// ---- Decorative sage diamond divider ----
function Rule({ wide }) {
  return (
    <div className="ag-rule" style={{ maxWidth: wide ? 1180 : 120 }}>
      <span className="ag-rule-diamond">◆</span>
    </div>
  );
}

// ---- Eyebrow label ----
function Eyebrow({ children, light }) {
  return <span className="eyebrow" style={light ? { color: "var(--color-sage-tint)" } : null}>{children}</span>;
}

// ---- On-brand photo placeholder tile ----
function Photo({ ratio = "4/5", label, alt, tall, className = "", style = {} }) {
  const hasImage = !!style.backgroundImage;
  return (
    <div
      className={"ag-photo " + (hasImage ? "has-image " : "") + className}
      style={{ aspectRatio: tall ? "3/4" : ratio, ...style }}
      role={hasImage ? "img" : undefined}
      aria-label={hasImage ? (alt || label || undefined) : undefined}
    >
      {!hasImage && (
        <div className="ag-photo-inner">
          <span className="ag-photo-mark">❦</span>
          {label && <span className="ag-photo-label">{label}</span>}
        </div>
      )}
    </div>
  );
}

// ---- Buttons ----
function Btn({ children, variant = "primary", as = "a", href = "#", onClick, full }) {
  const cls = `btn ${variant === "primary" ? "btn-primary" : variant === "sage" ? "btn-sage" : variant === "ghost" ? "btn-ghost" : ""}`;
  const Tag = as;
  return (
    <Tag className={cls} href={as === "a" ? href : undefined} onClick={onClick}
      style={full ? { width: "100%", justifyContent: "center" } : null}>
      {children}
    </Tag>
  );
}

// ---- WhatsApp glyph ----
function WAIcon({ size = 24 }) {
  return (
    <svg viewBox="0 0 32 32" width={size} height={size} fill="currentColor" aria-hidden="true">
      <path d="M16.003 3C9.376 3 4 8.376 4 15.003c0 2.379.69 4.604 1.882 6.487L4 29l7.71-1.821a11.95 11.95 0 0 0 4.29.798h.005c6.626 0 12.003-5.376 12.003-12.003 0-3.207-1.247-6.222-3.516-8.49A11.92 11.92 0 0 0 16.003 3zm0 21.999h-.004a9.95 9.95 0 0 1-5.063-1.388l-.363-.215-4.292 1.013 1.038-4.187-.235-.376a9.952 9.952 0 0 1-1.532-5.847c0-5.514 4.487-10.001 10.001-10.001 2.67 0 5.18 1.04 7.067 2.927a9.93 9.93 0 0 1 2.93 7.075c0 5.515-4.487 10.002-10 10.002zm5.488-7.493c-.301-.151-1.78-.879-2.056-.979-.275-.1-.476-.151-.677.151-.2.301-.776.978-.951 1.179-.175.2-.35.226-.65.075-.301-.151-1.27-.468-2.42-1.493-.894-.798-1.498-1.785-1.673-2.086-.175-.301-.018-.464.131-.614.135-.135.301-.351.451-.527.151-.175.2-.301.301-.502.1-.2.05-.376-.025-.527-.075-.15-.677-1.633-.927-2.234-.245-.589-.494-.509-.677-.519-.175-.008-.376-.01-.577-.01s-.527.075-.803.376c-.276.301-1.054 1.029-1.054 2.51 0 1.48 1.078 2.913 1.229 3.114.15.2 2.121 3.235 5.137 4.535 1.755.756 2.318.811 3.143.681.503-.078 1.78-.728 2.031-1.43.25-.701.25-1.302.175-1.43-.075-.125-.275-.2-.576-.351z" />
    </svg>
  );
}

// ---- Sticky header ----
function Header({ active }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"ag-header" + (scrolled ? " scrolled" : "")}>
      <div className="ag-header-inner">
        <a className="ag-logo ag-logo-text" href="index.html" aria-label="Anna Gruzman Photography">
          <span className="ag-logo-name">anna gruzman</span>
          <span className="ag-logo-sub">photography</span>
        </a>
        <nav className="ag-nav">
          {NAV.map((n) => (
            <a key={n.key} href={n.href} className={active === n.key ? "active" : ""}>{n.label}</a>
          ))}
          <a href="index.html#contact" className={active === "contact" ? "active" : ""}>צרי קשר</a>
        </nav>
        <a className="ag-header-phone" href={"tel:" + PHONE.replace(/-/g, "")}>{PHONE}</a>
        <button className="ag-burger" onClick={() => setOpen(!open)} aria-label="תפריט">
          <span /><span /><span />
        </button>
      </div>
      {open && (
        <nav className="ag-nav-mobile">
          {NAV.map((n) => <a key={n.key} href={n.href}>{n.label}</a>)}
          <a href="index.html#contact">צרי קשר</a>
        </nav>
      )}
    </header>
  );
}

// ---- Footer ----
function Footer() {
  return (
    <footer className="ag-footer">
      <div className="ag-footer-inner">
        <div className="ag-footer-brand">
          <div className="ag-footer-wordmark">ANNA GRUZMAN</div>
          <div className="ag-footer-script">turning moments into timeless treasures</div>
          <div className="ag-footer-socials">
            <a href={IG_LINK} target="_blank" rel="noopener" aria-label="Instagram">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
            </a>
            <a href={FB_LINK} target="_blank" rel="noopener" aria-label="Facebook">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M15 8h-2.5a1.5 1.5 0 0 0-1.5 1.5V12H9v3h2v6h3v-6h2.5l.5-3H14V9.5a.5.5 0 0 1 .5-.5H15V8z"/></svg>
            </a>
            <a href={WA_LINK} target="_blank" rel="noopener" aria-label="WhatsApp"><WAIcon size={18} /></a>
          </div>
        </div>
        <div className="ag-footer-col">
          <h6>יצירת קשר</h6>
          <a href={"tel:" + PHONE.replace(/-/g, "")}>{PHONE}</a>
          <span>כפר החורש, עמק יזרעאל</span>
          <a className="ag-mail-btn" href={"mailto:" + EMAIL} aria-label="שלחי מייל">
            <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
            מייל
          </a>
        </div>
        <div className="ag-footer-col">
          <h6>סשנים</h6>
          <a href="family.html">משפחה · גיל שנה · הריון</a>
          <a href="batmitzvah.html">בוק בת מצווה</a>
          <a href="lifestyle.html">מיתוג לעסקים</a>
          <a href="travel.html">בלוג</a>
        </div>
      </div>
      <div className="ag-footer-bottom">
        <span>© 2026 Anna Gruzman Photography · כל הזכויות שמורות</span>
        <span>תנאי שימוש · מדיניות פרטיות</span>
      </div>
    </footer>
  );
}

// ---- Pinned WhatsApp FAB ----
function WhatsAppFAB() {
  return (
    <a className="ag-fab" href={WA_LINK} target="_blank" rel="noopener" aria-label="דברי איתי בוואטסאפ">
      <span className="ag-fab-pulse" />
      <WAIcon size={30} />
      <span className="ag-fab-tip">דברי איתי בוואטסאפ</span>
    </a>
  );
}

// ---- Section heading block ----
function SectionHead({ eyebrow, title, intro, center, light }) {
  return (
    <div className={"ag-sechead" + (center ? " center" : "")}>
      {eyebrow && <Eyebrow light={light}>{eyebrow}</Eyebrow>}
      {title && <h2 style={light ? { color: "var(--color-cream)" } : null}>{title}</h2>}
      {intro && <p className="lead" style={light ? { color: "var(--color-sage-tint)" } : null}>{intro}</p>}
    </div>
  );
}

// ---- Pricing card ----
function PriceCard({ tier, name, items, price, premium, note, ribbon, cta }) {
  return (
    <div className={"ag-pricecard" + (premium ? " premium" : "")}>
      {premium && <div className="ag-pricecard-ribbon">{ribbon || "הכי פופולרי"}</div>}
      {tier && <div className="ag-pricecard-tier">{tier}</div>}
      <h3>{name}</h3>
      <ul>
        {items.map((it, i) => <li key={i}>{it}</li>)}
      </ul>
      {note && <p className="ag-pricecard-note">{note}</p>}
      <div className="ag-pricecard-invest">ההשקעה שלכם</div>
      <div className={"ag-pricecard-price" + (premium ? " brass" : "")}>{price}</div>
      <a className="ag-pricecard-cta" href={WA_LINK} target="_blank" rel="noopener">{cta || "שריני תאריך ›"}</a>
    </div>
  );
}

// ---- FAQ / accordion ----
function Accordion({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div className="ag-accordion">
      {items.map((it, i) => (
        <div key={i} className={"ag-acc-item" + (open === i ? " open" : "")}>
          <button className="ag-acc-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{it.q}</span>
            <span className="ag-acc-icon">{open === i ? "–" : "+"}</span>
          </button>
          <div className="ag-acc-a"><p>{it.a}</p></div>
        </div>
      ))}
    </div>
  );
}

// ---- CTA band ----
function CtaBand({ title = "יש לכם שאלות? אני כאן!", sub = "מוזמנים להשאיר הודעה, להתקשר או לשלוח הודעה בוואטסאפ." }) {
  return (
    <section className="ag-ctaband">
      <Eyebrow light>בואי נדבר</Eyebrow>
      <h2>{title}</h2>
      <p>{sub}</p>
      <div className="ag-ctaband-btns">
        <a className="btn btn-sage" href={WA_LINK} target="_blank" rel="noopener"><WAIcon size={18} /> שלחי הודעת וואטסאפ</a>
        <a className="btn" style={{ borderColor: "var(--color-sage-tint)", color: "var(--color-cream)" }} href="index.html#contact">לטופס יצירת קשר</a>
      </div>
    </section>
  );
}

// ---- Testimonial ----
function Testimonial({ quote, author }) {
  return (
    <figure className="ag-testimonial">
      <blockquote>{quote}</blockquote>
      <figcaption>— {author}</figcaption>
    </figure>
  );
}

Object.assign(window, {
  Rule, Eyebrow, Photo, Btn, WAIcon, Header, Footer, WhatsAppFAB,
  SectionHead, PriceCard, Accordion, CtaBand, Testimonial,
  WA_LINK, IG_LINK, FB_LINK, PHONE, EMAIL, NAV,
});