// About, Certs, Leadership, Contact, Footer, Tweaks

// ==================== CERTIFICATIONS ====================
function Certifications() {
  const certs = [
    { mark: "SDVOSB",  title: "Service-Disabled Veteran-Owned", sub: "Small Business · CVE Verified", logo: "assets/sdvosb-logo.png", isFull: true },
    { mark: "SBA",     title: "U.S. Small Business Admin.",     sub: "Federally registered",         logo: "assets/certs/sba-wordmark.png" },
    { mark: "SBA SEAL",title: "Small Business Entity",          sub: "Senior entity seal",           logo: "assets/certs/sba-seal.png" },
    { mark: "TVC",     title: "Texas Veterans Commission",      sub: "Active member in good standing", logo: "assets/certs/tvc.png" },
    { mark: "VETHUB",  title: "Texas VetHUB",                   sub: "Veteran heroes united in business", logo: "assets/certs/vethub.png" },
  ];
  return (
    <section className="section" id="certifications" style={{paddingTop: 0}}>
      <div className="container">
        <div className="sh">
          <div className="num">03 / CREDENTIALS</div>
          <h2>Cleared, Certified, Ready</h2>
          <div className="meta">ACTIVE · VERIFIED · FY2026</div>
        </div>
        <div className="cert-strip">
          {certs.map((c, i) => (
            <div className={"cert" + (i === 0 ? " cert-hero" : "")} key={i}>
              <div className="cert-logo-tile">
                <img src={c.logo} alt={c.title} />
              </div>
              <div className="cert-body">
                <span className="cert-mark">★ {c.mark}</span>
                <span className="cert-title">{c.title}</span>
                <span className="cert-sub">{c.sub}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ==================== ABOUT / FIELD OPS PHOTOS ====================
function About() {
  const photos = [
    ["assets/jobs/burleson-2.jpg", "STANDING-SEAM · TX"],
    ["assets/jobs/va-bonham-1.jpg", "VA MED CENTER · TX"],
    ["assets/jobs/hess-1.jpg", "REFLECTIVE COAT · AZ"],
    ["assets/jobs/swg-1.jpg", "LOW-SLOPE · CA"],
    ["assets/jobs/irs-sacramento-1.jpg", "IRS SURVEY · CA"],
    ["assets/jobs/rio-rico-2.jpg", "FED FACILITY · AZ"],
  ];
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="sh">
          <div className="num">04 / ABOUT M1A1</div>
          <h2>From Roofing to Complete Restoration</h2>
          <div className="meta">ESTABLISHED 2019 · HQ HOUSTON TX</div>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:64, alignItems:"start"}} className="about-grid">
          <div>
            <p style={{fontSize:18, lineHeight:1.7, color:"var(--fg-dim)"}}>
              M1A1 Construction Services is a federal and commercial roofing contractor
              specializing in roofing systems, waterproofing, and envelope restoration for
              government facilities nationwide. Founded and led by a United States Marine Corps
              veteran, we bring mission-first discipline to every project — from single-facility
              re-roofs to multi-million dollar federal programs.
            </p>
            <p style={{fontSize:15, lineHeight:1.7, color:"var(--fg-dim)", marginTop: 20}}>
              M1A1 is a 100% Service-Disabled Veteran-Owned Small Business (CVE-verified), a
              registered SBA small business, a Texas Veterans Commission member, and a Texas
              VetHUB-certified enterprise. Our union workforce (Local Roofers 123) has delivered
              more than $10M in past performance for the FBI, VA, IRS, DEA, CBP, SSA, FAA,
              USCIS, and U.S. Department of State across 13+ states and U.S. territories.
            </p>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:0, border:"1px solid var(--rule)"}}>
            {[["STATES", "13+", "Contracts executed"],
              ["VALUE", "$10M+", "FY21-26 performance"],
              ["AGENCIES", "9+", "FBI · VA · IRS · DEA · CBP · SSA · FAA · USCIS · State"],
              ["CERT", "SDVOSB", "CVE verified"],
              ["CREW", "UNION", "Local Roofers 123"],
              ["RESPONSE", "24H", "Mission window"]].map(([k,v,s],i) => (
              <div key={i} style={{
                padding: 20, borderRight: i % 3 !== 2 ? "1px solid var(--rule)" : "none",
                borderBottom: i < 3 ? "1px solid var(--rule)" : "none",
                background: "var(--bg-card)",
              }}>
                <div style={{fontFamily:"var(--font-mono)", fontSize:9, letterSpacing:"0.2em", color:"var(--fg-muted)"}}>{k}</div>
                <div style={{fontFamily:"var(--font-display)", fontSize:28, color:"var(--accent)", marginTop:6, letterSpacing:"0.01em"}}>{v}</div>
                <div style={{fontSize:11, color:"var(--fg-dim)", marginTop:4}}>{s}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="photo-strip">
          {photos.map(([url, l], i) => (
            <div className="photo-cell" key={i} style={{backgroundImage: `url(${url})`}}>
              <div className="pc-tl">IMG-{String(i+1).padStart(3,"0")}</div>
              <div className="pc-label">{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ==================== ORIGIN ====================
function Origin() {
  const pillars = [
    ["01", "PROTECTION", "Safeguarding what matters most."],
    ["02", "STRENGTH", "Building with resilience and durability."],
    ["03", "BROTHERHOOD", "Commitment to team, clients, and community."],
    ["04", "MISSION-FIRST", "Getting the job done right, no matter what."],
  ];
  return (
    <section className="section" id="origin">
      <div className="container">
        <div className="sh">
          <div className="num">05 / ORIGIN</div>
          <h2>Our Name. Our Story. Our Purpose.</h2>
          <div className="meta">USMC · 2004–2014 · OIF · OEF · M1A1 ABRAMS</div>
        </div>

        <figure className="origin-photo">
          <img src="assets/mike-tank.jpg" alt="Mike Medina standing in front of his M1A1 Abrams tank during USMC service in Iraq and Afghanistan" loading="lazy" decoding="async" />
          <div className="op-class">
            <span>★ FILE-04 · DOSSIER · UNREDACTED</span>
            <span>02° 04° 26°</span>
          </div>
          <div className="op-tl">[ MEDINA · USMC · M1A1 ABRAMS ]</div>
          <div className="op-anno" aria-hidden="true">
            <span className="op-anno-dot" />
            <span className="op-anno-line" />
            <span className="op-anno-label">“BEAST MODE” · TANK CALLSIGN</span>
          </div>
          <div className="op-bl">★ OPERATION IRAQI FREEDOM · OPERATION ENDURING FREEDOM</div>
          <div className="op-scan" aria-hidden="true" />
          <div className="crosshair tl" /><div className="crosshair tr" />
          <div className="crosshair bl" /><div className="crosshair br" />
        </figure>

        <div className="origin-dossier">
          {[
            ["CALLSIGN", "BEAST MODE"],
            ["OPERATOR", "MIKE MEDINA"],
            ["BRANCH", "USMC"],
            ["THEATER", "OIF · OEF"],
            ["ASSET", "M1A1 ABRAMS"],
            ["TOUR", "2004 — 2014"],
          ].map(([k, v]) => (
            <div className="dossier-cell" key={k}>
              <div className="dc-key">{k}</div>
              <div className="dc-val">{v}</div>
            </div>
          ))}
        </div>

        <div className="origin-timeline">
          <div className="tl-axis-label">SERVICE TIMELINE</div>
          <div className="tl-track-wrap">
            <div className="tl-track" />
            {[
              ["2004", "ENLISTED", "UNITED STATES MARINE CORPS"],
              ["2014", "DISCHARGED", "SERVICE-DISABLED VETERAN"],
              ["2022", "FOUNDED", "M1A1 CONSTRUCTION SERVICES"],
            ].map(([y, k, v]) => (
              <div className="tl-node" key={y}>
                <div className="tl-dot" />
                <div className="tl-year">{y}</div>
                <div className="tl-label">{k}</div>
                <div className="tl-sub">{v}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="origin-prose">
          <div>
            <p className="lede">M1A1 Construction Services was founded on a name that carries meaning, history, and purpose.</p>
            <p>Our owner and CEO, Mike Medina, is a retired, service-disabled United States Marine Corps veteran who served from 2004 to 2014. During his service, Mike deployed in support of both the Iraq War (Operation Iraqi Freedom) and the Afghanistan War (Operation Enduring Freedom), operating and later commanding an M1A1 Abrams tank — one of the most powerful and reliable pieces of equipment on the battlefield.</p>
          </div>
          <div>
            <p>That tank wasn’t just a machine — it was protection. It was strength. It was the difference between life and death. It carried Mike and his fellow Marines through combat, shielding them in some of the most dangerous environments imaginable.</p>
            <p>When Mike transitioned into the construction industry and founded M1A1 Construction Services in 2022, he chose a name that reflects that experience and the values it represents.</p>
          </div>
        </div>

        <div className="origin-pillars-header">THE “M1A1” STANDS AS A SYMBOL OF</div>
        <div className="caps origin-pillars">
          {pillars.map(([n, h, d]) => (
            <div className="cap" key={n} style={{cursor:"default"}}>
              <div className="n">{n}</div>
              <h3>{h}</h3>
              <p>{d}</p>
            </div>
          ))}
        </div>

        <div className="origin-coda">
          <p>At M1A1 Construction Services, we operate with the same discipline, accountability, and attention to detail that Mike learned in the Marine Corps. Every project is approached with a mission-focused mindset — because we know what it means when people depend on you.</p>
          <p className="origin-pull">We don’t just build structures. We build trust, reliability, and lasting relationships — just like the foundation Mike built with his fellow Marines.</p>
        </div>
      </div>
    </section>
  );
}

// ==================== LEADERSHIP ====================
function Leadership() {
  const team = [
    {
      name: "Mike Medina",
      role: "Founder · Chief Executive Officer",
      tag: "★ USMC · Semper Fidelis",
      badge: "[ MIKE MEDINA · USMC ]",
      rank: "★ FOUNDER & CEO",
      photo: "assets/mike-medina.jpg",
      photoPos: "center 15%",
      quote: "Mission-first. On time. On spec. Every project, every crew, every day.",
      bio: "Mike Medina, Owner and CEO of M1A1 Construction Services, built the company on the same principles that guided him through ten years of service in the United States Marine Corps—discipline, accountability, and unwavering leadership. As a Marine, Mike operated and relied on the M1A1 Abrams tank, a symbol of strength, protection, and trust among those who served beside him. That experience became the foundation for the company’s name and mission: to protect, perform, and deliver under pressure. After his military career, Mike carried that same mindset into the construction industry, rising to lead multimillion-dollar projects and national sales teams before launching M1A1 Construction Services. Today, he leads with a mission-first mentality, building not just structures, but a company rooted in service, resilience, and a commitment to doing the job right the first time.",
    },
    {
      name: "Nikki Daily",
      role: "General Manager",
      tag: "★ M1A1 Construction Services, LLC",
      badge: "[ NIKKI · GM ]",
      rank: "★ GENERAL MANAGER",
      photo: "assets/nikki-daily.jpg",
      photoPos: "center 20%",
      quote: "Relationships are the contract before the contract.",
      bio: "Nikki Daily serves as General Manager of M1A1 Construction Services, where she leads nationwide commercial and federal operations and supports the company’s strategic growth. With extensive experience in roofing, waterproofing, and construction management, she oversees project budgets, contracts, compliance, and client relations from pre-construction through completion. Nikki has held leadership roles across multiple construction organizations, where she strengthened operational systems and improved project execution. She is known for her detail-driven approach, strong leadership, and commitment to delivering high-quality results while supporting both her team and the communities she serves.",
    },
    {
      name: "Ben Medina",
      role: "Project Manager",
      tag: "★ Project Management",
      badge: "[ BEN MEDINA · PM ]",
      rank: "★ PROJECT MANAGER",
      photo: null,
      quote: "Every crew. Every day. Every spec.",
      bio: "As Project Manager at M1A1 Construction Services, Ben Medina leads field operations across all service locations. He is responsible for the full project lifecycle—from estimating and proposal development to coordinating trades, execution, and closeout. Ben oversees crew deployment, quality assurance and quality control, safety compliance, and daily jobsite operations, ensuring every project meets strict federal, local, and commercial standards. Known for his hands-on leadership and attention to detail, Ben plays a critical role in delivering projects on schedule and to the highest level of quality.",
    },
  ];
  return (
    <section className="section" id="leadership">
      <div className="container">
        <div className="sh">
          <div className="num">06 / COMMAND</div>
          <h2>Leadership Team</h2>
          <div className="meta">FOUNDER · GM · PM</div>
        </div>
        <div className="command-grid">
          {team.map((m, i) => (
            <div className="command-card" key={i}>
              <div
                className={"command-photo" + (m.photo ? "" : " no-photo")}
                style={m.photo ? {
                  backgroundImage: `linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%), url(${m.photo})`,
                  backgroundPosition: `center, ${m.photoPos || "center"}`,
                  backgroundSize: "cover",
                } : {}}
              >
                <span className="ph-label">{m.badge}</span>
                <span className="ph-rank">{m.rank}</span>
                <div className="crosshair tl" /><div className="crosshair tr" />
                <div className="crosshair bl" /><div className="crosshair br" />
                {!m.photo && <div className="photo-pending">◆ HEADSHOT · PENDING</div>}
              </div>
              <div className="command-body">
                <div className="rank-tag">{m.tag}</div>
                <h3>{m.name}</h3>
                <div className="role">{m.role}</div>
                <div className="ceo-quote" style={{margin:"16px 0"}}>{m.quote}</div>
                <p>{m.bio}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ==================== CAREERS ====================
function Careers() {
  const roles = [
    { title: "Roofing Foreman", loc: "Houston, TX · Nationwide travel", type: "Full-time · Union", tags: ["FIELD", "UNION LOCAL 123"] },
    { title: "Commercial Roofer", loc: "Multiple locations", type: "Full-time · Union", tags: ["FIELD", "EXPERIENCED"] },
    { title: "Project Manager · Federal", loc: "Houston, TX", type: "Full-time · Exempt", tags: ["OFFICE/FIELD", "CLEARANCE A+"] },
    { title: "Superintendent", loc: "Houston / DFW", type: "Full-time", tags: ["FIELD", "5+ YRS"] },
    { title: "Estimator · Building Envelope", loc: "Houston, TX", type: "Full-time", tags: ["OFFICE", "FED EXPERIENCE"] },
  ];
  return (
    <section className="section" id="careers">
      <div className="container">
        <div className="sh">
          <div className="num">08 / ENLIST</div>
          <h2>Careers at M1A1</h2>
          <div className="meta">NOW RECRUITING · VETERANS ENCOURAGED</div>
        </div>
        <div className="careers-wrap">
          <div className="careers-intro">
            <p style={{fontSize:17, lineHeight:1.7, color:"var(--fg-dim)"}}>
              We hire for character first, skill second, and teach the rest. If you've served —
              or you bring that same discipline to the field — there's a spot on the crew.
              M1A1 runs a union workforce (Local Roofers 123), pays competitive wages, and
              deploys teams to federal, military, and commercial projects nationwide.
            </p>
            <div className="careers-bens">
              <div><div className="cb-k">★ Pay</div><div className="cb-v">Above scale</div></div>
              <div><div className="cb-k">★ Travel</div><div className="cb-v">Per diem + lodging</div></div>
              <div><div className="cb-k">★ Benefits</div><div className="cb-v">Union package</div></div>
              <div><div className="cb-k">★ Priority</div><div className="cb-v">Veterans first</div></div>
            </div>
            <a href="mailto:admin@m1a1construction.com?subject=Careers%20Application" className="btn primary" style={{marginTop:24}}>
              Send Your Packet <span className="arrow" />
            </a>
          </div>
          <div className="careers-list">
            <div className="careers-list-head">◆ OPEN BILLETS · {roles.length} POSITIONS</div>
            {roles.map((r, i) => (
              <a key={i} href="mailto:admin@m1a1construction.com?subject=Application%3A%20" className="career-row">
                <div className="career-title">
                  <span className="career-n">{String(i+1).padStart(2,"0")}</span>
                  <div>
                    <div className="ct-name">{r.title}</div>
                    <div className="ct-meta">{r.loc} · {r.type}</div>
                  </div>
                </div>
                <div className="career-tags">
                  {r.tags.map((t,j) => <span key={j} className="career-tag">{t}</span>)}
                  <span className="career-arrow">→</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ==================== CONTACT ====================
function Contact() {
  const [sent, setSent] = useState(false);
  return (
    <section className="section" id="contact" style={{background:"var(--bg-elev)"}}>
      <div className="container">
        <div className="sh">
          <div className="num">07 / DEPLOY A MISSION</div>
          <h2>Request Your Free Assessment</h2>
          <div className="meta">RESPONSE · 24H · CT</div>
        </div>
        <div className="contact-grid">
          <div className="contact-info">
            <div className="line">
              <span className="k">◆ Mike Medina</span>
              <span className="v">Owner & CEO<span className="sub">mike@m1a1construction.com · (469) 438-4150</span></span>
            </div>
            <div className="line">
              <span className="k">◆ Nikki Daily</span>
              <span className="v">General Manager<span className="sub">nikki@m1a1construction.com · (630) 947-9495</span></span>
            </div>
            <div className="line">
              <span className="k">◆ Admin</span>
              <span className="v">General Inquiries<span className="sub">admin@m1a1construction.com</span></span>
            </div>
            <div className="line">
              <span className="k">◆ HQ</span>
              <span className="v">Houston, Texas<span className="sub">Operating nationwide · CONUS + HI + AK + USVI</span></span>
            </div>
          </div>

          <form className="form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
            <div className="form-head">★ Request Intel · Free Quote</div>
            {sent ? (
              <div style={{padding:"40px 20px", textAlign:"center"}}>
                <div style={{fontFamily:"var(--font-mono)", fontSize:11, color:"var(--accent)", letterSpacing:"0.2em", marginBottom:12}}>
                  ◆ TRANSMISSION RECEIVED
                </div>
                <div style={{fontFamily:"var(--font-display)", fontSize:22, textTransform:"uppercase"}}>
                  Orders acknowledged.
                </div>
                <div style={{color:"var(--fg-dim)", fontSize:13, marginTop:8}}>
                  A team member will respond within 24 hours.
                </div>
              </div>
            ) : (
              <>
                <div className="form-row">
                  <div className="form-field">
                    <label>First Name *</label>
                    <input type="text" required />
                  </div>
                  <div className="form-field">
                    <label>Last Name *</label>
                    <input type="text" required />
                  </div>
                </div>
                <div className="form-row">
                  <div className="form-field">
                    <label>Email *</label>
                    <input type="email" required />
                  </div>
                  <div className="form-field">
                    <label>Phone</label>
                    <input type="tel" />
                  </div>
                </div>
                <div className="form-field" style={{marginBottom:16}}>
                  <label>Property Type</label>
                  <select>
                    <option>Select theater...</option>
                    <option>Federal Facility</option>
                    <option>Military Base</option>
                    <option>Commercial</option>
                    <option>Residential</option>
                  </select>
                </div>
                <div className="form-field" style={{marginBottom:20}}>
                  <label>Mission Brief *</label>
                  <textarea required placeholder="Describe the scope and theater..."></textarea>
                </div>
                <button type="submit" className="btn primary" style={{width:"100%", justifyContent:"center"}}>
                  Send Transmission <span className="arrow" />
                </button>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

// ==================== FOOTER ====================
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div>
          <div className="nav-logo" style={{marginBottom:16}}>
            <img src="m1a1-logo.png" alt="M1A1 Construction Services" style={{height: "36px", width: "auto"}} />
          </div>
          <p className="footer-bio">
            A nationally trusted, service-disabled veteran-owned roofing and waterproofing
            contractor. Federal roofing. Building envelope. Built on honor.
          </p>
        </div>
        <div className="footer-col">
          <h5>Operations</h5>
          <ul>
            <li><a href="#capabilities">Roofing Systems</a></li>
            <li><a href="#capabilities">Waterproofing</a></li>
            <li><a href="#capabilities">Reflective Coatings</a></li>
            <li><a href="#capabilities">Federal Subcontracting</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Company</h5>
          <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#origin">Our Story</a></li>
            <li><a href="#leadership">Leadership</a></li>
            <li><a href="#performance">Past Performance</a></li>
            <li><a href="#certifications">Certifications</a></li>
            <li><a href="#careers">Careers</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Connect</h5>
          <ul>
            <li><a href="#contact">Contact</a></li>
            <li><a href="mailto:admin@m1a1construction.com">admin@m1a1construction.com</a></li>
            <li><a href="tel:+14694384150">(469) 438-4150</a></li>
            <li><a href="https://www.linkedin.com/company/m1a1-construction-services/posts/?feedView=all" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
            <li><a href="https://www.instagram.com/m1a1construction/" target="_blank" rel="noopener noreferrer">Instagram</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>★ M1A1 Construction Services, LLC · All Rights Reserved © 2026</span>
        <span>SEMPER FIDELIS · ALWAYS BUILDING</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Certifications, About, Origin, Leadership, Careers, Contact, Footer });