// PROJECTS gallery page with modal detail
const { useState: useStateP } = React;

const PROJECTS_DATA = [
  { cat: "Kitchen",     en: { ttl: "Modern Open-Plan Kitchen", loc: "Westlake, TX",     scope: "Walls removed, custom cabinetry, quartz waterfall island, panel-ready Sub-Zero",  timeline: "10 weeks", completed: "Mar 2026" }, es: { ttl: "Cocina Moderna Abierta", loc: "Westlake, TX",       scope: "Muros removidos, gabinetes a medida, isla de cuarzo, Sub-Zero panelado",  timeline: "10 semanas", completed: "Mar 2026" }, img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1556909073-f3e5c8b7af0b?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1556909190-eccf4a8bf97a?w=600&q=80&auto=format&fit=crop" },
  { cat: "Bathroom",    en: { ttl: "Spa Master Bath",          loc: "Lakeway, TX",      scope: "Curbless walk-in shower, heated floors, double vanity, soaker tub",          timeline: "7 weeks",  completed: "Feb 2026" }, es: { ttl: "Baño Principal Tipo Spa", loc: "Lakeway, TX",          scope: "Regadera sin escalón, pisos calefactados, doble lavabo, tina",                  timeline: "7 semanas",  completed: "Feb 2026" }, img: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1620626011761-996317b8d101?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=600&q=80&auto=format&fit=crop" },
  { cat: "Whole-Home",  en: { ttl: "Hill Country Renovation",  loc: "Dripping Springs", scope: "Whole-home gut: kitchen, 3 baths, MEP, refinished oak throughout",        timeline: "9 months", completed: "Jan 2026" }, es: { ttl: "Renovación Hill Country", loc: "Dripping Springs",     scope: "Renovación total: cocina, 3 baños, MEP, roble refinado",                        timeline: "9 meses",   completed: "Ene 2026" }, img: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=600&q=80&auto=format&fit=crop" },
  { cat: "Kitchen",     en: { ttl: "Chef's Kitchen",            loc: "Round Rock, TX",   scope: "48\" range, walk-in pantry, double island, scullery",                       timeline: "12 weeks", completed: "Dec 2025" }, es: { ttl: "Cocina de Chef",          loc: "Round Rock, TX",       scope: "Estufa 48\", despensa, doble isla, scullery",                                   timeline: "12 semanas", completed: "Dic 2025" }, img: "https://images.unsplash.com/photo-1556909190-eccf4a8bf97a?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1565538810643-b5bdb714032a?w=600&q=80&auto=format&fit=crop" },
  { cat: "Bathroom",    en: { ttl: "Powder Bath Refresh",       loc: "Bee Cave, TX",     scope: "Floating vanity, hand-troweled venetian plaster, brass fixtures",            timeline: "3 weeks",  completed: "Nov 2025" }, es: { ttl: "Renovación de Medio Baño",loc: "Bee Cave, TX",         scope: "Lavabo flotante, plaster veneciano, herrería de bronce",                        timeline: "3 semanas", completed: "Nov 2025" }, img: "https://images.unsplash.com/photo-1620626011761-996317b8d101?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80&auto=format&fit=crop" },
  { cat: "Carpentry",   en: { ttl: "Custom Library Built-In",   loc: "Pflugerville, TX", scope: "20-foot floor-to-ceiling library, integrated rolling ladder",               timeline: "5 weeks",  completed: "Oct 2025" }, es: { ttl: "Biblioteca a Medida",     loc: "Pflugerville, TX",     scope: "Biblioteca de 6m del piso al techo, escalera rodante",                          timeline: "5 semanas", completed: "Oct 2025" }, img: "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?w=600&q=80&auto=format&fit=crop" },
  { cat: "Whole-Home",  en: { ttl: "1990s Ranch Reimagined",    loc: "Cedar Park, TX",   scope: "Vaulted ceilings, open kitchen/living, primary suite addition",            timeline: "7 months", completed: "Sep 2025" }, es: { ttl: "Casa de los 90 Reimaginada", loc: "Cedar Park, TX",   scope: "Techos abovedados, cocina/sala abierta, suite principal nueva",               timeline: "7 meses",  completed: "Sep 2025" }, img: "https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=600&q=80&auto=format&fit=crop" },
  { cat: "Kitchen",     en: { ttl: "Galley Kitchen Refresh",    loc: "Austin, TX",       scope: "Full refresh in 6 weeks, painted cabinets, new range and counters",        timeline: "6 weeks",  completed: "Aug 2025" }, es: { ttl: "Renovación de Cocina Pasillo", loc: "Austin, TX",     scope: "Renovación total en 6 semanas, gabinetes pintados, nueva estufa y encimera", timeline: "6 semanas", completed: "Ago 2025" }, img: "https://images.unsplash.com/photo-1565538810643-b5bdb714032a?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1556909073-f3e5c8b7af0b?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=600&q=80&auto=format&fit=crop" },
  { cat: "Commercial",  en: { ttl: "Boutique Coffee Buildout",  loc: "South Austin",     scope: "Tenant improvement: bar, plumbing, ventilation, ADA",                       timeline: "11 weeks", completed: "Jul 2025" }, es: { ttl: "Buildout de Café Boutique",   loc: "Sur de Austin",       scope: "Mejora para inquilino: barra, plomería, ventilación, ADA",                     timeline: "11 semanas",completed: "Jul 2025" }, img: "https://images.unsplash.com/photo-1497366216548-37526070297c?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1486325212027-8081e485255e?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=600&q=80&auto=format&fit=crop" },
  { cat: "Bathroom",    en: { ttl: "Guest Bath Upgrade",         loc: "Buda, TX",         scope: "Tile-to-ceiling shower, custom niche, brass faucets",                       timeline: "5 weeks",  completed: "Jun 2025" }, es: { ttl: "Renovación de Baño de Visitas",loc: "Buda, TX",          scope: "Azulejo al techo, nicho a medida, grifería de bronce",                          timeline: "5 semanas", completed: "Jun 2025" }, img: "https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1620626011761-996317b8d101?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80&auto=format&fit=crop" },
  { cat: "Carpentry",   en: { ttl: "Mudroom Locker System",      loc: "Kyle, TX",         scope: "10-locker mudroom with bench, hooks, and pet station",                      timeline: "4 weeks",  completed: "May 2025" }, es: { ttl: "Sistema de Lockers Mudroom",  loc: "Kyle, TX",            scope: "Mudroom con 10 lockers, banca y estación para mascotas",                       timeline: "4 semanas", completed: "May 2025" }, img: "https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=600&q=80&auto=format&fit=crop" },
  { cat: "Kitchen",     en: { ttl: "Modern Farmhouse Kitchen",   loc: "Dripping Springs", scope: "Beam ceiling, butler's pantry, soapstone counters",                         timeline: "13 weeks", completed: "Apr 2025" }, es: { ttl: "Cocina Farmhouse Moderna",    loc: "Dripping Springs",    scope: "Techo con vigas, butler's pantry, encimeras de soapstone",                     timeline: "13 semanas",completed: "Abr 2025" }, img: "https://images.unsplash.com/photo-1556909073-f3e5c8b7af0b?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1556909190-eccf4a8bf97a?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=600&q=80&auto=format&fit=crop" },
  { cat: "Whole-Home",  en: { ttl: "Westlake Estate Renovation", loc: "Westlake, TX",     scope: "5-bed estate: kitchen, 4 baths, primary suite, exterior",                  timeline: "11 months",completed: "Mar 2025" }, es: { ttl: "Renovación Estate en Westlake",loc: "Westlake, TX",      scope: "Casa de 5 rec: cocina, 4 baños, suite principal, exterior",                    timeline: "11 meses",  completed: "Mar 2025" }, img: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=600&q=80&auto=format&fit=crop" },
  { cat: "Bathroom",    en: { ttl: "Wet Room Conversion",         loc: "Lakeway, TX",      scope: "Combined tub + shower wet room, body jets, smart glass",                    timeline: "6 weeks",  completed: "Feb 2025" }, es: { ttl: "Conversión a Wet Room",       loc: "Lakeway, TX",         scope: "Tina + regadera en wet room, jets de cuerpo, vidrio inteligente",              timeline: "6 semanas", completed: "Feb 2025" }, img: "https://images.unsplash.com/photo-1564540583246-934409427776?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1620626011761-996317b8d101?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80&auto=format&fit=crop" },
  { cat: "Commercial",  en: { ttl: "Dental Office Buildout",      loc: "North Austin",     scope: "4-op dental clinic, lead-lined imaging, ADA reception",                     timeline: "14 weeks", completed: "Jan 2025" }, es: { ttl: "Buildout de Clínica Dental",  loc: "Norte de Austin",     scope: "Clínica dental de 4 operatorios, sala de imagen, recepción ADA",                timeline: "14 semanas",completed: "Ene 2025" }, img: "https://images.unsplash.com/photo-1486325212027-8081e485255e?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&q=80&auto=format&fit=crop" },
  { cat: "Carpentry",   en: { ttl: "Wine Cellar & Tasting Bar",   loc: "Bee Cave, TX",     scope: "Walnut wine wall (240 bottles) and integrated bar with sink",               timeline: "8 weeks",  completed: "Dec 2024" }, es: { ttl: "Cava y Cantina",              loc: "Bee Cave, TX",        scope: "Pared de cava en nogal (240 botellas) y cantina con tarja",                     timeline: "8 semanas", completed: "Dic 2024" }, img: "https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=600&q=80&auto=format&fit=crop" },
  { cat: "Kitchen",     en: { ttl: "Compact Condo Kitchen",       loc: "Downtown Austin",  scope: "8x12 condo kitchen with full appliance package, tile to ceiling",          timeline: "5 weeks",  completed: "Nov 2024" }, es: { ttl: "Cocina de Condominio",        loc: "Centro de Austin",    scope: "Cocina de 2.4x3.6m, paquete completo de electrodomésticos, azulejo al techo",   timeline: "5 semanas", completed: "Nov 2024" }, img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1556909073-f3e5c8b7af0b?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1565538810643-b5bdb714032a?w=600&q=80&auto=format&fit=crop" },
  { cat: "Whole-Home",  en: { ttl: "Mid-Century Restoration",     loc: "Cedar Park, TX",   scope: "Period-correct restoration with modern systems and finishes",               timeline: "8 months", completed: "Oct 2024" }, es: { ttl: "Restauración Mid-Century",    loc: "Cedar Park, TX",      scope: "Restauración de época con sistemas y acabados modernos",                       timeline: "8 meses",   completed: "Oct 2024" }, img: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=900&q=80&auto=format&fit=crop", before: "https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?w=600&q=80&auto=format&fit=crop", after: "https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=600&q=80&auto=format&fit=crop" },
];

const FILTER_MAP = {
  "All":         null,        "Todos":        null,
  "Kitchen":     "Kitchen",   "Cocina":       "Kitchen",
  "Bathroom":    "Bathroom",  "Baño":         "Bathroom",
  "Whole-Home":  "Whole-Home","Casa Completa":"Whole-Home",
  "Carpentry":   "Carpentry", "Carpintería":  "Carpentry",
  "Commercial":  "Commercial","Comercial":    "Commercial",
};

function ProjectsApp() {
  const [lang, setLang] = useLang();
  const t = mergeT(lang);
  const pp = t.projects_page;
  const [filter, setFilter] = useStateP(pp.filters[0]);
  const [open, setOpen] = useStateP(null);

  const targetCat = FILTER_MAP[filter];
  const filtered = targetCat ? PROJECTS_DATA.filter(p => p.cat === targetCat) : PROJECTS_DATA;

  return (
    <>
      <Header lang={lang} setLang={setLang} t={t} active="projects" />
      <PageHero
        crumbs={[{ label: pp.crumb }]}
        eyebrow={pp.eyebrow}
        titlePre={pp.title_pre}
        titleAccent={pp.title_accent}
        lead={pp.lead}
      />
      <section className="section">
        <div className="container">
          <div className="portfolio-filters">
            {pp.filters.map((f, i) => (
              <button
                key={i}
                className={"portfolio-filter" + (filter === f ? " active" : "")}
                onClick={() => setFilter(f)}
              >
                {f}
              </button>
            ))}
          </div>
          <div className="portfolio-grid">
            {filtered.map((p, i) => {
              const txt = p[lang];
              return (
                <div className="portfolio-card" key={i} onClick={() => setOpen(p)}>
                  <img src={p.img} alt={txt.ttl} />
                  <div className="ovl">
                    <div>
                      <div className="tag">{p.cat}</div>
                      <div className="ttl">{txt.ttl}</div>
                      <div className="loc">{txt.loc}</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {open && (
        <ProjectModal
          p={open}
          t={t}
          lang={lang}
          onClose={() => setOpen(null)}
        />
      )}

      <CTABanner t={t} />
      <FooterMP lang={lang} t={t} />
    </>
  );
}

const ProjectModal = ({ p, t, lang, onClose }) => {
  const txt = p[lang];
  const m = t.projects_page.modal;
  React.useEffect(() => {
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
  }, []);
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">
          <Icon.Close size={20} />
        </button>
        <div className="modal-hero">
          <img src={p.img} alt={txt.ttl} />
        </div>
        <div className="modal-body">
          <div className="tag">{p.cat}</div>
          <h2>{txt.ttl}</h2>
          <div className="meta">
            <div>
              <div className="lbl">{m.location_lbl}</div>
              <div className="val">{txt.loc}</div>
            </div>
            <div>
              <div className="lbl">{m.timeline_lbl}</div>
              <div className="val">{txt.timeline}</div>
            </div>
            <div>
              <div className="lbl">{m.completed_lbl}</div>
              <div className="val">{txt.completed}</div>
            </div>
          </div>
          <div>
            <div className="lbl" style={{ fontSize: 11, fontWeight: 800, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--green)", marginBottom: 8 }}>{m.scope_lbl}</div>
            <p>{txt.scope}</p>
          </div>
          <div className="ba-grid">
            <figure>
              <img src={p.before} alt={`Before — ${txt.ttl}`} />
              <figcaption>{m.before}</figcaption>
            </figure>
            <figure>
              <img src={p.after} alt={`After — ${txt.ttl}`} />
              <figcaption>{m.after}</figcaption>
            </figure>
          </div>
          <a href="quote.html" className="btn btn-primary" style={{ marginTop: 28 }}>
            {m.cta} <Icon.ArrowRight size={16} />
          </a>
        </div>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("app")).render(<ProjectsApp />);
