/* global React, Icon, Icons */

/* ---------- Philosophy / Intro band ---------- */
function Philosophy() {
  return (
    <section className="philosophy" id="about">
      <div className="container">
        <div className="grid">
          <div>
            <span className="section-eyebrow">Our philosophy</span>
            <h2>
              We make<br/>great signs.<br/>
              Then we<br/><span className="plus">plus</span> each one.
            </h2>
          </div>
          <div>
            <p>
              At Your Sign Guy, we believe a sign is more than just a piece of hardware —
              it's the face of your business and the first impression you make on your
              community.
            </p>
            <p>
              Based in Erie, Colorado, and proudly serving the entire Front Range, we built
              our reputation on a simple but powerful idea: <strong>we make great signs, and
              then we look "plus" each sign we create.</strong> Every project gets elevated
              past the brief.
            </p>
            <p>
              We aren't just a sign shop — we're your creative partners. No cookie-cutter
              templates. Whether you're a startup needing your first storefront or an
              established corporation needing a fleet of vehicle wraps, you get the same
              attention to craft and the same one-shop accountability.
            </p>
            <span className="signoff">Michael Zaun · Owner, Your Sign Guy LLC</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Full-service process band ---------- */
function ProcessBand() {
  const steps = [
    { num: '01', icon: Icons.Compass, title: 'Survey & Estimate', desc: 'Precise site evaluations to ensure the perfect fit — measured in person, not guessed from photos.' },
    { num: '02', icon: Icons.Pencil,  title: 'Design',             desc: 'Creative conceptualization that brings your brand to life. Real proofs, real revisions.' },
    { num: '03', icon: Icons.File,    title: 'Permitting',         desc: 'We handle the red tape and local regulations so you don\u2019t have to track down city hall.' },
    { num: '04', icon: Icons.Hammer,  title: 'Fabrication',        desc: 'Expert craftsmanship using high-quality materials in our shop. Built to last in Colorado weather.' },
    { num: '05', icon: Icons.Wrench,  title: 'Installation',       desc: 'Professional, secure, and polished final placement. We clean up after ourselves.' },
  ];
  return (
    <section className="process" id="process">
      <div className="container">
        <div className="header-row">
          <div>
            <span className="section-eyebrow">A full-service experience</span>
            <h2>One shop. One bill.<br/>One warranty.</h2>
          </div>
          <p className="intro-lede">
            Navigating signage is complex. We handle every step in‑house so you can focus
            on running your business while we run the logistics.
          </p>
        </div>
        <div className="steps">
          {steps.map(s => (
            <div className="step" key={s.num}>
              <Icon d={s.icon} size={28} className="ic"/>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Philosophy = Philosophy;
window.ProcessBand = ProcessBand;