/* UI atoms: Logo, Nav, Footer, CtaBand, PressStrip, Process, Lightbox, etc. */

const Logo = ({ dark=false, size=28 }) => (
  <svg className="mark" viewBox="0 0 40 40" width={size} height={size} aria-hidden="true">
    <circle className="mark-bg" cx="20" cy="20" r="20" fill="var(--terracotta)"/>
    <path d="M12 14 h16 M12 20 h11 M12 26 h16" stroke="white" strokeWidth="1.6" strokeLinecap="square" fill="none"/>
    <path d="M28 12 L28 28 M30 14 L30 26" stroke="white" strokeWidth="0.6" fill="none" opacity="0.5"/>
  </svg>
);

const LogoFull = ({ size = 28 }) => (
  <div className="nav-logo" onClick={() => window.__nav && window.__nav("home")}>
    <Logo size={size}/>
    <span className="wordmark">EVENTCHIC</span>
  </div>
);

const ArrowRight = ({ size=16 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
    <path d="M5 12h14M13 6l6 6-6 6"/>
  </svg>
);

const Nav = ({ route, setRoute, lang, setLang, scrolled, tone="dark" }) => {
  const t = COPY[lang];
  const items = [
    { id:"portfolio", lbl:t.nav.portfolio },
    { id:"services", lbl:t.nav.services },
    { id:"about", lbl:t.nav.about },
    { id:"contact", lbl:t.nav.contact },
  ];
  return (
    <nav className={`nav ${tone} ${scrolled?"scrolled":""}`}>
      <LogoFull/>
      <div className="nav-links">
        {items.map(it => (
          <button key={it.id} className={`nav-link ${route===it.id || (route==="case"&&it.id==="portfolio") ? "active" : ""}`} onClick={()=>setRoute(it.id)}>
            {it.lbl}
          </button>
        ))}
      </div>
      <div className="nav-end">
        <div className="lang">
          <button className={lang==="en"?"active":""} onClick={()=>setLang("en")}>EN</button>
          <span className="sep">/</span>
          <button className={lang==="ar"?"active":""} onClick={()=>setLang("ar")}>ع</button>
        </div>
        <button className="nav-cta" onClick={()=>setRoute("contact")}>{t.nav.cta}</button>
      </div>
    </nav>
  );
};

const PressStrip = ({ lang }) => {
  const t = COPY[lang];
  return (
    <section className="press">
      <div className="shell">
        <div className="label">{t.press.label}</div>
        <div style={{display:"flex", justifyContent:"center", alignItems:"center", gap:48, flexWrap:"wrap"}}>
          <img src="media/press-harpers-bazaar.webp" className="logo" alt="Harper's Bazaar Arabia" style={{height:34}}/>
          <span style={{fontFamily:"var(--display)", fontStyle:"italic", fontSize:22, color:"var(--muted)"}}>Fact Magazines</span>
          <span style={{fontFamily:"var(--display)", fontStyle:"italic", fontSize:22, color:"var(--muted)"}}>Bride Club ME</span>
          <span style={{fontFamily:"var(--display)", fontStyle:"italic", fontSize:22, color:"var(--muted)"}}>Caterer Middle East</span>
        </div>
        <div className="body-s" style={{marginTop:16, color:"var(--muted)", fontStyle:"italic"}}>
          Permissioned mentions — please confirm publication rights before launch.
        </div>
      </div>
    </section>
  );
};

const Process = ({ lang, dark=false }) => {
  const t = COPY[lang];
  return (
    <section className={`process ${dark?"dark":""}`} style={dark?{background:"var(--ink)", color:"var(--paper)"}:{}}>
      <div className="shell" style={{padding:"96px var(--pad-x) 0"}}>
        <div style={{display:"grid", gridTemplateColumns:"1fr 2fr", gap:48, alignItems:"end", marginBottom:48}}>
          <div>
            <div className="eyebrow" style={dark?{color:"var(--muted-dark)"}:{}}>{t.process.eyebrow}<span className="dot"></span></div>
            <h2 className="display" style={{fontSize:"clamp(36px, 5vw, 72px)", margin:"18px 0 0"}}>{t.process.title}</h2>
          </div>
          <p className="lede" style={dark?{color:"var(--muted-dark)"}:{}}>{t.process.lede}</p>
        </div>
      </div>
      <div className="shell">
        <div className="process-grid" style={dark?{borderColor:"rgba(255,255,255,0.1)"}:{}}>
          {t.process.steps.map((s,i)=>(
            <div key={i} className="process-step" style={dark?{borderColor:"rgba(255,255,255,0.1)"}:{}}>
              <div className="num">{s.num} · Phase</div>
              <div className="nm">{s.nm}</div>
              <div className="ds" style={dark?{color:"var(--muted-dark)"}:{}}>{s.ds}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const CtaBand = ({ lang, setRoute }) => {
  const t = COPY[lang];
  return (
    <section className="cta-band">
      <div className="inner shell">
        <div className="eyebrow on-dark" style={{justifyContent:"center", display:"inline-flex", alignItems:"center", marginBottom:18}}>
          {t.cta_band.title.split('.')[0]}<span className="dot"></span>
        </div>
        <h2>{t.cta_band.title}</h2>
        <p className="body-l">{t.cta_band.body}</p>
        <button className="btn terracotta" onClick={()=>setRoute("contact")}>{t.cta_band.cta} <ArrowRight/></button>
      </div>
    </section>
  );
};

const Footer = ({ lang, setRoute }) => {
  const t = COPY[lang];
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <div className="wm">EVENTCHIC</div>
          <p>{lang==="en"
            ? "Luxury event design, styling and décor — Al Quoz Industrial Area 2, Dubai. Designing weddings, private celebrations and brand activations since 2015."
            : "تصميم وتنسيق فعاليات فاخر — القوز الصناعية ٢، دبي. أعراس، احتفالات خاصة، إطلاقات تجارية منذ ٢٠١٥."}</p>
        </div>
        <div>
          <h4>{lang==="en"?"Explore":"تصفح"}</h4>
          <ul>
            <li><a onClick={()=>setRoute("portfolio")}>{t.nav.portfolio}</a></li>
            <li><a onClick={()=>setRoute("services")}>{t.nav.services}</a></li>
            <li><a onClick={()=>setRoute("about")}>{t.nav.about}</a></li>
            <li><a onClick={()=>setRoute("contact")}>{t.nav.contact}</a></li>
          </ul>
        </div>
        <div>
          <h4>{lang==="en"?"Studio":"الاستوديو"}</h4>
          <ul>
            <li>Al Quoz Industrial Area 2</li>
            <li>Dubai, UAE</li>
            <li style={{marginTop:14}}>+971 4 337 8967</li>
            <li>+971 58 275 9609</li>
            <li>info@eventchicdesigns.com</li>
          </ul>
        </div>
        <div>
          <h4>{lang==="en"?"Follow":"تابعنا"}</h4>
          <ul>
            <li><a href="https://instagram.com/eventchicdesigns" target="_blank" rel="noopener noreferrer">Instagram</a></li>
            <li><a href="https://www.facebook.com/100063644553540" target="_blank" rel="noopener noreferrer">Facebook</a></li>
            <li><a href="https://linkedin.com/company/eventchicdesigns" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
            <li><a href="https://youtube.com/c/EventChicDesigns" target="_blank" rel="noopener noreferrer">YouTube</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2025 Event Chic Designs · {lang==="en"?"All rights reserved":"جميع الحقوق محفوظة"}</div>
        <div className="right">
          <span>Where passion meets perfection</span>
          <span>·</span>
          <span>EN / ع</span>
        </div>
      </div>
    </footer>
  );
};

const Lightbox = ({ images, index, onClose, onPrev, onNext }) => {
  React.useEffect(() => {
    const h = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft") onPrev();
      if (e.key === "ArrowRight") onNext();
    };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [onClose, onPrev, onNext]);

  return (
    <div className="lightbox" onClick={onClose}>
      <button className="close" onClick={onClose}>Close ✕</button>
      <button className="nav-arrow prev" onClick={(e)=>{e.stopPropagation(); onPrev();}}>← Prev</button>
      <img src={images[index]} alt="" onClick={(e)=>e.stopPropagation()}/>
      <button className="nav-arrow next" onClick={(e)=>{e.stopPropagation(); onNext();}}>Next →</button>
    </div>
  );
};

Object.assign(window, { Logo, LogoFull, Nav, PressStrip, Process, CtaBand, Footer, Lightbox, ArrowRight });
