/* global React */

const CONTACT = {
  // TODO: confirm phone number with Sean — (057) 933 2167 is unverified.
  // Used in faq.jsx, footer, and the sticky mobile CTA. Do not invent a number.
  phoneDisplay: "(057) 933 2167",
  phoneHref: "tel:+353579332167",
  email: "info@eganstone.ie",
  addressLines: ["Egan Stone", "5 Lower Main St, Kilbeggan", "Co. Westmeath, N91 FNK1"],
};

const DEMO_PHOTOS = {
  hero: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?auto=format&fit=crop&w=2200&q=85",
  kitchenWarm: "https://images.unsplash.com/photo-1556909172-54557c7e4fb7?auto=format&fit=crop&w=1200&q=85",
  kitchenCool: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1200&q=85",
  kitchenLight: "https://images.unsplash.com/photo-1565538810643-b5bdb714032a?auto=format&fit=crop&w=1200&q=85",
  island: "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1200&q=85",
  bathroom: "https://images.unsplash.com/photo-1620626011761-996317b8d101?auto=format&fit=crop&w=1200&q=85",
  showroom: "https://images.unsplash.com/photo-1618220179428-22790b461013?auto=format&fit=crop&w=1200&q=85",
};

/* ============================================================
   Social icons
   ============================================================ */
function SocialIcons({ color = "rgba(255,255,255,0.6)", hoverColor = "white", size = 17, gap = 14 }) {
  const style = { color, transition: "color 160ms", display: "flex", alignItems: "center" };
  return (
    <div style={{ display: "flex", alignItems: "center", gap }}>
      <a href="https://www.instagram.com/eganstonekilbeggan" target="_blank" rel="noopener noreferrer"
         aria-label="Instagram" style={style}
         onMouseEnter={e => e.currentTarget.style.color = hoverColor}
         onMouseLeave={e => e.currentTarget.style.color = color}>
        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
          <circle cx="12" cy="12" r="4.5"/>
          <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
        </svg>
      </a>
      <a href="https://www.facebook.com/EganGraniteandMarble" target="_blank" rel="noopener noreferrer"
         aria-label="Facebook" style={style}
         onMouseEnter={e => e.currentTarget.style.color = hoverColor}
         onMouseLeave={e => e.currentTarget.style.color = color}>
        <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
          <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
        </svg>
      </a>
    </div>
  );
}

/* ============================================================
   Logo
   ============================================================ */
function Logo({ variant = "light", size = 68 }) {
  return (
    <img
      src="EganLogoTransparent.png"
      alt="Egan Stone"
      style={{
        height: size,
        width: "auto",
        display: "block",
        filter: variant === "light" ? "brightness(0) invert(1)" : "none",
      }}
    />
  );
}

/* ============================================================
   Navigation
   ============================================================ */
function Nav({ route, navigate, forceSolid = false }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  // Reset menu on route change
  React.useEffect(() => { setMenuOpen(false); }, [route]);

  const links = [
    { id: "work", label: "Work" },
    { id: "materials", label: "Materials" },
    { id: "faq", label: "FAQ" },
    { id: "story", label: "Our Story" },
  ];

  const isSolid = forceSolid || scrolled;

  return (
    <React.Fragment>
      <nav className={"nav" + (isSolid ? " solid" : "")}>
        <a href="#/" onClick={(e) => { e.preventDefault(); navigate("home"); }}>
          <Logo variant="light" />
        </a>
        <div className="nav-links">
          {links.map((l) => (
            <a key={l.id} href={"#/" + l.id}
               onClick={(e) => { e.preventDefault(); navigate(l.id); }}
               className={"nav-link" + (route === l.id ? " active" : "")}>
              {l.label}
            </a>
          ))}
          <SocialIcons size={16} gap={12} />
          <a href="#/quotes" onClick={(e) => { e.preventDefault(); navigate("quotes"); }}
             className={"nav-cta-outline" + (route === "quotes" ? " active" : "")}>
            Get a Quote
          </a>
          <a href="#/booking" onClick={(e) => { e.preventDefault(); navigate("booking"); }} className="nav-cta">
            Book a Visit
          </a>
        </div>
        <button className="hamburger" onClick={() => setMenuOpen(v => !v)} aria-label="Menu">
          <span></span><span></span><span></span>
        </button>
      </nav>

      <div className={"mobile-menu" + (menuOpen ? " open" : "")}>
        <a href="#/quotes" onClick={(e) => { e.preventDefault(); navigate("quotes"); setMenuOpen(false); }}>Quotes</a>
        {links.map((l) => (
          <a key={l.id} href={"#/" + l.id}
             onClick={(e) => { e.preventDefault(); navigate(l.id); setMenuOpen(false); }}>
            {l.label}
          </a>
        ))}
        <a className="btn btn-teal mm-cta" href="#/booking"
           onClick={(e) => { e.preventDefault(); navigate("booking"); setMenuOpen(false); }}>
          Book a Visit <span className="arr">→</span>
        </a>
      </div>

    </React.Fragment>
  );
}

/* ============================================================
   Footer
   ============================================================ */
function Footer({ navigate }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <Logo variant="light" />
            <p style={{marginTop: 24, fontSize: 14, lineHeight: 1.65, color: "rgba(255,255,255,0.88)", maxWidth: 320}}>
              A family stone fabricator in the Irish midlands. Six generations of craftsmen. Worktops measured and fitted across the country from our factory in Kilbeggan.
            </p>
            <div style={{marginTop: 28}}>
              <div style={{fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "#7CC3D8"}}>Call the workshop</div>
              <a className="footer-phone" href={CONTACT.phoneHref}>{CONTACT.phoneDisplay}</a>
            </div>
          </div>

          <div className="col">
            <h6>Explore</h6>
            <ul>
              <li><a href="#/work" onClick={(e) => { e.preventDefault(); navigate("work"); }}>Work</a></li>
              <li><a href="#/materials" onClick={(e) => { e.preventDefault(); navigate("materials"); }}>Materials</a></li>
              <li><a href="#/quotes" onClick={(e) => { e.preventDefault(); navigate("quotes"); }}>Quotes</a></li>
              <li><a href="#/booking" onClick={(e) => { e.preventDefault(); navigate("booking"); }}>Book a Visit</a></li>
              <li><a href="#/faq" onClick={(e) => { e.preventDefault(); navigate("faq"); }}>FAQ</a></li>
              <li><a href="#/story" onClick={(e) => { e.preventDefault(); navigate("story"); }}>Our Story</a></li>
            </ul>
          </div>

          <div className="col">
            <h6>Workshop</h6>
            <ul>
              <li style={{color: "rgba(255,255,255,0.88)", fontSize: 14, lineHeight: 1.7}}>
                {CONTACT.addressLines.map((line, i) => (
                  <React.Fragment key={line}>{line}{i < CONTACT.addressLines.length - 1 && <br />}</React.Fragment>
                ))}
              </li>
              <li style={{marginTop: 14}}>
                <a href={`mailto:${CONTACT.email}`}>{CONTACT.email}</a>
              </li>
              <li>
                <a href={CONTACT.phoneHref}>{CONTACT.phoneDisplay}</a>
              </li>
            </ul>
          </div>

          <div className="col">
            <h6>Visit & Follow</h6>
            <ul>
              <li style={{color: "rgba(255,255,255,0.88)", fontSize: 14, lineHeight: 1.7}}>
                Showroom open<br />
                Mon–Fri · 9:30–13:00 / 14:00–16:30<br />
                Sat · 9:00–13:00
              </li>
              <li style={{marginTop: 20, display:"flex", flexDirection:"column", gap:10}}>
                <a href="https://www.instagram.com/eganstonekilbeggan" target="_blank" rel="noopener noreferrer"
                   style={{display:"flex", alignItems:"center", gap:10, color:"rgba(255,255,255,0.88)", fontSize:14, transition:"color 160ms"}}
                   onMouseEnter={e=>e.currentTarget.style.color="white"} onMouseLeave={e=>e.currentTarget.style.color="rgba(255,255,255,0.88)"}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                    <circle cx="12" cy="12" r="4.5"/>
                    <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
                  </svg>
                  Instagram
                </a>
                <a href="https://www.facebook.com/EganGraniteandMarble" target="_blank" rel="noopener noreferrer"
                   style={{display:"flex", alignItems:"center", gap:10, color:"rgba(255,255,255,0.88)", fontSize:14, transition:"color 160ms"}}
                   onMouseEnter={e=>e.currentTarget.style.color="white"} onMouseLeave={e=>e.currentTarget.style.color="rgba(255,255,255,0.88)"}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
                  </svg>
                  Facebook
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <div>© 2026 Egan Stone, Kilbeggan, Co. Westmeath</div>
          <SocialIcons color="rgba(255,255,255,0.45)" hoverColor="rgba(255,255,255,0.9)" size={16} gap={16} />
          <div style={{display: "flex", gap: 28}}>
            <a href="#" style={{color: "rgba(255,255,255,0.7)"}}>Privacy Policy</a>
            <a href="#" style={{color: "rgba(255,255,255,0.7)"}}>Cookies</a>
            <a href="#" style={{color: "rgba(255,255,255,0.7)"}}>Site by hand</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ============================================================
   Reusable placeholders
   ============================================================ */
function ImgPh({ label, tone = "default", style, children, className = "" }) {
  return (
    <div className={`img-ph ${tone} ${className}`} style={style}>
      {label ? <span className="lbl">{label}</span> : null}
      {children}
    </div>
  );
}

/* ============================================================
   Page header (used by interior pages)
   ============================================================ */
function PageHero({ kicker, title, sub, tone = "deep" }) {
  const bgClass = tone === "deep" ? "deep" : "dark";
  return (
    <section className={`section ${bgClass}`} style={{paddingTop: "clamp(112px, 13vw, 170px)", paddingBottom: "clamp(56px, 6vw, 92px)", position: "relative", overflow: "hidden"}}>
      <div className="img-ph" style={{position: "absolute", inset: 0, opacity: 0.35}}></div>
      <div className="container" style={{position: "relative", zIndex: 2}}>
        {kicker && <div className="kicker on-dark" style={{color: "#7CC3D8", marginBottom: 24}}>{kicker}</div>}
        <h1 className="display" style={{color: "white", maxWidth: 1100}}>{title}</h1>
        {sub && <p className="lede" style={{color: "rgba(255,255,255,0.8)", maxWidth: 640, marginTop: 28, fontSize: 18}}>{sub}</p>}
      </div>
    </section>
  );
}

Object.assign(window, { Logo, Nav, Footer, ImgPh, PageHero, SocialIcons });
Object.assign(window, { CONTACT, DEMO_PHOTOS });