/* global React */
const { useState, useEffect, useRef } = React;

// Real images from p-wood.com
const PWOOD_IMAGES = {
  "hero-visual":       "https://www.p-wood.com/i/w1200-h800/uploads/projects/1davqdgdfd1c4oosoo.jpg",
  "model-sandwich":    "https://www.p-wood.com/i/w800-h600/uploads/projects/1davqdgdfd1c4oosoo.jpg",
  "model-κορμόσπιτο":  "https://www.p-wood.com/i/w800-h600/uploads/projects/3ardcoejv8mcwowkwk.jpg",
  "model-ξύλινο κιόσκι": "https://www.p-wood.com/i/w800-h600/uploads/projects/2urgpb6pvhicccsgoo.jpg",
  "model-ξύλινη αποθήκη": "https://www.p-wood.com/i/w800-h600/uploads/projects/1hwt8uoyc0lc00so0w.jpg",
  "model-ξύλινες κατασκευές": "https://www.p-wood.com/i/w800-h600/uploads/projects/ot8e6c4uz6s0cwckoo.jpg",
  "model-μελέτη & σχεδιασμός": "https://www.p-wood.com/i/w800-h600/uploads/projects/1atc4fgyzhes4o8o0k.jpg",
  "model-sandwich panel": "https://www.p-wood.com/i/w800-h600/uploads/projects/1davqdgdfd1c4oosoo.jpg",
  "model-log house":   "https://www.p-wood.com/i/w800-h600/uploads/projects/3ardcoejv8mcwowkwk.jpg",
  "model-wooden kiosk": "https://www.p-wood.com/i/w800-h600/uploads/projects/2urgpb6pvhicccsgoo.jpg",
  "model-wooden storage": "https://www.p-wood.com/i/w800-h600/uploads/projects/1hwt8uoyc0lc00so0w.jpg",
  "model-custom builds": "https://www.p-wood.com/i/w800-h600/uploads/projects/ot8e6c4uz6s0cwckoo.jpg",
  "model-design service": "https://www.p-wood.com/i/w800-h600/uploads/projects/1atc4fgyzhes4o8o0k.jpg",
  "materials-visual":  "https://www.p-wood.com/i/w800-h1000/uploads/projects/3ardcoejv8mcwowkwk.jpg",
  "blog-0":            "https://www.p-wood.com/i/w800-h600/uploads/projects/1davqdgdfd1c4oosoo.jpg",
  "blog-1":            "https://www.p-wood.com/i/w800-h600/uploads/projects/ot8e6c4uz6s0cwckoo.jpg",
};

/* ============================================================
   Placeholder — renders real image if available, else striped fallback
   ============================================================ */
function Placeholder({ label, shape = "rect", id }) {
  const src = id ? (PWOOD_IMAGES[id] || PWOOD_IMAGES["model-" + (label || "").toLowerCase()]) : null;
  if (src) {
    return (
      <img
        src={src}
        alt={label || ""}
        style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
        loading="lazy"
      />
    );
  }
  return (
    <div className="stripe-pattern" style={{ width: "100%", height: "100%", position: "relative" }}>
      <div className="placeholder-label">{label}</div>
    </div>
  );
}

/* ============================================================
   Nav
   ============================================================ */
function Nav({ t, lang, setLang, onCalc }) {
  return (
    <div className="nav-wrap">
      <div className="shell">
        <nav className="nav">
          <a href="#top" className="nav__brand">
            <div className="nav__logo">
              <img
                src="https://www.p-wood.com/assets/img/logo/logoF_green.png"
                alt="Progress Wood"
                style={{ width: "22px", height: "22px", objectFit: "contain", filter: "invert(1) brightness(2)" }}
              />
            </div>
            <div className="nav__name">Progress Wood <span>/ Ξύλινα Σπίτια</span></div>
          </a>
          <div className="nav__links">
            <a href="#models" className="nav__link">{t.nav.models}</a>
            <a href="#process" className="nav__link">{t.nav.process}</a>
            <a href="#materials" className="nav__link">{t.nav.materials}</a>
            <a href="#blog" className="nav__link">{t.nav.blog}</a>
            <a href="#contact" className="nav__link">{t.nav.contact}</a>
          </div>
          <div className="nav__right">
            <div className="nav__lang" role="group" aria-label="language">
              <button className={lang === "el" ? "active" : ""} onClick={() => setLang("el")}>EL</button>
              <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
            </div>
            <button className="btn btn--primary" onClick={onCalc}>
              {t.nav.ctaShort} <span className="arr">→</span>
            </button>
          </div>
        </nav>
      </div>
    </div>
  );
}

/* ============================================================
   Footer
   ============================================================ */
function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer__top">
          <div className="footer__brand">
            <div className="nav__brand">
              <div className="nav__logo">
                <img
                  src="https://www.p-wood.com/assets/img/logo/logoF_green.png"
                  alt="Progress Wood"
                  style={{ width: "22px", height: "22px", objectFit: "contain", filter: "invert(1) brightness(2)" }}
                />
              </div>
              <div className="nav__name">Progress Wood</div>
            </div>
            <div className="footer__big italic">{t.footer.big}</div>
          </div>
          <div className="footer__col">
            <h5>{t.footer.contact}</h5>
            <a href="tel:+306932320666">+30 6932 320666</a>
            <a href="tel:+302394022244">+30 23940 22244</a>
            <a href="mailto:info@p-wood.com">info@p-wood.com</a>
            <span style={{fontSize:"14px",color:"var(--muted)"}}>{t.footer.address}</span>
            <span style={{fontSize:"14px",color:"var(--muted)"}}>{t.footer.hours}</span>
            <div style={{display:"flex",gap:"10px",marginTop:"8px"}}>
              <a href="https://www.facebook.com/TopouzidiAlexandr" target="_blank" rel="noopener" style={{fontSize:"12px",color:"var(--oak-deep)"}}>Facebook</a>
              <span style={{color:"var(--hairline-strong)"}}>·</span>
              <a href="viber://chat?number=%2B306932320666" style={{fontSize:"12px",color:"var(--oak-deep)"}}>Viber</a>
              <span style={{color:"var(--hairline-strong)"}}>·</span>
              <a href="https://t.me/+306932320666" target="_blank" rel="noopener" style={{fontSize:"12px",color:"var(--oak-deep)"}}>Telegram</a>
            </div>
          </div>
          <div className="footer__col">
            <h5>{t.footer.explore}</h5>
            <a href="#models">{t.nav.models}</a>
            <a href="#process">{t.nav.process}</a>
            <a href="#materials">{t.nav.materials}</a>
            <a href="#calculator">{t.nav.calculator}</a>
            <a href="#blog">{t.nav.blog}</a>
          </div>
          <div className="footer__col">
            <h5>{t.footer.company}</h5>
            <a href="https://www.p-wood.com" target="_blank" rel="noopener">p-wood.com</a>
            <a href="#contact">Επικοινωνία</a>
            <a href="#faq">FAQ</a>
            <a href="#blog">Blog</a>
          </div>
        </div>
        <div className="footer__bottom">
          <span>{t.footer.legal}</span>
          <span>Αρκτικό πεύκο Φινλανδίας · Ελληνικές Προδιαγραφές Δόμησης</span>
        </div>
      </div>
    </footer>
  );
}

/* ============================================================
   Sticky calculator CTA
   ============================================================ */
function StickyCTA({ t, visible, onClick }) {
  return (
    <div className={"sticky-cta" + (visible ? " visible" : "")}>
      <span>{t.sticky.label}</span>
      <button onClick={onClick}>{t.sticky.btn} →</button>
    </div>
  );
}

Object.assign(window, { Nav, Footer, StickyCTA, Placeholder, PWOOD_IMAGES });