/* Gilman Construction Media — page templates */

function AgentIcon({ name }) {
  const common = { width: 40, height: 40, viewBox: "0 0 48 48", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true };
  switch (name) {
    case "fence": return (
      <svg {...common}><path d="M11 20l3-4 3 4v20h-6zM23 20l3-4 3 4v20h-6zM35 20l3-4 3 4v20h-6z"/><path d="M8 24h32M8 32h32"/></svg>
    );
    case "cone": return (
      <svg {...common}><path d="M22 10h4l7 28H15z"/><path d="M19.5 20h9M18 28h12"/><path d="M10 38h28"/></svg>
    );
    case "boot": return (
      <svg {...common}><path d="M6 34c1-3 4-5 8-5h20c4 0 7 2 8 5"/><path d="M11 30c0-9 5-16 13-16s13 7 13 16"/><path d="M20 15c1-1 2-1.5 4-1.5s3 .5 4 1.5l-2 15h-4z"/></svg>
    );
    case "face": return (
      <svg {...common}><circle cx="24" cy="24" r="16"/><path d="M18 20v2M30 20v2"/><path d="M24 22v6h-3"/><path d="M18 31c2 2 4 3 6 3s4-1 6-3"/></svg>
    );
    case "truck": return (
      <svg {...common}><path d="M4 30l4-10h12v10"/><path d="M20 16h10l8 8v6H20z"/><circle cx="13" cy="34" r="4"/><circle cx="33" cy="34" r="4"/><path d="M4 30v4h5M17 34h12"/></svg>
    );
    case "box": return (
      <svg {...common}><path d="M8 16l16-8 16 8-16 8z"/><path d="M8 16v16l16 8 16-8V16"/><path d="M24 24v16"/></svg>
    );
    default: return <svg {...common}><rect x="10" y="10" width="28" height="28" rx="3"/></svg>;
  }
}

function HomePage({ ctaLabel, setRoute, heroVariant }) {
  const values = [
    { num: "01", title: "Builders first", body: "Our team came up in the industry. We speak the language of the field." },
    { num: "02", title: "Data you can act on", body: "We don't just provide video you need to search. We deliver information." },
    { num: "03", title: "Fully managed", body: "From installation to closeout. Your teams build. We handle the camera." },
  ];
  return (
    <div className="page active">
      <Hero ctaLabel={ctaLabel} setRoute={setRoute} variant={heroVariant} />
      <Pillars />
      <Clients />
      <section className="values">
        <div className="container">
          <div className="section-head">
            <div className="eyebrow" style={{color: "#e86a6f"}}>What We Stand For</div>
            <h2>Three principles behind every deployment.</h2>
          </div>
          <div className="values-grid">
            {values.map((v, i) => (
              <div className="value" key={i}>
                <div className="num">{v.num}</div>
                <h4>{v.title}</h4>
                <p>{v.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <Testimonials />
      <CtaBand ctaLabel={ctaLabel} setRoute={setRoute} />
    </div>
  );
}

function AboutPage({ ctaLabel, setRoute }) {
  return (
    <div className="page active">
      <section className="about-hero">
        <img className="flag-bg" src={window.__R("assets/logo.png")} alt="" />
        <div className="container">
          <div className="eyebrow">About Us</div>
          <h1 style={{marginTop: 16, maxWidth: 900}}>
            We don't sell cameras. <br/>
            <span style={{color: "var(--red)"}}>We do deliver intelligent operations.</span>
          </h1>
        </div>
      </section>
      <div className="container">
        <div className="about-body">
          <div style={{display: "flex", flexDirection: "column", height: "100%"}}>
            <div className="label">Our Mission</div>
            <div style={{display: "flex", flexDirection: "column", gap: 40, marginTop: 24}}>
              <div style={{borderRadius: 14, overflow: "hidden", boxShadow: "0 18px 40px rgba(15,28,55,0.12)"}}>
                <img src={window.__R("assets/mission-jobsite.jpg")} alt="Aerial view of an active jobsite — towers under construction with cranes against the foothills" style={{display: "block", width: "100%", height: "auto"}} />
              </div>
              <div style={{borderRadius: 14, overflow: "hidden", boxShadow: "0 18px 40px rgba(15,28,55,0.12)"}}>
                <img src={window.__R("assets/mission-jobsite-2.jpg")} alt="Aerial view of a multifamily jobsite with cranes and adjacent residential towers" style={{display: "block", width: "100%", height: "auto"}} />
              </div>
            </div>
          </div>
          <div>
            <p>Gilman Construction Media transforms cameras, drones, and wearable technology into actionable intelligence — powered by SentriOS AI — to make construction projects safer, faster, and more profitable. Rather than simply capturing footage, we create a unified visual source of truth that connects Owners, General Contractors, and field teams in real time. By monitoring risk, tracking progress, and surfacing critical insights without disrupting workflows or compromising privacy, our platform brings clarity and alignment to every phase of the build.</p>
            <p>Backed by over a decade of experience installing and managing construction camera systems, our exclusive partnership with SentriOS enables us to deliver more than hardware — we provide intelligent, camera-driven operations. Through advanced AI agents and data-driven insights, we help teams reduce rework, minimize surprises, and accelerate timelines while improving safety, security, and transparency. At Gilman Construction Media, we don't sell cameras — we deliver integrated systems designed to maximize profitability, enhance jobsite performance, and keep projects moving forward with confidence.</p>

            <div className="partner-card" style={{marginTop: 36, background: "var(--white)", border: "1px solid var(--rule)", borderRadius: 14, padding: "24px 28px", display: "flex", alignItems: "center", gap: 22, boxShadow: "0 10px 28px rgba(15,28,55,0.06)"}}>
              <span style={{width: 96, height: 96, borderRadius: "50%", background: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, overflow: "hidden"}}>
                <img src={window.__R("assets/sentrios-logo.png")} alt="SentriOS" style={{width: 76, height: 76, objectFit: "contain", display: "block"}} />
              </span>
              <div style={{minWidth: 0}}>
                <div style={{fontFamily: "Lato, sans-serif", fontWeight: 700, fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--red)", marginBottom: 6}}>
                  Exclusive Technology Partner
                </div>
                <div style={{fontFamily: "Lato, sans-serif", fontWeight: 900, fontSize: 22, color: "var(--navy)", lineHeight: 1.15}}>
                  Powered by SentriOS AI
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <CtaBand ctaLabel={ctaLabel} setRoute={setRoute} />
    </div>
  );
}

function LeadershipPage({ ctaLabel, setRoute, leadershipLayout }) {
  const leaders = [
    {
      name: "John Sarkisian",
      role: "Chief Executive Officer",
      photo: window.__R("assets/john-sarkisian.jpg"),
      photoPos: "center top",
      linkedin: "https://www.linkedin.com/in/john-sarkisian-1a46a36/",
      hook: "He's been on the other side of the table — as a developer.",
      bio: "Most technology vendors have never owned risk on a project. Our CEO has — acquiring land, navigating entitlements, managing capital stacks, and delivering complex developments. That experience shapes every product decision. When we say we understand your pain, we mean it from both sides of the contract.",
      tags: ["Real estate development", "Owner perspective", "Project risk"],
    },
    {
      name: "Andy Gilman",
      role: "Chief Operating Officer",
      photo: window.__R("assets/andy-gilman.png"),
      linkedin: "https://www.linkedin.com/in/andrew-gilman/",
      hook: "A decade at a top-5 GC. Another decade building a business. Zero guesswork.",
      bio: "Our COO spent 10 years in the field of one of the country's largest general contractors — managing complex programs, subcontractor relationships, and multi-hundred-million-dollar projects. He then built and scaled a business for another decade. The result: operational insight that no software company can fake.",
      tags: ["Top-5 GC background", "Operations leadership", "Subcontractor mgmt"],
    },
    {
      name: "Sai Reddy",
      role: "Chief Technology Officer",
      photo: window.__R("assets/sai-reddy.png"),
      photoPos: "center 20%",
      linkedin: "https://www.linkedin.com/in/sai-r-730b40104/",
      hook: "Pioneering visual AI that sees a job site the way an expert does.",
      bio: "While others apply generic AI to construction, our CTO is building the category. He is pioneering visual language models purpose-built for the construction industry — models that can interpret a site photo, a drawing set, or a progress image with the depth of a seasoned superintendent. This isn't off-the-shelf AI. It's a new frontier.",
      tags: ["Visual language models", "AI research", "Construction AI"],
    },
  ];

  const stats = [
    { num: "40+", label: "Years Real Estate Development" },
    { num: "20+", label: "Years General Contractor Operations" },
    { num: "1st", label: "In Visual Language Models for Construction" },
  ];

  const differentiators = [
    { title: "We speak your language — fluently", body: "No translating business problems into tech jargon. Our team has lived your workflows, your contracts, and your risk." },
    { title: "Built for the long project cycle, not a demo", body: "Our COO's 20 years running real projects means our tools are designed for how projects actually unfold — not how they look in a slide deck." },
    { title: "AI that's ahead, not bolted on", body: "Our CTO isn't integrating someone else's AI — he's building new models. That means capabilities your competitors haven't imagined yet." },
  ];

  return (
    <div className="page active">
      <section className="leader-hero">
        <div className="container">
          <div className="eyebrow" style={{color: "#e86a6f"}}>Leadership</div>
          <h1 style={{marginTop: 16}}>Built by people who've<br/>actually done the work.</h1>
          <div style={{fontFamily:"Lato, sans-serif", fontWeight:900, fontSize:24, color:"var(--red)", textTransform:"uppercase", letterSpacing:"-0.005em", marginTop:18, marginBottom:18}}>Why we're different</div>
          <p>Most technology companies have never set foot on a job site. Our leadership team has spent decades in the trenches — developing projects, running operations, and now reimagining what's possible with AI.</p>

          <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:0, marginTop:56}}>
            {stats.map((s, i) => (
              <div key={i} style={{padding:"32px 28px 8px"}}>
                <div style={{fontFamily:"Lato, sans-serif", fontWeight:900, fontSize:56, color:"var(--red)", lineHeight:1, letterSpacing:"-0.02em"}}>{s.num}</div>
                <div style={{fontSize:13, letterSpacing:"0.06em", textTransform:"uppercase", color:"rgba(255,255,255,0.65)", marginTop:12, fontWeight:600}}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className={leadershipLayout === "stacked" ? "leader-stacked" : "leader-grid"}>
            {leaders.map((l, i) => (
              <div className="leader-card" key={i}>
                <div className="leader-photo" style={{backgroundImage: `url(${l.photo})`, backgroundPosition: l.photoPos || "center top"}} />
                <div className="leader-body">
                  <div className="role">{l.role}</div>
                  <h3>
                    <a href={l.linkedin} target="_blank" rel="noopener">
                      {l.name}
                      <span className="linkedin">in</span>
                    </a>
                  </h3>
                  <p style={{fontFamily:"Lato, sans-serif", fontWeight:900, fontSize:18, color:"var(--navy)", textTransform:"uppercase", letterSpacing:"-0.005em", marginBottom:14, lineHeight:1.25}}>{l.hook}</p>
                  <p>{l.bio}</p>
                  {l.tags && (
                    <div style={{display:"flex", flexWrap:"wrap", gap:8, marginTop:18}}>
                      {l.tags.map((t, ti) => (
                        <span key={ti} style={{display:"inline-block", padding:"6px 12px", border:"1px solid var(--rule)", borderRadius:999, fontSize:12, fontWeight:600, color:"var(--navy)", letterSpacing:"0.02em", textTransform:"uppercase", background:"#fff"}}>{t}</span>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{background:"var(--navy)", color:"#fff"}}>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow" style={{color:"#e86a6f"}}>Why It Matters For You</div>
            <h2 style={{color:"#fff"}}>The difference experience makes.</h2>
            <p style={{color:"rgba(255,255,255,0.75)", maxWidth:680, marginTop:14}}>When your leadership team has lived the problems, the solutions are fundamentally different.</p>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:48}}>
            {differentiators.map((d, i) => (
              <div key={i} style={{padding:"8px 0"}}>
                <div style={{width:32, height:4, background:"var(--red)", marginBottom:20}} />
                <h4 style={{color:"#fff", marginBottom:12, fontSize:20}}>{d.title}</h4>
                <p style={{color:"rgba(255,255,255,0.75)", margin:0}}>{d.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{background:"#fff", color:"var(--navy)"}}>
        <div className="container">
          <div style={{padding:"8px 32px"}}>
            <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", gap:32, flexWrap:"wrap"}}>
              <h3 style={{color:"var(--navy)", margin:0, fontSize:36, lineHeight:1.1}}>Ready to see the difference?</h3>
              <div style={{display:"flex", gap:14, flexWrap:"wrap"}}>
                <a href="#" onClick={(e)=>{e.preventDefault(); setRoute("Contact");}} className="btn btn-primary">Schedule a conversation <span style={{marginLeft:6}}>↗</span></a>
                <a href="#" onClick={(e)=>{e.preventDefault(); setRoute("Platform");}} className="btn btn-ghost">See the platform</a>
              </div>
            </div>
            <p style={{color:"var(--muted)", margin:"14px 0 0", fontSize:18, maxWidth:640}}>Talk to a team that's been in your shoes — and built something better because of it.</p>
          </div>
        </div>
      </section>

      <CtaBand ctaLabel={ctaLabel} setRoute={setRoute} />
    </div>
  );
}

function PlatformPage({ ctaLabel, setRoute, platformTab }) {
  const cards = [
    { title: "Security Agent", icon: "fence", body: "After-hours intrusion, tailgating, and delivery-gate visibility — the construction security system that keeps theft off your project.", launch: "Live Now" },
    { title: "Critical Hazard Detection", icon: "cone", body: "Fire and water leak detection, workplace violence, and emergency escalation, response, and reports.", launch: "Launching Q3 2026" },
    { title: "Workforce Intelligence", icon: "boot", body: "Counts workers and summarizes total workers on site, including entry and exit times.", launch: "Live Now" },
    { title: "Face ID Access Control", icon: "face", body: "Camera-based biometric entry and exit, with a worker enrollment portal.", launch: "Launching Q3 2026" },
    { title: "Equipment Usage Monitoring", icon: "truck", body: "Utilization, idle time, and unauthorized use of on-site equipment.", launch: "Launching Q4 2026" },
    { title: "Material Delivery", icon: "box", body: "Flags unscheduled deliveries and missing materials, and validates against delivery manifests.", launch: "Launching Q4 2026" },
  ];
  const tab = platformTab || "software";

  const installSteps = [
    { group: "How We Install", items: [
      { title: "Site assessment & placement planning", body: "We walk the jobsite, identify optimal vantage points, and ensure coverage aligns with project needs, safety requirements, and owner expectations." },
      { title: "Professional installation", body: "Cameras are mounted securely, powered correctly, and configured for long-term reliability. No “set and forget”—we verify angles, exposure, and connectivity before leaving the site." },
      { title: "Network & system setup", body: "We handle connectivity, data routing, and platform configuration so your team logs in once and sees everything working." },
      { title: "Verification & testing", body: "Every camera is tested under real conditions to ensure consistent capture, stable uptime, and clean visuals." },
    ]},
    { group: "Onsite Customer Service", items: [
      { title: "Hands-on support throughout the project", body: "If something needs adjusting—angle, height, focus, exposure—we’re back onsite." },
      { title: "Proactive check-ins", body: "We don’t wait for you to call. We monitor performance and address issues before they impact your documentation." },
      { title: "Clear communication", body: "You get updates, confirmations, and visibility into what’s been installed, what’s been serviced, and what’s scheduled next." },
    ]},
    { group: "Technical Support", items: [
      { title: "Real-time troubleshooting", body: "Connectivity issues, weather impacts, hardware quirks—we resolve them quickly and without burdening your team." },
      { title: "Remote monitoring", body: "We keep an eye on uptime, data flow, and image quality so you don’t have to." },
      { title: "System optimization", body: "As the project evolves, we adjust settings, reposition cameras, and ensure your visuals stay aligned with current work areas." },
    ]},
  ];

  const whyItMatters = [
    { title: "Reliable documentation", body: "Consistent visuals mean better communication, better records, and fewer surprises." },
    { title: "Less friction for your team", body: "No chasing tech issues or coordinating third-party vendors." },
    { title: "Higher-quality output", body: "Properly installed and maintained cameras produce better timelapse, better progress photos, and better stakeholder updates." },
    { title: "Confidence for owners & partners", body: "They see a professional, well-managed system capturing the project from start to finish." },
  ];

  return (
    <div className="page active">
      {tab === "software" && (
      <section className="stub-hero stub-hero-skyline">
        <div className="container">
          <div className="eyebrow">The Platform</div>
          <h1 style={{marginTop: 16}}>Cameras, drones, and wearables — <br/><span style={{color: "var(--red)"}}>unified by AI that actually understands construction.</span></h1>
          <p>Our exclusive partnership with SentriOS means the agents running on your feeds were built by the team that pioneered Visual Language Models for the real world.</p>
          <div style={{marginTop: 28, display: "inline-flex", alignItems: "center", gap: 18}}>
            <span style={{width: 72, height: 72, borderRadius: "50%", background: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, boxShadow: "0 6px 18px rgba(0,0,0,0.25)"}}>
              <img src={window.__R("assets/sentrios-logo.png")} alt="SentriOS" style={{width: 56, height: 56, objectFit: "contain", display: "block"}} />
            </span>
            <span style={{fontFamily: "Lato, sans-serif", fontWeight: 700, fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.92)"}}>
              In exclusive partnership with <span style={{color: "#fff", fontWeight: 900}}>SentriOS</span>
            </span>
          </div>
        </div>
      </section>
      )}

      {tab === "software" && (
        <section className="agents-section">
          <div className="container">
            <div className="section-head">
              <div className="eyebrow">Six Agents, One Operating Layer</div>
              <h2>Each agent plugs into your existing workflows.</h2>
            </div>
            <div className="platform-grid">
              {cards.map((c, i) => (
                <div className="platform-card agent-card" key={i}>
                  <div className="agent-icon"><AgentIcon name={c.icon} /></div>
                  <h3>{c.title}</h3>
                  <p>{c.body}</p>
                  {c.launch && <div className="agent-launch">{c.launch}</div>}
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {tab === "timelapse" && (
        <section className="timelapse-section">
          <div className="container">
            <div className="tl-hero">
              <div className="tl-hero-copy">
                <div className="eyebrow">Construction Timelapse</div>
                <h2>A timelapse isn't just a video — it's a record of the entire build.</h2>
                <p>It captures every phase, every milestone, and every transformation in a way no daily photo or report ever can. When stakeholders need clarity, when teams need alignment, and when your brand needs proof of excellence, timelapse delivers it.</p>
              </div>
              <div className="split-img tl-hero-img" style={{backgroundImage: ("url(" + window.__R("assets/timelapse-onemesa.gif") + ")"), backgroundSize: "cover", backgroundPosition: "center"}} aria-label="Construction time lapse of the UC San Diego One Mesa project" />
            </div>

            <div className="tl-lists">
              <div className="tl-list">
                <h3>Why a Construction Timelapse Matters</h3>
                <ul className="checklist">
                  <li><strong>Shows the full story</strong> — compresses months of work into seconds, making progress instantly understandable.</li>
                  <li><strong>Builds trust</strong> — owners, partners, and executives see real, unfiltered progress.</li>
                  <li><strong>Reduces friction</strong> — eliminates "what's happening on site?" questions with a visual timeline anyone can follow.</li>
                  <li><strong>Strengthens your brand</strong> — demonstrates precision, consistency, and operational excellence.</li>
                  <li><strong>Creates a permanent record</strong> — invaluable for post-construction documentation, claims, and future planning.</li>
                </ul>
              </div>
              <div className="tl-list">
                <h3>Use Your Gilman Construction Media For</h3>
                <ul className="checklist">
                  <li><strong>Stakeholder updates</strong> — fast, clear progress communication without long reports.</li>
                  <li><strong>Marketing & social media</strong> — high-engagement content that positions your company as modern and innovative.</li>
                  <li><strong>Recruiting</strong> — showcases the scale and complexity of your work to attract top talent.</li>
                  <li><strong>Client proposals</strong> — turns past successes into future business by showing exactly how you deliver.</li>
                  <li><strong>Risk management</strong> — provides a visual history of site conditions and sequencing.</li>
                  <li><strong>Project retrospectives</strong> — helps teams analyze workflow, sequencing, and coordination.</li>
                </ul>
              </div>
            </div>

            <div className="doc-grid" style={{marginTop: 64}}>
              <div className="doc-intro">
                <div className="eyebrow">Construction Documentation &amp; Aerial Media</div>
                <h2>Your project.<br/>Documented from <span style={{color:"var(--red)"}}>every angle.</span></h2>
                <p>Gilman Construction Media delivers crane-mounted cameras, aerial video, and real-time time-lapse documentation that keeps owners, stakeholders, and teams informed from groundbreaking to ribbon-cutting.</p>
              </div>
              <div className="doc-card">
                <div className="marker" />
                <h3>Crane-Mounted Cameras</h3>
                <p>Weatherproof cameras installed directly on tower cranes capture an unobstructed bird's-eye view of your site throughout the entire project lifecycle. No scaffolding required — no access disruption.</p>
              </div>
            </div>
          </div>
        </section>
      )}

      {tab === "cameras" && (
        <section className="cameras-section">
          <div className="container">
            <div className="section-head">
              <div className="eyebrow">Cameras</div>
              <h2>Powered by Axis Communications.</h2>
              <p>We trust <strong>Axis Communications</strong> for their industry-leading image quality, proven reliability, and reputation as one of the world's premier network camera manufacturers. Their enterprise-grade cameras power our GCMedia 4K Construction Camera and SiteVision Security System — built to perform in demanding environments and ideal for long-term construction monitoring and security.</p>
            </div>

            <div className="camera-grid">
              <div className="camera-card">
                <div className="camera-photo"><img src={window.__R("assets/min/axis-1488.jpg")} alt="Axis P1488 fixed bullet camera" /></div>
                <div className="camera-model">Axis P1488</div>
                <h3>GCMedia 4K Construction Camera</h3>
                <p>Deployed for our GCMedia 4K Construction Camera to deliver exceptional ultra-high-definition imagery — so clients can clearly monitor jobsite progress, document milestones, and produce stunning time-lapse videos.</p>
              </div>
              <div className="camera-card">
                <div className="camera-photo"><img src={window.__R("assets/min/axis-q1809.png")} alt="Axis Q1809 8K construction camera" /></div>
                <div className="camera-model">Axis Q1809</div>
                <h3>GCMedia 8K Construction Camera</h3>
                <p>For projects requiring the highest level of detail — 8K ultra-high-definition imagery, four times the resolution of a standard 4K camera. Ideal for large-scale commercial developments, and successfully deployed at San Diego State University (SDSU) for unmatched documentation from a single camera.</p>
              </div>
              <div className="camera-card">
                <div className="camera-photo"><img src={window.__R("assets/min/axis-5526.jpg")} alt="Axis P5526 PTZ dome camera" /></div>
                <div className="camera-model">Axis P5526 PTZ</div>
                <h3>SiteVision Security System — Active Surveillance</h3>
                <p>Powerful pan-tilt-zoom capabilities for active site surveillance and incident response — part of our SiteVision Security System, paired with GCM's AI-powered monitoring platform.</p>
              </div>
              <div className="camera-card">
                <div className="camera-photo"><img src={window.__R("assets/min/axis-4318.png")} alt="Axis P4318 fixed panoramic camera" /></div>
                <div className="camera-model">Axis P4318</div>
                <h3>SiteVision Security System — Fixed Coverage</h3>
                <p>High-resolution fixed coverage for continuous monitoring across the jobsite — delivering reliable, real-time security and complete visibility as part of the SiteVision Security System.</p>
              </div>
            </div>
          </div>
        </section>
      )}

      {tab === "installation" && (
        <section className="install-section">
          <div className="container">
            <div className="install-intro">
              <div className="install-intro-copy">
                <div className="eyebrow">Camera Installation &amp; Onsite Support</div>
                <h2>We handle every part of camera deployment.</h2>
                <p>Your visuals only matter if they work flawlessly. We manage installation through ongoing onsite service—so your team never has to troubleshoot, climb a pole, or chase down a tech issue. Your project stays fully documented, supported, and always online.</p>
              </div>
              <img className="install-photo" src={window.__R("assets/min/gcm-truck.jpg")} alt="Gilman Construction Media branded truck parked at an active jobsite" />
            </div>

            <div className="install-block">
              <h3 className="install-group">How We Install</h3>
              <div className="install-steps">
                {installSteps[0].items.map((it, ii) => (
                  <div className="install-step" key={ii}>
                    <div className="install-step-num">{String(ii + 1).padStart(2, "0")}</div>
                    <div>
                      <h4>{it.title}</h4>
                      <p>{it.body}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {installSteps.slice(1).map((sec, si) => (
              <div className="install-block" key={si}>
                <h3 className="install-group">{sec.group}</h3>
                <div className="install-grid">
                  {sec.items.map((it, ii) => (
                    <div className="install-item" key={ii}>
                      <div className="marker" />
                      <h4>{it.title}</h4>
                      <p>{it.body}</p>
                    </div>
                  ))}
                </div>
              </div>
            ))}

            <div className="install-block">
              <h3 className="install-group">Why This Matters</h3>
              <div className="install-grid">
                {whyItMatters.map((it, i) => (
                  <div className="install-item" key={i}>
                    <div className="marker" />
                    <h4>{it.title}</h4>
                    <p>{it.body}</p>
                  </div>
                ))}
              </div>
              <p className="install-closer">Your project deserves visuals that work as hard as your team. We install, maintain, and support every camera—start to finish.</p>
            </div>
          </div>
        </section>
      )}

      <CtaBand ctaLabel={ctaLabel} setRoute={setRoute} />
    </div>
  );
}

function CasesPage({ ctaLabel, setRoute }) {
  const cases = [
    { title: "Kaiser Permanente — Downey Hospital", meta: "Healthcare", bg: window.__R("assets/min/case-kaiser-downey.jpg"), route: "case-kaiser" },
    { title: "Delta LAX — Terminal 3 & 5", meta: "Aviation", bg: window.__R("assets/min/case-lax-t5.jpg"), route: "case-lax" },
    { title: "Les Schwab Tire Center — National Rollout", meta: "Commercial", bg: window.__R("assets/min/case-les-schwab-cover.jpg"), route: "case-les-schwab" },
  ];
  return (
    <div className="page active">
      <section className="stub-hero stub-hero-skyline" style={{
        backgroundImage: `linear-gradient(180deg, rgba(12,35,64,0.7) 0%, rgba(10,28,51,0.9) 100%), url(${window.__R("assets/min/cases-hero.jpg")})`,
        backgroundSize: "cover", backgroundPosition: "center",
      }}>
        <div className="container">
          <div className="eyebrow">Case Studies</div>
          <h1 style={{marginTop: 16}}>Projects we've helped deliver.</h1>
          <p>From single-drone progress capture a decade ago to full AI-powered jobsite operations today — here's what the work looks like.</p>
        </div>
      </section>
      <section>
        <div className="container">
          <div className="case-grid">
            {cases.map((c, i) => (
              <div
                className={"case" + (c.route ? " case--link" : "")}
                key={i}
                style={{backgroundImage: `url(${c.bg})`}}
                onClick={c.route ? () => setRoute(c.route) : undefined}
                role={c.route ? "link" : undefined}
                tabIndex={c.route ? 0 : undefined}
                onKeyDown={c.route ? (e)=>{ if(e.key==="Enter"){setRoute(c.route);} } : undefined}
              >
                <div className="meta">{c.meta}</div>
                <h3>{c.title}</h3>
                {c.route && <span className="case-cta">Read case study →</span>}
              </div>
            ))}
          </div>
        </div>
      </section>
      <CtaBand ctaLabel={ctaLabel} setRoute={setRoute} />
    </div>
  );
}

function CaseKaiserPage({ ctaLabel, setRoute }) {
  const specs = [
    { label: "Contractor", value: "Hensel Phelps Construction Co." },
    { label: "Owner", value: "Kaiser Permanente" },
    { label: "Project", value: "Hospital Expansion & Modernization" },
    { label: "Sector", value: "Healthcare" },
    { label: "Services Provided", value: "4K Cameras, Drone, 2D/3D Mapping" },
  ];
  const stats = [
    { num: "6", label: "4K Cameras Installed" },
    { num: "18+", label: "Months Documented" },
    { num: "Monthly", label: "Drone Flights" },
    { num: "2D+3D", label: "Site Mappings" },
  ];
  return (
    <div className="page active">
      <section className="stub-hero stub-hero-skyline" style={{
        backgroundImage: `linear-gradient(180deg, rgba(12,35,64,0.62) 0%, rgba(10,28,51,0.9) 100%), url(${window.__R("assets/jobsite-hospital.jpg")})`,
        backgroundSize: "cover", backgroundPosition: "center",
      }}>
        <div className="container">
          <a href="#cases" onClick={(e)=>{e.preventDefault();setRoute("cases");}} className="case-back">← All case studies</a>
          <div className="eyebrow" style={{marginTop:20}}>Healthcare · Case Study</div>
          <h1 style={{marginTop: 16}}>Kaiser Permanente — Downey Hospital Expansion &amp; Modernization</h1>
          <p>Six construction cameras, monthly drone video, 2D/3D mapping, and 18-month milestone documentation for a major hospital expansion.</p>
          <div className="hero-actions" style={{marginTop:28}}>
            <a className="btn btn-primary btn-arrow" href="#contact" onClick={(e)=>{e.preventDefault();setRoute("contact");}}>
              Schedule a Project Consultation
            </a>
            <a className="btn btn-ghost" href="https://www.youtube.com/watch?v=HCTBViT-P-0&t=1s" target="_blank" rel="noopener noreferrer" style={{display:"inline-flex", alignItems:"center", gap:10}}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
              Watch the Video
            </a>
          </div>
        </div>
      </section>

      <section className="case-spec-bar">
        <div className="container">
          <div className="case-spec-grid">
            {specs.map((s, i) => (
              <div className="case-spec" key={i}>
                <div className="case-spec-label">{s.label}</div>
                <div className="case-spec-value">{s.value}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="container case-body">
          <div className="case-overview">
            <div className="eyebrow">Overview</div>
            <h2>Process &amp; Results</h2>
            <p>For this extensive hospital construction, we installed six Gilman 4K construction cameras to monitor all the various sections of the project. In addition, we captured one drone video each month throughout the duration. The large volume of content offered the client impressive aerial time-lapse visuals illustrating the project's development.</p>
            <p>At the 18-month point of construction, the client requested a video to showcase the project's progress. This video emphasized the advancements made for all project stakeholders, including Kaiser executives, board members, doctors, administrators, lenders, and the Downey community.</p>
            <p>We took monthly photographs from the same viewpoint, which the Kaiser team incorporated into their monthly reports to demonstrate progress to senior management. Beyond the videos and photos, we produced 2D and 3D site mappings each month. The up-to-date visuals from the 3D models and 2D maps were utilized by the construction team during weekly meetings, job site orientations, and subcontractor discussions.</p>
          </div>
          <aside className="case-stats">
            <div className="eyebrow">By the Numbers</div>
            <div className="case-stat-grid">
              {stats.map((s, i) => (
                <div className="case-stat" key={i}>
                  <div className="case-stat-num">{s.num}</div>
                  <div className="case-stat-label">{s.label}</div>
                </div>
              ))}
            </div>
          </aside>
        </div>
      </section>

      <section className="case-figure-wrap">
        <div className="container">
          <figure className="case-figure">
            <img src={window.__R("assets/min/case-kaiser-downey.jpg")} alt="Aerial view of the completed Kaiser Permanente Downey hospital expansion" />
            <figcaption>Completed Kaiser Permanente — Downey hospital expansion, captured by Gilman aerial progress video.</figcaption>
          </figure>
        </div>
      </section>

      <CtaBand ctaLabel={ctaLabel} setRoute={setRoute} />
    </div>
  );
}

function CaseLaxPage({ ctaLabel, setRoute }) {
  const specs = [
    { label: "Contractor", value: "Hensel Phelps" },
    { label: "Owner", value: "City of Los Angeles" },
    { label: "Project", value: "Terminal Modernization" },
    { label: "Sector", value: "Aviation" },
    { label: "Services Provided", value: "Gilman 4K Construction Cameras, Drone" },
  ];
  const stats = [
    { num: "22", label: "4K/8K Cameras Installed" },
    { num: "24/7", label: "Real-Time Visibility" },
    { num: "18+", label: "Months Documented" },
    { num: "Monthly", label: "Drone Cinematography" },
  ];
  return (
    <div className="page active">
      <section className="stub-hero stub-hero-skyline" style={{
        backgroundImage: `linear-gradient(180deg, rgba(12,35,64,0.6) 0%, rgba(10,28,51,0.9) 100%), url(${window.__R("assets/min/case-lax-t5.jpg")})`,
        backgroundSize: "cover", backgroundPosition: "center",
      }}>
        <div className="container">
          <a href="#cases" onClick={(e)=>{e.preventDefault();setRoute("cases");}} className="case-back">← All case studies</a>
          <div className="eyebrow" style={{marginTop:20}}>Aviation · Case Study</div>
          <h1 style={{marginTop: 16}}>Delta LAX — Terminal 3 &amp; Terminal 5 Modernization</h1>
          <p>Real-time project visibility, start-to-finish documentation, and intelligent site insights for the LAX modernization program.</p>
          <div className="hero-actions" style={{marginTop:28}}>
            <a className="btn btn-primary btn-arrow" href="#contact" onClick={(e)=>{e.preventDefault();setRoute("contact");}}>
              Schedule a Project Consultation
            </a>
            <a className="btn btn-ghost" href="#lax-timelapse" onClick={(e)=>{e.preventDefault(); const v=document.getElementById("lax-timelapse"); if(v){v.scrollIntoView({behavior:"smooth", block:"center"});}}} style={{display:"inline-flex", alignItems:"center", gap:10}}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
              Watch Time Lapse
            </a>
          </div>
        </div>
      </section>

      <section className="case-spec-bar">
        <div className="container">
          <div className="case-spec-grid">
            {specs.map((s, i) => (
              <div className="case-spec" key={i}>
                <div className="case-spec-label">{s.label}</div>
                <div className="case-spec-value">{s.value}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="container case-body">
          <div className="case-overview">
            <div className="eyebrow">Overview</div>
            <h2>Process &amp; Results</h2>
            <p>During this comprehensive airport terminal rebuild at one of the busiest international airports in the world, the Hensel Phelps construction team was presented with unique logistical and scale challenges. Gilman Construction Media deployed a network of 22 4K/8K construction cameras to provide 24/7 real-time visibility and project coverage, saving countless hours on the jobsite.</p>
            <p>This was augmented by monthly high-resolution drone cinematography, providing the ownership team with professional aerial time-lapses that documented the project's architectural evolution.</p>
            <p>At the 18-month milestone, we produced a custom progress featurette designed for diverse project stakeholders. This visual report effectively communicated critical development benchmarks to Hensel Phelps leadership, financial partners, and the broader community.</p>
          </div>
          <aside className="case-stats">
            <div className="eyebrow">By the Numbers</div>
            <div className="case-stat-grid">
              {stats.map((s, i) => (
                <div className="case-stat" key={i}>
                  <div className="case-stat-num">{s.num}</div>
                  <div className="case-stat-label">{s.label}</div>
                </div>
              ))}
            </div>
          </aside>
        </div>
      </section>

      <section className="case-figure-wrap">
        <div className="container">
          <figure className="case-figure" id="lax-timelapse">
            <video src={window.__R("assets/lax-t5-timelapse.mp4")} controls playsInline poster={window.__R("assets/min/case-lax-t5.jpg")} style={{width:"100%", height:"auto", display:"block", borderRadius:"var(--card-radius)", boxShadow:"0 18px 40px rgba(15,28,55,0.14)"}} />
            <figcaption>Delta LAX Terminal 5 modernization time lapse, captured by Gilman 4K construction cameras.</figcaption>
          </figure>
        </div>
      </section>

      <CtaBand ctaLabel={ctaLabel} setRoute={setRoute} />
    </div>
  );
}

function CaseLesSchwabPage({ ctaLabel, setRoute }) {
  const specs = [
    { label: "Contractor", value: "CenterPointe CRE" },
    { label: "Owner", value: "Meritage Group LP" },
    { label: "Project", value: "Les Schwab Tires" },
    { label: "Sector", value: "Retail / National Auto Service" },
    { label: "Services Provided", value: "4K Cameras, PTZ, Aerial Drone" },
  ];
  const stats = [
    { num: "33+", label: "Locations" },
    { num: "7", label: "States" },
    { num: "PTZ", label: "+ Fixed 4K Cameras" },
    { num: "Aerial", label: "Drone Footage" },
  ];
  return (
    <div className="page active">
      <section className="stub-hero stub-hero-skyline" style={{
        backgroundImage: `linear-gradient(180deg, rgba(12,35,64,0.62) 0%, rgba(10,28,51,0.9) 100%), url(${window.__R("assets/min/case-les-schwab-cover.jpg")})`,
        backgroundSize: "cover", backgroundPosition: "center",
      }}>
        <div className="container">
          <a href="#cases" onClick={(e)=>{e.preventDefault();setRoute("cases");}} className="case-back">← All case studies</a>
          <div className="eyebrow" style={{marginTop:20}}>National Rollout · Case Study</div>
          <h1 style={{marginTop: 16}}>Les Schwab Tire Center — National Rollout</h1>
          <p>Consistent project visibility, lender-grade documentation, and remote oversight across 33+ locations in 7 states.</p>
          <div className="hero-actions" style={{marginTop:28}}>
            <a className="btn btn-primary btn-arrow" href="#contact" onClick={(e)=>{e.preventDefault();setRoute("contact");}}>
              Schedule a Project Consultation
            </a>
          </div>
        </div>
      </section>

      <section className="case-spec-bar">
        <div className="container">
          <div className="case-spec-grid">
            {specs.map((s, i) => (
              <div className="case-spec" key={i}>
                <div className="case-spec-label">{s.label}</div>
                <div className="case-spec-value">{s.value}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="container case-body">
          <div className="case-overview">
            <div className="eyebrow">Overview</div>
            <h2>Supporting Les Schwab's National Expansion</h2>
            <p>As <strong>Les Schwab Tires</strong> expands into the Midwest with more than 20 new commercial locations, Gilman Construction Media (GCM) was selected by one of its developers to provide 4K construction cameras, drone photography, and aerial videography across the portfolio. Our services give Les Schwab's Oregon-based team real-time visibility into every project without the need for frequent site visits, making it easier to monitor progress across multiple states.</p>
            <p>GCM manages the entire deployment process—from site planning and camera placement to logistics, installation, and live project activation. Once a project start date and address are provided, our team handles the rest, delivering secure live camera access that improves communication, documents progress, and helps reduce project risk through continuous visual oversight.</p>
            <p>More than five years later, the partnership continues to support Les Schwab's national growth. At the completion of each project, GCM produces professionally edited time-lapse videos and aerial highlight reels used for marketing, social media, internal presentations, and community outreach, creating lasting value long after construction is complete.</p>
            {/* Overview copy to be provided */}
          </div>
          <aside className="case-stats">
            <div className="eyebrow">By the Numbers</div>
            <div className="case-stat-grid">
              {stats.map((s, i) => (
                <div className="case-stat" key={i}>
                  <div className="case-stat-num">{s.num}</div>
                  <div className="case-stat-label">{s.label}</div>
                </div>
              ))}
            </div>
          </aside>
        </div>
      </section>

      <section className="case-figure-wrap">
        <div className="container">
          <figure className="case-figure">
            <img src={window.__R("assets/min/case-les-schwab-map.jpg")} alt="Map of Les Schwab Tire Center project locations across 7 states" />
            <figcaption>34 Les Schwab Tire Center project sites documented across 7 states.</figcaption>
          </figure>
        </div>
      </section>

      <CtaBand ctaLabel={ctaLabel} setRoute={setRoute} />
    </div>
  );
}

function ContactPage({ ctaLabel, setRoute }) {
  const [tab, setTab] = React.useState("quote");

  const cardInput = {
    width: "100%",
    padding: "14px 16px",
    border: "1px solid var(--rule)",
    borderRadius: 8,
    fontSize: 15,
    fontFamily: "Open Sans, sans-serif",
    color: "var(--ink)",
    background: "#fff",
    outline: "none",
  };
  const cardLabel = {
    fontFamily: "Lato, sans-serif",
    fontWeight: 800,
    fontSize: 11,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    color: "var(--navy)",
    display: "block",
    marginBottom: 8,
  };

  const tabs = [
    { id: "quote", label: "Request a Quote" },
    { id: "demo", label: "Schedule a Demo" },
    { id: "general", label: "General Inquiry" },
  ];

  const steps = [
    { n: "1", title: "We review your project", body: "Within one business day, our team scopes coverage, agents, and integration needs." },
    { n: "2", title: "Walkthrough call", body: "A 30-minute call with operations and AI leadership — not a sales rep — to align on goals." },
    { n: "3", title: "Proposal & pilot plan", body: "A clear quote, deployment timeline, and success metrics tied to your jobsite." },
  ];

  const leaders = [
    { initials: "JS", name: "John Sarkisian", role: "CEO" },
    { initials: "AG", name: "Andy Gilman", role: "COO" },
    { initials: "SR", name: "Sai Reddy", role: "CTO" },
  ];

  return (
    <div className="page active">
      <section style={{background: "var(--navy)", padding: "72px 0 140px"}}>
        <div className="container" style={{maxWidth: 1180}}>
          <h1 style={{color: "#fff", fontSize: 56, lineHeight: 1.05, margin: 0, marginBottom: 18}}>Tell us about your project.</h1>
          <p style={{color: "rgba(255,255,255,0.78)", maxWidth: 680, fontSize: 18, margin: 0}}>
            See how Gilman Construction Media's connected jobsite cameras and AI-driven security keep your project safe, accountable, and on schedule.
          </p>
        </div>
      </section>

      <section style={{background: "var(--paper)", padding: "0 0 96px"}}>
        <div className="container" style={{maxWidth: 1180, marginTop: -40}}>
          {/* Tab bar */}
          <div style={{display: "flex", gap: 36, marginBottom: 36, flexWrap: "wrap", borderBottom: "1px solid var(--rule)"}}>
            {tabs.map((t) => {
              const active = tab === t.id;
              return (
                <button key={t.id} onClick={() => setTab(t.id)} style={{
                  padding: "26px 6px",
                  border: "none",
                  background: "transparent",
                  color: "var(--navy)",
                  fontFamily: "Lato, sans-serif",
                  fontWeight: 800,
                  fontSize: 16,
                  letterSpacing: "0.1em",
                  textTransform: "uppercase",
                  cursor: "pointer",
                  position: "relative",
                  marginBottom: -1,
                  borderBottom: active ? "4px solid var(--red)" : "4px solid transparent",
                }}>
                  {t.label}
                </button>
              );
            })}
          </div>

          <div style={{display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 32, alignItems: "start"}}>
            {/* Form card */}
            <div style={{background: "#fff", border: "1px solid var(--rule)", borderRadius: 12, padding: "40px 44px", boxShadow: "0 8px 28px rgba(15,28,55,0.06)"}}>
              {tab === "quote" && (
                <React.Fragment>
                  <h3 style={{margin: 0, marginBottom: 6, fontSize: 24, color: "var(--navy)"}}>Request a project quote</h3>
                  <p style={{margin: 0, marginBottom: 28, color: "var(--muted)", fontSize: 15}}>Tell us about the work — we'll come back with a real proposal, not a follow-up questionnaire.</p>
                  <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18}}>
                    <div><label style={cardLabel}>Full Name</label><input type="text" style={cardInput} placeholder="Jane Superintendent" /></div>
                    <div><label style={cardLabel}>Role</label>
                      <select style={cardInput} defaultValue="">
                        <option value="" disabled>Select role</option>
                        <option>Owner / Developer</option>
                        <option>General Contractor</option>
                        <option>Project Executive</option>
                        <option>Superintendent</option>
                        <option>Safety Director</option>
                        <option>Other</option>
                      </select>
                    </div>
                    <div><label style={cardLabel}>Company</label><input type="text" style={cardInput} placeholder="Hensel Phelps" /></div>
                    <div><label style={cardLabel}>Work Email</label><input type="email" style={cardInput} placeholder="jane@gc.com" /></div>
                    <div style={{gridColumn: "1 / -1"}}><label style={cardLabel}>Project Type</label>
                      <select style={cardInput} defaultValue="">
                        <option value="" disabled>Select project type</option>
                        <option>Multifamily / Residential</option>
                        <option>Commercial / Office</option>
                        <option>Healthcare</option>
                        <option>Industrial / Logistics</option>
                        <option>Civil / Infrastructure</option>
                        <option>Mixed-Use</option>
                      </select>
                    </div>
                    <div><label style={cardLabel}>Project Value</label>
                      <select style={cardInput} defaultValue="">
                        <option value="" disabled>Select range</option>
                        <option>Under $25M</option>
                        <option>$25M – $100M</option>
                        <option>$100M – $500M</option>
                        <option>$500M+</option>
                      </select>
                    </div>
                    <div><label style={cardLabel}>Active Projects</label>
                      <select style={cardInput} defaultValue="">
                        <option value="" disabled>Select volume</option>
                        <option>1 project</option>
                        <option>2 – 5 projects</option>
                        <option>6 – 15 projects</option>
                        <option>15+ projects</option>
                      </select>
                    </div>
                    <div style={{gridColumn: "1 / -1"}}><label style={cardLabel}>Project notes</label>
                      <textarea rows={4} style={{...cardInput, resize: "vertical", fontFamily: "inherit"}} placeholder="Location, timeline, what you're trying to solve..." />
                    </div>
                  </div>
                  <button className="btn btn-primary" style={{marginTop: 24, padding: "16px 28px", fontSize: 14}}>Send Quote Request</button>
                </React.Fragment>
              )}

              {tab === "demo" && (
                <React.Fragment>
                  <h3 style={{margin: 0, marginBottom: 6, fontSize: 24, color: "var(--navy)"}}>Schedule a platform demo</h3>
                  <p style={{margin: 0, marginBottom: 28, color: "var(--muted)", fontSize: 15}}>30 minutes with our team — see the agents working on real footage from active projects.</p>
                  <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18}}>
                    <div><label style={cardLabel}>Full Name</label><input type="text" style={cardInput} placeholder="Jane Superintendent" /></div>
                    <div><label style={cardLabel}>Company</label><input type="text" style={cardInput} placeholder="Hensel Phelps" /></div>
                    <div><label style={cardLabel}>Work Email</label><input type="email" style={cardInput} placeholder="jane@gc.com" /></div>
                    <div><label style={cardLabel}>Phone</label><input type="tel" style={cardInput} placeholder="(555) 555-5555" /></div>
                    <div style={{gridColumn: "1 / -1"}}><label style={cardLabel}>What would you like to see?</label>
                      <textarea rows={4} style={{...cardInput, resize: "vertical", fontFamily: "inherit"}} placeholder="Specific use cases, agents, or workflows you want to evaluate..." />
                    </div>
                  </div>
                  <button className="btn btn-primary" style={{marginTop: 24, padding: "16px 28px", fontSize: 14}}>Book Demo</button>
                </React.Fragment>
              )}

              {tab === "general" && (
                <React.Fragment>
                  <h3 style={{margin: 0, marginBottom: 6, fontSize: 24, color: "var(--navy)"}}>General inquiry</h3>
                  <p style={{margin: 0, marginBottom: 28, color: "var(--muted)", fontSize: 15}}>Press, partnerships, or anything else — drop us a note.</p>
                  <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18}}>
                    <div><label style={cardLabel}>Full Name</label><input type="text" style={cardInput} placeholder="Your name" /></div>
                    <div><label style={cardLabel}>Email</label><input type="email" style={cardInput} placeholder="you@company.com" /></div>
                    <div style={{gridColumn: "1 / -1"}}><label style={cardLabel}>Message</label>
                      <textarea rows={6} style={{...cardInput, resize: "vertical", fontFamily: "inherit"}} placeholder="How can we help?" />
                    </div>
                  </div>
                  <button className="btn btn-primary" style={{marginTop: 24, padding: "16px 28px", fontSize: 14}}>Send Message</button>
                </React.Fragment>
              )}
            </div>

            {/* Sidebar */}
            <div style={{display: "flex", flexDirection: "column", gap: 20}}>
              {/* Direct contact pill cards */}
              <div style={{background: "#fff", border: "1px solid var(--rule)", borderRadius: 12, padding: 8}}>
                <a href="tel:8337004426" style={{display: "flex", alignItems: "center", gap: 14, padding: 16, textDecoration: "none", color: "var(--navy)", borderRadius: 8}}>
                  <span style={{width: 40, height: 40, borderRadius: 10, background: "var(--paper)", border: "1px solid var(--rule)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0}}>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                  </span>
                  <span>
                    <span style={{display: "block", fontFamily: "Lato, sans-serif", fontWeight: 800, fontSize: 14, color: "var(--navy)"}}>Call Us</span>
                    <span style={{display: "block", fontSize: 13, color: "var(--muted)", marginTop: 2}}>833.700.4426</span>
                  </span>
                </a>
                <div style={{height: 1, background: "var(--rule)", margin: "0 16px"}} />
                <a href="mailto:info@gilmanconstructionmedia.com" style={{display: "flex", alignItems: "center", gap: 14, padding: 16, textDecoration: "none", color: "var(--navy)", borderRadius: 8}}>
                  <span style={{width: 40, height: 40, borderRadius: 10, background: "var(--paper)", border: "1px solid var(--rule)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0}}>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 5L2 7"/></svg>
                  </span>
                  <span>
                    <span style={{display: "block", fontFamily: "Lato, sans-serif", fontWeight: 800, fontSize: 14, color: "var(--navy)"}}>Email Us</span>
                    <span style={{display: "block", fontSize: 13, color: "var(--muted)", marginTop: 2}}>info@gilmanconstructionmedia.com</span>
                  </span>
                </a>
              </div>

              {/* What happens next */}
              <div style={{background: "#fff", border: "1px solid var(--rule)", borderRadius: 12, padding: "28px 28px"}}>
                <div style={{fontFamily: "Lato, sans-serif", fontWeight: 900, fontSize: 13, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--navy)", marginBottom: 20}}>What happens next</div>
                <div style={{display: "flex", flexDirection: "column", gap: 18}}>
                  {steps.map((s) => (
                    <div key={s.n} style={{display: "flex", gap: 14, alignItems: "flex-start"}}>
                      <div style={{width: 32, height: 32, borderRadius: 8, background: "var(--navy)", color: "#fff", fontFamily: "Lato, sans-serif", fontWeight: 900, fontSize: 14, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0}}>{s.n}</div>
                      <div>
                        <div style={{fontFamily: "Lato, sans-serif", fontWeight: 800, fontSize: 15, color: "var(--navy)", marginBottom: 4}}>{s.title}</div>
                        <div style={{fontSize: 14, color: "var(--muted)", lineHeight: 1.45}}>{s.body}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* HQ */}
              <div style={{background: "#fff", border: "1px solid var(--rule)", borderRadius: 12, padding: "20px 24px", display: "flex", alignItems: "center", gap: 14}}>
                <span style={{width: 40, height: 40, borderRadius: 10, background: "var(--paper)", border: "1px solid var(--rule)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, color: "var(--navy)"}}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                </span>
                <div>
                  <div style={{fontFamily: "Lato, sans-serif", fontWeight: 800, fontSize: 14, color: "var(--navy)"}}>Headquarters</div>
                  <div style={{fontSize: 13, color: "var(--muted)", marginTop: 2}}>San Diego, California</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

const labelStyle = {
  fontFamily: "Lato, sans-serif",
  fontWeight: 800,
  fontSize: 12,
  letterSpacing: "0.14em",
  textTransform: "uppercase",
  color: "var(--navy)",
  display: "block",
  marginBottom: 8,
};
const inputStyle = {
  width: "100%",
  padding: "14px 16px",
  border: "1px solid var(--rule)",
  borderRadius: 2,
  fontSize: 15,
  fontFamily: "Open Sans, sans-serif",
  color: "var(--ink)",
  background: "white",
  outline: "none",
};

function Field({ label, placeholder, type = "text" }) {
  return (
    <div>
      <label style={labelStyle}>{label}</label>
      <input type={type} placeholder={placeholder} style={inputStyle}
             onFocus={(e) => e.target.style.borderColor = "var(--red)"}
             onBlur={(e) => e.target.style.borderColor = "var(--rule)"} />
    </div>
  );
}

Object.assign(window, { HomePage, AboutPage, LeadershipPage, PlatformPage, CasesPage, CaseKaiserPage, CaseLaxPage, CaseLesSchwabPage, ContactPage });