/* global React, Ico, Ph, useState, useEffect, SERVICES, MATERIALS */
const LOGO_URL = "https://cdn.prod.website-files.com/69b7ff192b5cd736e0540b5a/69ba9a1d6c7190a4bb603315_79815b09b2b3daae213f8d6aacc0f708_logo.svg";

function Brand({ footer }) {
  const [ok, setOk] = useState(true);
  return (
    <a className={`brand ${footer ? "brand--footer" : ""}`} href="#top" aria-label="Kane's Cabinets and Countertops">
      {ok
        ? <img className="brand-img" src={LOGO_URL} alt="Kane's Cabinets and Countertops" onError={() => setOk(false)} />
        : (
          <>
            <span className="brand-mark">K</span>
            <span className="brand-txt">
              <span className="brand-name">Kane's</span>
              <span className="brand-sub">Cabinets · Countertops</span>
            </span>
          </>
        )}
    </a>
  );
}

const NAVLINKS = [["Services", "#services"], ["Materials", "#materials"], ["Work", "#work"], ["Process", "#process"], ["About", "#about"]];

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <>
      <header className={`nav ${scrolled ? "scrolled" : ""}`}>
        <div className="wrap nav-inner">
          <Brand />
          <nav className="nav-links">
            {NAVLINKS.map(([t, h]) => <a key={h} className="nav-link" href={h}>{t}</a>)}
          </nav>
          <div className="nav-right">
            <a className="nav-phone" href="tel:+13212887107"><Ico.phone />(321) 288-7107</a>
            <a className="btn btn-primary" href="#quote">Request a Quote</a>
            <button className="burger" aria-label="Menu" onClick={() => setOpen((o) => !o)}>
              <span style={open ? { transform: "translateY(7px) rotate(45deg)" } : {}} />
              <span style={open ? { opacity: 0 } : {}} />
              <span style={open ? { transform: "translateY(-7px) rotate(-45deg)" } : {}} />
            </button>
          </div>
        </div>
      </header>
      <div className={`mobile-menu ${open ? "open" : ""}`}>
        {NAVLINKS.map(([t, h]) => <a key={h} href={h} onClick={() => setOpen(false)}>{t}</a>)}
        <a className="btn btn-primary" href="#quote" onClick={() => setOpen(false)}>Request a Quote</a>
      </div>
    </>
  );
}

function Hero() {
  return (
    <section className="hero wrap" id="top">
      <div className="hero-grid">
        <div className="hero-copy">
          <span className="eyebrow reveal">Custom cabinetry &amp; stone · Est. 2009</span>
          <h1 className="display reveal" style={{ transitionDelay: ".05s" }}>
            Custom cabinets &amp; stone,<br />done <span className="serif-em">right</span>.
          </h1>
          <p className="lead reveal" style={{ transitionDelay: ".12s" }}>
            Kane's designs, fabricates, and installs custom cabinets and countertops under one roof —
            so the cabinets fit your walls and the stone fits your cabinets, every time.
          </p>
          <div className="hero-cta reveal" style={{ transitionDelay: ".18s" }}>
            <a className="btn btn-primary btn-lg" href="#quote">Request a free quote <Ico.arrow className="arr" /></a>
            <a className="btn btn-ghost btn-lg" href="#work">See our work</a>
          </div>
          <div className="hero-stats reveal" style={{ transitionDelay: ".24s" }}>
            <div className="stat"><div className="n">15<span>+</span></div><div className="l">Years in the shop</div></div>
            <div className="stat"><div className="n">100<span>+</span></div><div className="l">Rooms finished</div></div>
            <div className="stat"><div className="n">100<span>%</span></div><div className="l">In-house fabrication</div></div>
          </div>
        </div>
        <div className="hero-figure reveal" style={{ transitionDelay: ".1s" }}>
          <Ph className="hero-img" src="images/projects/kitchen-coastal-grey.jpg" label="Hero — finished custom kitchen" />
          <div className="hero-badge">
            <div className="num">5</div>
            <div className="lbl">★ rated across local reviews</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Services() {
  return (
    <section className="section services" id="services">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="eyebrow">What we do</span>
            <h2 className="h2" style={{ marginTop: 18 }}>Three crafts, one workshop.</h2>
          </div>
          <p className="lead">From a single countertop to a kitchen taken down to the studs — handled by the same people, start to finish.</p>
        </div>
        <div className="svc-grid">
          {SERVICES.map((s, i) => (
            <article key={s.n} className="svc-card reveal" style={{ transitionDelay: `${i * 0.08}s` }}>
              <Ph src={s.src} label={s.t} />
              <div className="svc-body">
                <span className="svc-num">{s.n} / Service</span>
                <h3 className="h3">{s.t}</h3>
                <p>{s.d}</p>
                <ul className="svc-list">{s.list.map((l) => <li key={l}>{l}</li>)}</ul>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Materials() {
  const [active, setActive] = useState(0);
  const m = MATERIALS[active];
  return (
    <section className="section" id="materials">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="eyebrow">Countertop materials</span>
            <h2 className="h2" style={{ marginTop: 18 }}>Pick a surface,<br />feel the difference.</h2>
          </div>
          <p className="lead">We stock and fabricate every major surface. Tap through to compare durability, upkeep, and what each does best.</p>
        </div>
        <div className="mat-grid">
          <div className="mat-tabs reveal">
            {MATERIALS.map((mat, i) => (
              <button key={mat.name} className={`mat-tab ${i === active ? "active" : ""}`} onClick={() => setActive(i)}>
                <span className="swatch" style={{ background: mat.swatch }} />
                <span className="mt-name">{mat.name}</span>
                <span className="mt-idx">0{i + 1}</span>
              </button>
            ))}
          </div>
          <div className="mat-panel reveal" key={active}>
            <Ph src={m.src} label={m.img} />
            <div className="mat-panel-body">
              <h3 className="h3">{m.name}</h3>
              <p className="lead" style={{ fontSize: 16 }}>{m.d}</p>
              <div className="mat-meta">
                {m.meta.map(([k, v]) => <div key={k}><div className="k">{k}</div><div className="v">{v}</div></div>)}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Brand, Nav, Hero, Services, Materials });