// app.jsx — Complete Access Solutions home page
// Industrial security-tech aesthetic. Dark default, monospace technical accents.

const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": true,
  "accent": "#FF5C28",
  "heroVariant": "engineered"
} /*EDITMODE-END*/;

const ACCENTS = ["#FF5C28", "#C5F12E", "#4DC9FF", "#FFB020"];
const HERO_VARIANTS = ["cinematic", "split", "engineered"];

// ── data ─────────────────────────────────────────────────────────────

const SERVICES = [
{
  num: "01",
  title: "Access Control",
  code: "AC-100",
  desc: "Modern keyless access systems with full audit trail. Eliminate lost keys, simplify management, integrate with existing infrastructure.",
  specs: [
  ["Platform", "Brivo / Napco"],
  ["Credential", "Mobile · Card · Biometric"],
  ["Capacity", "1 — 10,000 doors"]]

},
{
  num: "02",
  title: "Doors & Frames",
  code: "DF-200",
  desc: "Hollow metal, wood, and fiberglass openings engineered for fire rating, sound attenuation, and lifetime durability.",
  specs: [
  ["Materials", "HM · Wood · FRP"],
  ["Fire rating", "20 — 180 min"],
  ["Lead time", "2 — 6 weeks"]]

},
{
  num: "03",
  title: "Door Hardware",
  code: "DH-300",
  desc: "Specification-grade locksets, exit devices, closers, and trim. Compliant with ANSI/BHMA, ADA, and life-safety codes.",
  specs: [
  ["Grade", "ANSI Grade 1"],
  ["Compliance", "ADA · NFPA 80"],
  ["Finish", "32D · 26D · 10B"]]

}];


const CASES = [
{
  id: "PRJ-2407",
  tag: "K-12 / DISTRICT",
  title: "Santa Ana Unified School District",
  loc: "Santa Ana, CA",
  pattern: "door",
  photo: "assets/projects/santa-ana.jpg",
  logo: "assets/logos/santa-ana.png",
  specs: [["Doors", "412"], ["Buildings", "28"], ["Phase", "Complete"]]
},
{
  id: "PRJ-2391",
  tag: "K-12 / HIGH SCHOOL",
  title: "Anaheim Union High School District",
  loc: "Anaheim, CA",
  pattern: "corridor",
  photo: "assets/projects/anaheim.jpg",
  logo: "assets/logos/anaheim.png",
  specs: [["Doors", "286"], ["Buildings", "14"], ["Phase", "Phase 2"]]
},
{
  id: "PRJ-2378",
  tag: "K-12 / DISTRICT",
  title: "Newport-Mesa Unified School District",
  loc: "Costa Mesa, CA",
  pattern: "facade",
  photo: "assets/projects/newport.jpg",
  logo: "assets/logos/newport.png",
  specs: [["Doors", "538"], ["Buildings", "32"], ["Phase", "Complete"]]
},
{
  id: "PRJ-2360",
  tag: "MUNICIPAL",
  title: "Sweetwater Union High School District",
  loc: "Chula Vista, CA",
  pattern: "building",
  photo: "assets/projects/sweetwater.jpg",
  logo: "assets/logos/sweetwater.png",
  specs: [["Doors", "324"], ["Buildings", "19"], ["Phase", "In progress"]]
}];


const CLIENTS = [
["assets/logos/santa-ana.png", "Santa Ana USD", "Santa Ana, CA"],
["assets/logos/anaheim.png", "Anaheim Union HSD", "Anaheim, CA"],
["assets/logos/newport.png", "Newport-Mesa USD", "Costa Mesa, CA"],
["assets/logos/abc.png", "ABC Unified SD", "Cerritos, CA"],
["assets/logos/sweetwater.png", "Sweetwater Union HSD", "Chula Vista, CA"],
["assets/logos/oceanside.png", "Oceanside USD", "Oceanside, CA"]];


const PARTNERS = [
{ name: "NAPCO", tag: "Security & Alarm", logo: "assets/logos/napco.png", url: "https://napcosecurity.com/" },
{ name: "Brivo", tag: "Cloud Access Control", logo: "assets/logos/brivo.png", url: "https://www.brivo.com/" },
{ name: "DMP", tag: "Intrusion & Networked Access", logo: "assets/logos/dmp.png", url: "https://www.dmp.com/" }];


// ── reveal hook ──────────────────────────────────────────────────────

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) e.target.classList.add("in");});
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ── nav ──────────────────────────────────────────────────────────────

function Nav() {
  const [time, setTime] = useState(() => new Date());
  useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 30000);
    return () => clearInterval(t);
  }, []);
  const tStr = time.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false, timeZone: "America/Los_Angeles" });
  return (
    <nav className="nav">
      <a className="brand" href="#top">
        <span className="brand-mark"></span>
        <span className="brand-meta">
          <span>Complete Access Solutions</span>
          <small>EST. 2008 · CA C28 LIC. #1024891</small>
        </span>
      </a>
      <div className="nav-links">
        <a href="#services" className="active">Services</a>
        <a href="#projects">Projects</a>
        <a href="#about">About</a>
        <a href="#partners">Partners</a>
        <a href="#contact">Contact</a>
      </div>
      <div className="nav-meta">
        <div className="nav-status">
          <span className="dot"></span>
          <span>OPS · {tStr} PT</span>
        </div>
        <a href="#contact" className="btn btn-primary">Contact us <span className="arrow">→</span></a>
      </div>
    </nav>);

}

// ── hero variants ────────────────────────────────────────────────────

function HeroCinematic() {
  return (
    <section className="hero hero-cinematic" id="top">
      <div className="hero-bg"></div>
      <div className="hero-top">
        <div className="eyebrow">SR-001 · Field operations across Southern California</div>
        <div className="mono">[ LIVE FOOTAGE — 4K · 30fps ]</div>
      </div>
      <div className="hero-bottom">
        <div>
          <h1>Making buildings <em>safe.</em></h1>
          <p className="hero-sub">Access control, door &amp; frame engineering, and specification-grade hardware for general contractors, architects, and facility teams.</p>
          <div className="hero-cta-row">
            <a href="#projects" className="btn btn-primary">View projects <span className="arrow">→</span></a>
            <a href="#contact" className="btn">Request a quote</a>
          </div>
        </div>
        <div className="hero-meta-row">
          <div>Coverage<strong>Southern CA</strong></div>
          <div>Active sites<strong>34</strong></div>
          <div>Doors managed<strong>12,400+</strong></div>
        </div>
      </div>
    </section>);

}

function HeroSplit() {
  return (
    <section className="hero hero-split" id="top">
      <div className="hero-left">
        <div>
          <div className="eyebrow">SR-001 · Engineered Building Access</div>
          <h1>Engineered access for buildings that <em>can&apos;t fail.</em></h1>
          <p className="hero-sub">From district-wide K-12 retrofits to commercial new-builds — turnkey access control, doors, frames and hardware delivered as one specification.</p>
          <div className="hero-cta-row">
            <a href="#projects" className="btn btn-primary">View projects <span className="arrow">→</span></a>
            <a href="#contact" className="btn">Request a quote</a>
          </div>
        </div>
        <div className="hero-meta-row">
          <div>Founded<strong>2008</strong></div>
          <div>Active sites<strong>34</strong></div>
          <div>Doors managed<strong>12,400+</strong></div>
          <div>Districts served<strong>14</strong></div>
        </div>
      </div>
      <div className="hero-right"></div>
    </section>);

}

function HeroEngineered() {
  const words = ["safer", "smarter", "secure"];
  const [wi, setWi] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setWi((i) => (i + 1) % words.length), 2200);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="hero hero-engineered" id="top">
      <div className="hero-eng-photo" aria-hidden="true">
        <img src="assets/projects/svc-hardware.jpg" alt="" loading="eager" />
      </div>
      <div className="hero-eng-grid">
        <div className="hero-eng-top">
          <div>
            <div className="mono mono-sm">▸ Coverage</div>
            <div className="stat-num">Southern Califonia</div>
          </div>
          <div>
            <div className="mono mono-sm">▸ Doors managed</div>
            <div className="stat-num">12,400<em>+</em></div>
          </div>
          <div>
            <div className="mono mono-sm">▸ Active sites</div>
            <div className="stat-num">34</div>
          </div>
          <div>
            <div className="mono mono-sm">▸ Years operating</div>
            <div className="stat-num">17</div>
          </div>
        </div>
        <div className="hero-eng-mid">
          <h1>
            Making<br />
            buildings<br />
            <span className="word-cycle" key={wi}>
              <span className="lined">{words[wi]}.</span>
            </span>
          </h1>
          <div className="hero-cta-row hero-eng-cta">
            <a href="#projects" className="btn btn-primary">View projects <span className="arrow">→</span></a>
            <a href="#contact" className="btn">Contact us</a>
          </div>
        </div>
        <div className="hero-eng-bottom">
          <div className="ticker">
            <span>BRIVO CERTIFIED</span>
            <span>NAPCO PARTNER</span>
            <span>DMP DEALER</span>
            <span>ANSI BHMA SPEC</span>
            <span>NFPA 80 COMPLIANT</span>
          </div>
          <div className="mono mono-sm">{new Date().toISOString().slice(0, 10)} · OPS</div>
        </div>
      </div>
    </section>);

}

function Hero({ variant }) {
  if (variant === "cinematic") return <HeroCinematic />;
  if (variant === "split") return <HeroSplit />;
  return <HeroEngineered />;
}

// ── services ─────────────────────────────────────────────────────────

function ServiceIcon({ kind }) {
  // Simple geometric SVGs — no slop
  if (kind === "01") return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.25">
      <rect x="4" y="4" width="24" height="24" />
      <rect x="11" y="11" width="10" height="10" />
      <circle cx="16" cy="16" r="2" />
    </svg>);

  if (kind === "02") return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.25">
      <rect x="6" y="3" width="20" height="26" />
      <rect x="9" y="6" width="14" height="20" />
      <circle cx="20" cy="17" r="0.8" fill="currentColor" />
    </svg>);

  return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.25">
      <circle cx="16" cy="16" r="11" />
      <path d="M16 7v9l6 4" />
      <circle cx="16" cy="16" r="1.4" fill="currentColor" />
    </svg>);

}

function Services() {
  return (
    <section className="section" id="services">
      <div className="container">
        <div className="section-head reveal">
          <div className="label-col">
            <div className="mono">[ 01 ] Capabilities</div>
            <div className="mono">CAS / SVC-CATALOG</div>
          </div>
          <h2>One company.<br />Three disciplines.<br />Every opening.</h2>
        </div>
        <div className="services-grid reveal">
          {SERVICES.map((s) =>
          <article className="service-card" key={s.num}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <div className="service-num">{s.num} / {s.code}</div>
              </div>
              <div className="service-icon"><ServiceIcon kind={s.num} /></div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="service-specs">
                {s.specs.map(([k, v]) =>
              <div className="service-spec" key={k}>
                    <span>{k}</span><span>{v}</span>
                  </div>
              )}
              </div>
              <a href="#contact" className="service-link">Capability sheet <span className="arrow">→</span></a>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ── case study art ───────────────────────────────────────────────────

function CaseArt({ pattern }) {
  // Atmospheric architectural renders. Not photos — drop real install photos
  // into assets/projects/*.jpg to replace.
  const Vignette = ({ id }) =>
  <radialGradient id={id} cx="0.5" cy="0.55" r="0.75">
      <stop offset="0.55" stopColor="#000" stopOpacity="0" />
      <stop offset="1" stopColor="#000" stopOpacity="0.55" />
    </radialGradient>;

  const Grain = ({ id }) =>
  <filter id={id}>
      <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch" />
      <feColorMatrix values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.08 0" />
      <feComposite in2="SourceGraphic" operator="in" />
    </filter>;


  if (pattern === "door") {
    // Modern glass entry vestibule, lit interior glow
    return (
      <svg className="case-art" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="d-sky" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#1A2030" /><stop offset="1" stopColor="#0B0E14" />
          </linearGradient>
          <linearGradient id="d-floor" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#1A1E26" /><stop offset="1" stopColor="#080A0E" />
          </linearGradient>
          <linearGradient id="d-glow" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#FFB070" stopOpacity="0.35" />
            <stop offset="1" stopColor="#FFB070" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="d-glass" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#3D4858" stopOpacity="0.6" />
            <stop offset="0.5" stopColor="#FFC890" stopOpacity="0.18" />
            <stop offset="1" stopColor="#252B36" stopOpacity="0.7" />
          </linearGradient>
          <Vignette id="d-vg" /><Grain id="d-gr" />
        </defs>
        <rect width="800" height="500" fill="url(#d-sky)" />
        <rect y="320" width="800" height="180" fill="url(#d-floor)" />
        {/* warm interior glow */}
        <ellipse cx="400" cy="320" rx="320" ry="120" fill="url(#d-glow)" />
        {/* building wall */}
        <rect x="0" y="40" width="800" height="320" fill="#15191F" />
        <rect x="0" y="40" width="800" height="320" fill="url(#d-vg)" />
        {/* mullion grid sides */}
        <g stroke="#1F242C" strokeWidth="1.5" fill="none">
          {[60, 140, 220, 580, 660, 740].map((x) => <line key={x} x1={x} y1="60" x2={x} y2="360" />)}
          <line x1="0" y1="120" x2="800" y2="120" />
          <line x1="0" y1="220" x2="800" y2="220" />
        </g>
        {/* glass panes flanking */}
        <rect x="20" y="60" width="200" height="300" fill="url(#d-glass)" opacity="0.7" />
        <rect x="580" y="60" width="200" height="300" fill="url(#d-glass)" opacity="0.7" />
        {/* entry vestibule frame */}
        <rect x="245" y="40" width="310" height="320" fill="#0E1116" />
        <rect x="252" y="48" width="296" height="306" fill="#1B2028" />
        {/* automatic sliding doors */}
        <rect x="262" y="58" width="138" height="288" fill="url(#d-glass)" />
        <rect x="400" y="58" width="138" height="288" fill="url(#d-glass)" />
        <line x1="400" y1="58" x2="400" y2="346" stroke="#0A0C10" strokeWidth="2" />
        {/* interior figure / lit space hint */}
        <ellipse cx="330" cy="280" rx="40" ry="80" fill="#FFD8B0" opacity="0.18" />
        <ellipse cx="470" cy="280" rx="40" ry="80" fill="#FFD8B0" opacity="0.18" />
        {/* card reader on right column */}
        <rect x="557" y="180" width="14" height="44" fill="#0A0C10" />
        <rect x="559" y="184" width="10" height="22" fill="var(--accent)" />
        <circle cx="564" cy="218" r="1.4" fill="#5FE8A0" />
        {/* canopy */}
        <rect x="220" y="36" width="360" height="14" fill="#0A0C10" />
        <rect x="220" y="36" width="360" height="3" fill="#FFB070" opacity="0.4" />
        {/* floor reflection */}
        <rect x="245" y="360" width="310" height="60" fill="#FFB070" opacity="0.06" />
        <rect x="262" y="360" width="138" height="40" fill="#FFD8B0" opacity="0.08" />
        <rect x="400" y="360" width="138" height="40" fill="#FFD8B0" opacity="0.08" />
        {/* paving lines */}
        <g stroke="#22272F" strokeWidth="1" opacity="0.6">
          {[380, 420, 460, 500].map((y) => <line key={y} x1="0" y1={y} x2="800" y2={y} />)}
        </g>
        <rect width="800" height="500" fill="url(#d-vg)" />
        <rect width="800" height="500" filter="url(#d-gr)" opacity="0.5" />
      </svg>);

  }

  if (pattern === "corridor") {
    // Perspective school corridor with overhead lights
    const doors = [];
    for (let i = 0; i < 5; i++) {
      const t = i / 5;
      const persp = 1 - t * 0.7;
      const dx = 80 + t * 240;
      const dh = 280 * persp;
      const dy = 250 - dh / 2;
      doors.push(
        <g key={`L${i}`}>
          <rect x={dx} y={dy} width={50 * persp} height={dh} fill="#1B2028" />
          <rect x={dx + 4 * persp} y={dy + 8 * persp} width={42 * persp} height={dh - 16 * persp} fill="#252B36" />
          <rect x={dx + 40 * persp} y={dy + dh * 0.45} width={4 * persp} height={6 * persp} fill="var(--accent)" opacity="0.9" />
        </g>
      );
      const rx = 720 - t * 240;
      doors.push(
        <g key={`R${i}`}>
          <rect x={rx - 50 * persp} y={dy} width={50 * persp} height={dh} fill="#1B2028" />
          <rect x={rx - 46 * persp} y={dy + 8 * persp} width={42 * persp} height={dh - 16 * persp} fill="#252B36" />
          <rect x={rx - 46 * persp} y={dy + dh * 0.45} width={4 * persp} height={6 * persp} fill="var(--accent)" opacity="0.9" />
        </g>
      );
    }
    return (
      <svg className="case-art" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="c-floor" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#1A1F26" /><stop offset="1" stopColor="#0A0D11" />
          </linearGradient>
          <linearGradient id="c-ceiling" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#0A0D11" /><stop offset="1" stopColor="#1A1F26" />
          </linearGradient>
          <linearGradient id="c-wall-l" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="#0E1217" /><stop offset="1" stopColor="#1F252E" />
          </linearGradient>
          <linearGradient id="c-wall-r" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="#1F252E" /><stop offset="1" stopColor="#0E1217" />
          </linearGradient>
          <radialGradient id="c-glow" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0" stopColor="#FFE0B8" stopOpacity="0.5" />
            <stop offset="1" stopColor="#FFE0B8" stopOpacity="0" />
          </radialGradient>
          <Vignette id="c-vg" /><Grain id="c-gr" />
        </defs>
        {/* perspective polygon walls */}
        <polygon points="0,0 800,0 540,180 260,180" fill="url(#c-ceiling)" />
        <polygon points="0,500 800,500 540,320 260,320" fill="url(#c-floor)" />
        <polygon points="0,0 260,180 260,320 0,500" fill="url(#c-wall-l)" />
        <polygon points="800,0 540,180 540,320 800,500" fill="url(#c-wall-r)" />
        {/* end wall */}
        <rect x="260" y="180" width="280" height="140" fill="#1A1F27" />
        {/* far doorway with light beyond */}
        <rect x="370" y="200" width="60" height="120" fill="#2A3038" />
        <rect x="378" y="208" width="44" height="104" fill="#FFE4BC" opacity="0.55" />
        {/* ceiling light strips */}
        {[0, 1, 2, 3].map((i) => {
          const t = i / 4;
          const y = 30 + t * 130;
          const w = 220 - t * 160;
          return <g key={i}>
            <rect x={400 - w / 2} y={y} width={w} height="3" fill="#FFE4BC" opacity={0.9 - t * 0.3} />
            <ellipse cx="400" cy={y + 10} rx={w / 2 + 60} ry="18" fill="url(#c-glow)" opacity={0.6 - t * 0.2} />
          </g>;
        })}
        {/* floor reflection of end light */}
        <ellipse cx="400" cy="380" rx="180" ry="14" fill="#FFE4BC" opacity="0.18" />
        <ellipse cx="400" cy="420" rx="240" ry="10" fill="#FFE4BC" opacity="0.08" />
        {/* floor seam */}
        <line x1="400" y1="320" x2="400" y2="500" stroke="#222831" strokeWidth="1" opacity="0.6" />
        {/* doors */}
        {doors}
        <rect width="800" height="500" fill="url(#c-vg)" />
        <rect width="800" height="500" filter="url(#c-gr)" opacity="0.5" />
      </svg>);

  }

  if (pattern === "facade") {
    // Modern school facade at dusk with lit windows
    const wins = [];
    const cols = 14,rows = 6;
    const wW = 38,wH = 28,gx = 50,gy = 40;
    const startX = 80,startY = 160;
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        const x = startX + c * gx;
        const y = startY + r * gy;
        const lit = (c * 7 + r * 13) % 11 < 4;
        const warm = (c + r) % 3 === 0;
        wins.push(
          <g key={`${r}-${c}`}>
            <rect x={x} y={y} width={wW} height={wH} fill="#0F1318" />
            <rect x={x + 1} y={y + 1} width={wW - 2} height={wH - 2}
            fill={lit ? warm ? "#FFD9A8" : "#FFC890" : "#1B212A"}
            opacity={lit ? 0.85 : 1} />
            {lit && <rect x={x + 1} y={y + wH * 0.45} width={wW - 2} height={wH * 0.55} fill="#000" opacity="0.18" />}
            <line x1={x + wW / 2} y1={y} x2={x + wW / 2} y2={y + wH} stroke="#0A0C10" strokeWidth="0.5" />
          </g>
        );
      }
    }
    return (
      <svg className="case-art" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="f-sky" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#1F2A3A" /><stop offset="0.6" stopColor="#2A2030" /><stop offset="1" stopColor="#1A1218" />
          </linearGradient>
          <linearGradient id="f-build" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#181D24" /><stop offset="1" stopColor="#0C0F14" />
          </linearGradient>
          <radialGradient id="f-sun" cx="0.78" cy="0.32" r="0.35">
            <stop offset="0" stopColor="#FFB070" stopOpacity="0.45" />
            <stop offset="1" stopColor="#FFB070" stopOpacity="0" />
          </radialGradient>
          <Vignette id="f-vg" /><Grain id="f-gr" />
        </defs>
        <rect width="800" height="500" fill="url(#f-sky)" />
        <rect width="800" height="500" fill="url(#f-sun)" />
        {/* distant building silhouettes */}
        <rect x="0" y="280" width="120" height="120" fill="#0E121A" opacity="0.7" />
        <rect x="690" y="260" width="110" height="160" fill="#0E121A" opacity="0.7" />
        {/* main building */}
        <rect x="60" y="120" width="680" height="290" fill="url(#f-build)" />
        {/* horizontal banding */}
        <rect x="60" y="118" width="680" height="4" fill="#262C35" />
        <rect x="60" y="200" width="680" height="2" fill="#1F252E" />
        <rect x="60" y="240" width="680" height="2" fill="#1F252E" />
        <rect x="60" y="280" width="680" height="2" fill="#1F252E" />
        <rect x="60" y="320" width="680" height="2" fill="#1F252E" />
        <rect x="60" y="360" width="680" height="2" fill="#1F252E" />
        {/* signage band */}
        <rect x="60" y="120" width="680" height="36" fill="#0A0C10" />
        <rect x="320" y="132" width="160" height="12" fill="var(--accent)" opacity="0.7" />
        {/* windows */}
        {wins}
        {/* ground */}
        <rect y="410" width="800" height="90" fill="#0A0D12" />
        <rect y="408" width="800" height="3" fill="#FFB070" opacity="0.25" />
        {/* paving */}
        <g stroke="#1A1F27" strokeWidth="1" opacity="0.7">
          {[430, 450, 470, 490].map((y) => <line key={y} x1="0" y1={y} x2="800" y2={y} />)}
        </g>
        {/* foreground tree silhouettes */}
        <g fill="#06080B">
          <ellipse cx="80" cy="395" rx="60" ry="48" />
          <rect x="76" y="395" width="8" height="20" />
          <ellipse cx="720" cy="400" rx="50" ry="40" />
          <rect x="717" y="400" width="6" height="16" />
        </g>
        <rect width="800" height="500" fill="url(#f-vg)" />
        <rect width="800" height="500" filter="url(#f-gr)" opacity="0.5" />
      </svg>);

  }

  // building — campus exterior at dusk, varied heights
  const buildings = [
  { x: 0, w: 110, h: 220 }, { x: 110, w: 90, h: 280 }, { x: 200, w: 130, h: 200 },
  { x: 330, w: 80, h: 320 }, { x: 410, w: 110, h: 240 }, { x: 520, w: 100, h: 300 },
  { x: 620, w: 90, h: 220 }, { x: 710, w: 90, h: 260 }];

  const bWindows = [];
  buildings.forEach((b, bi) => {
    const cols = Math.floor(b.w / 18);
    const rows = Math.floor(b.h / 22);
    for (let r = 1; r < rows; r++) for (let c = 0; c < cols; c++) {
      const lit = (bi * 5 + r * 7 + c * 11) % 13 < 5;
      if (!lit) continue;
      const wx = b.x + 4 + c * 18;
      const wy = 500 - b.h + 8 + r * 22;
      const warm = (bi + r + c) % 4 === 0;
      bWindows.push(
        <rect key={`${bi}-${r}-${c}`} x={wx} y={wy} width="9" height="11"
        fill={warm ? "#FFD9A8" : "#FFC890"} opacity={0.6 + (c + r) % 3 * 0.12} />
      );
    }
  });
  return (
    <svg className="case-art" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="b-sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#1B2638" /><stop offset="0.55" stopColor="#2C2238" /><stop offset="1" stopColor="#3D2832" />
        </linearGradient>
        <linearGradient id="b-fade" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#0B0E14" stopOpacity="0" />
          <stop offset="1" stopColor="#0B0E14" stopOpacity="0.8" />
        </linearGradient>
        <Vignette id="b-vg" /><Grain id="b-gr" />
      </defs>
      <rect width="800" height="500" fill="url(#b-sky)" />
      {/* far skyline haze */}
      <rect y="280" width="800" height="80" fill="#1A2030" opacity="0.5" />
      {/* mid silhouette */}
      <g fill="#0F1320" opacity="0.85">
        <rect x="0" y="300" width="160" height="120" /><rect x="140" y="280" width="100" height="140" />
        <rect x="220" y="290" width="180" height="130" /><rect x="380" y="270" width="80" height="150" />
        <rect x="440" y="295" width="140" height="125" /><rect x="560" y="285" width="100" height="135" />
        <rect x="640" y="300" width="160" height="120" />
      </g>
      {/* primary buildings */}
      {buildings.map((b, i) =>
      <g key={i}>
          <rect x={b.x} y={500 - b.h} width={b.w} height={b.h} fill={i % 2 ? "#13171F" : "#181D26"} />
          <rect x={b.x} y={500 - b.h} width={b.w} height={3} fill="#262C35" />
          <rect x={b.x} y={500 - b.h} width={2} height={b.h} fill="#0A0C10" />
        </g>
      )}
      {bWindows}
      {/* foreground band */}
      <rect y="460" width="800" height="40" fill="#06080B" />
      <rect y="458" width="800" height="2" fill="#FFB070" opacity="0.3" />
      {/* street lights */}
      {[120, 360, 600].map((x) =>
      <g key={x}>
          <rect x={x - 1} y="430" width="2" height="50" fill="#1A1F27" />
          <circle cx={x} cy="430" r="6" fill="#FFE0B8" opacity="0.7" />
          <circle cx={x} cy="430" r="14" fill="#FFE0B8" opacity="0.18" />
        </g>
      )}
      <rect width="800" height="500" fill="url(#b-fade)" />
      <rect width="800" height="500" fill="url(#b-vg)" />
      <rect width="800" height="500" filter="url(#b-gr)" opacity="0.5" />
    </svg>);

}

// ── projects / case studies ──────────────────────────────────────────

function Projects() {
  return (
    <section className="section" id="projects">
      <div className="container">
        <div className="section-head reveal">
          <div className="label-col">
            <div className="mono">[ 02 ] Recent projects</div>
            <div className="mono">CAS / FIELD-LOG</div>
          </div>
          <h2>Specified, supplied,<br />installed.</h2>
        </div>
        <div className="cases reveal">
          {CASES.map((c) =>
          <article className="case-card" key={c.id}>
              <div className="case-image">
                {c.photo ? <img className="case-photo" src={c.photo} alt={c.title} loading="lazy" /> : <CaseArt pattern={c.pattern} />}
                <div className="case-tag">{c.tag}</div>
                <div className="case-id">{c.id}</div>
                <div className="case-logo"><img src={c.logo} alt={c.title} loading="lazy" /></div>
              </div>
              <div className="case-body">
                <div className="case-loc">{c.loc}</div>
                <h3>{c.title}</h3>
                <div className="case-specs">
                  {c.specs.map(([k, v]) =>
                <div className="case-spec-item" key={k}>
                      <span className="k">{k}</span>
                      <span className="v">{v}</span>
                    </div>
                )}
                </div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ── trust ────────────────────────────────────────────────────────────

function Trust() {
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="trust reveal">
          <div className="trust-copy">
            <div className="eyebrow" style={{ marginBottom: 24 }}>[ 03 ] About the firm</div>
            <h2>Local experts.<br />Institutional capability.</h2>
            <p>From our beginnings in access control and door solutions, Complete Access Solutions has steadily invested in the people, technology, and expertise needed to be a trusted partner for secure, efficient, and reliable building systems.</p>
            <p>Today, we&apos;re a leading provider of access control, doors, frames, and hardware — delivering dependable results and exceptional service across every project. Partnering with top manufacturers in the industry, we provide complete, turnkey solutions that enhance safety, performance, and peace of mind.</p>
            <div style={{ marginTop: 32 }}>
              <a href="#contact" className="btn">Capability statement <span className="arrow">→</span></a>
            </div>
          </div>
          <div className="trust-stats">
            <div className="trust-stat">
              <div className="num">17<em>yr</em></div>
              <div className="lbl">Operating</div>
            </div>
            <div className="trust-stat">
              <div className="num">12.4<em>k</em></div>
              <div className="lbl">Doors managed</div>
            </div>
            <div className="trust-stat">
              <div className="num">98<em>%</em></div>
              <div className="lbl">On-time delivery</div>
            </div>
            <div className="trust-stat">
              <div className="num">14</div>
              <div className="lbl">Districts served</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ── clients marquee ──────────────────────────────────────────────────

function Clients() {
  const items = [...CLIENTS, ...CLIENTS]; // duplicate for marquee
  return (
    <section className="clients" aria-label="Clients">
      <div className="clients-track">
        {items.map(([logo, name, loc], i) =>
        <div className="client-pill" key={i}>
            <div className="c-mark"><img src={logo} alt={name} loading="lazy" /></div>
            <div className="c-name">{name}</div>
            <div className="c-loc">{loc}</div>
          </div>
        )}
      </div>
    </section>);

}

// ── testimonial ──────────────────────────────────────────────────────

function Quote() {
  return (
    <section className="quote-section bg-art">
      <div className="quote-grid reveal">
        <div className="label-col">
          <div className="mono">[ 04 ] On record</div>
          <div className="mono">REF / TESTIMONIAL</div>
        </div>
        <div>
          <blockquote>
            <span className="q">&ldquo;</span>
            We have worked with Complete Access Solutions on many of our projects. They are easy to work with and have become our trusted partner.
          </blockquote>
          <div className="quote-attrib">
            <div className="avatar">AH</div>
            <div>
              <div className="who">Andrew Harrison</div>
              <div className="role">Project Engineer · General Contractor</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ── partners ─────────────────────────────────────────────────────────

function Partners() {
  return (
    <section className="section bg-art" id="partners">
      <div className="container">
        <div className="section-head reveal">
          <div className="label-col">
            <div className="mono">[ 05 ] Manufacturer partners</div>
            <div className="mono">CAS / PRTNR-INDEX</div>
          </div>
          <h2>Specified with the best in the industry.</h2>
        </div>
        <div className="partners-grid reveal">
          {PARTNERS.map((p) =>
          <a className="partner-card" key={p.name} href={p.url} target="_blank" rel="noopener noreferrer">
              <div className="p-logo"><img src={p.logo} alt={p.name} loading="lazy" /></div>
              <div className="p-tag">{p.tag}</div>
              <div className="p-go mono">VISIT <span aria-hidden="true">↗</span></div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

// ── contact form ─────────────────────────────────────────────────────

function ContactForm() {
  const [form, setForm] = useState({ first: "", last: "", email: "", company: "", projectType: "", doors: "", message: "" });
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const update = (k) => (e) => {
    setForm((f) => ({ ...f, [k]: e.target.value }));
    if (errors[k]) setErrors((er) => {const n = { ...er };delete n[k];return n;});
  };

  const validate = () => {
    const e = {};
    if (!form.first.trim()) e.first = "Required";
    if (!form.last.trim()) e.last = "Required";
    if (!form.email.trim()) e.email = "Required";else
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Invalid email";
    if (!form.company.trim()) e.company = "Required";
    if (!form.projectType) e.projectType = "Select an option";
    if (!form.message.trim()) e.message = "Required";else
    if (form.message.trim().length < 10) e.message = "10 chars min";
    return e;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length) return;
    setSubmitting(true);
    await new Promise((r) => setTimeout(r, 800));
    setSubmitting(false);
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="form-success">
        <div className="ok">▸ TRANSMISSION RECEIVED · TKT-{Math.floor(10000 + Math.random() * 89999)}</div>
        <h3>Thanks, {form.first}.</h3>
        <p>Your inquiry is in our queue. A specifier will respond within one business day with next steps and a project intake call.</p>
        <button className="btn" onClick={() => {setSubmitted(false);setForm({ first: "", last: "", email: "", company: "", projectType: "", doors: "", message: "" });}}>
          Submit another <span className="arrow">→</span>
        </button>
      </div>);

  }

  return (
    <form className="form" onSubmit={submit} noValidate>
      <div className="form-head">
        <h3>Project intake</h3>
        <div className="form-id">REQ-2025 · v1.2</div>
      </div>
      <div className="form-row-2">
        <div className={"field" + (errors.first ? " error" : "")}>
          <label>First name <span className="req">*</span></label>
          <input type="text" placeholder="Name" value={form.first} onChange={update("first")} />
          {errors.first && <div className="err">{errors.first}</div>}
        </div>
        <div className={"field" + (errors.last ? " error" : "")}>
          <label>Last name <span className="req">*</span></label>
          <input type="text" placeholder="Last name" value={form.last} onChange={update("last")} />
          {errors.last && <div className="err">{errors.last}</div>}
        </div>
      </div>
      <div className={"field" + (errors.email ? " error" : "")}>
        <label>Work email <span className="req">*</span></label>
        <input type="email" placeholder="email@company.com" value={form.email} onChange={update("email")} />
        {errors.email && <div className="err">{errors.email}</div>}
      </div>
      <div className={"field" + (errors.company ? " error" : "")}>
        <label>Company / firm <span className="req">*</span></label>
        <input type="text" placeholder="Company name" value={form.company} onChange={update("company")} />
        {errors.company && <div className="err">{errors.company}</div>}
      </div>
      <div className={"field" + (errors.projectType ? " error" : "")}>
        <label>Project type <span className="req">*</span></label>
        <select value={form.projectType} onChange={update("projectType")}>
          <option value="">Select…</option>
          <option>K-12 / school district</option>
          <option>Commercial new build</option>
          <option>Commercial retrofit</option>
          <option>Government / municipal</option>
          <option>Healthcare</option>
          <option>Other</option>
        </select>
        {errors.projectType && <div className="err">{errors.projectType}</div>}
      </div>
      <div className={"field" + (errors.message ? " error" : "")}>
        <label>
          <span>Project notes <span className="req">*</span></span>
          <span className="mono mono-sm" style={{ color: "var(--muted)" }}>{form.message.length} / 600</span>
        </label>
        <textarea rows="4" placeholder="Tell us about your project…" maxLength={600} value={form.message} onChange={update("message")} />
        {errors.message && <div className="err">{errors.message}</div>}
      </div>
      <div className="form-actions">
        <div className="form-note">▸ Encrypted · we respond within 1 business day</div>
        <button type="submit" className="form-submit" disabled={submitting}>
          {submitting ? "Transmitting…" : <>Submit <span className="arrow">→</span></>}
        </button>
      </div>
    </form>);

}

function Contact() {
  return (
    <section className="section bg-art" id="contact">
      <div className="container">
        <div className="contact reveal">
          <div className="contact-left">
            <div className="eyebrow" style={{ marginBottom: 24 }}>[ 06 ] Get in contact</div>
            <h2>Get in touch.</h2>
            <p>Have a question, an active project, or just need to reach our team? Send us a note and we'll get back to you.</p>
            <div className="contact-info">
              <div className="contact-info-row">
                <div className="k">Email</div>
                <div className="v"><a href="mailto:projects@casolutionsinc.net">projects@casolutionsinc.net</a></div>
              </div>
              <div className="contact-info-row">
                <div className="k">Phone</div>
                <div className="v"><a href="tel:+17145550100">(714) 555-0100</a></div>
              </div>
              <div className="contact-info-row">
                <div className="k">Hours</div>
                <div className="v">Mon–Fri · 07:00–17:00 PT</div>
              </div>
              <div className="contact-info-row">
                <div className="k">Service area</div>
                <div className="v">Southern California — Los Angeles, Orange, San Diego, Riverside, San Bernardino counties</div>
              </div>
              <div className="contact-info-row">
                <div className="k">License</div>
                <div className="v">CA C28 · #1024891 · Bonded &amp; insured</div>
              </div>
            </div>
          </div>
          <div>
            <ContactForm />
          </div>
        </div>
      </div>
    </section>);

}

// ── footer ───────────────────────────────────────────────────────────

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <a className="brand" href="#top">
            <span className="brand-mark"></span>
            <span className="brand-meta">
              <span>Complete Access Solutions</span>
              <small>EST. 2008 · CA C28 LIC. #1024891</small>
            </span>
          </a>
          <p>Turnkey access control, doors, frames and hardware for general contractors, architects, and commercial property teams across Southern California.</p>
        </div>
        <div className="footer-col">
          <h4>Capabilities</h4>
          <ul>
            <li><a href="#services">Access Control</a></li>
            <li><a href="#services">Doors &amp; Frames</a></li>
            <li><a href="#services">Door Hardware</a></li>
            <li><a href="#services">Specification</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Company</h4>
          <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#partners">Partners</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Contact</h4>
          <ul>
            <li><a href="mailto:projects@casolutionsinc.net">projects@casolutionsinc.net</a></li>
            <li><a href="tel:+17145550100">(714) 555-0100</a></li>
            <li>Mon–Fri · 07:00–17:00 PT</li>
            <li>Southern California</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2025 Complete Access Solutions Inc.</div>
        <div>CA C28 · #1024891 · BONDED &amp; INSURED</div>
        <div>v.2025.10 · DESIGN PROTOTYPE</div>
      </div>
    </footer>);

}

// ── tweaks ───────────────────────────────────────────────────────────

function Tweaks({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak("dark", v)} />
      <TweakColor label="Accent" value={t.accent} options={ACCENTS} onChange={(v) => setTweak("accent", v)} />
      <TweakSection label="Hero layout" />
      <TweakRadio label="Variant" value={t.heroVariant} options={HERO_VARIANTS} onChange={(v) => setTweak("heroVariant", v)} />
    </TweaksPanel>);

}

// ── app ──────────────────────────────────────────────────────────────

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  // Apply theme + accent at root
  useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", t.dark ? "dark" : "light");
    root.style.setProperty("--accent", t.accent);
    // Adjust accent-ink: light ink for dark accents, dark ink for light accents
    const c = t.accent.replace("#", "");
    const r = parseInt(c.slice(0, 2), 16),g = parseInt(c.slice(2, 4), 16),b = parseInt(c.slice(4, 6), 16);
    const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
    root.style.setProperty("--accent-ink", lum > 0.6 ? "#0A0B0D" : "#0A0B0D");
  }, [t.dark, t.accent]);

  return (
    <>
      <Nav />
      <Hero variant={t.heroVariant} />
      <Clients />
      <Services />
      <Projects />
      <Trust />
      <Quote />
      <Partners />
      <Contact />
      <Footer />
      <Tweaks t={t} setTweak={setTweak} />
    </>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);