// Services page, full categorized capabilities
//
// SCOPE (Jul 2026): this page sells the JOB: what we deliver, and the range of
// things we build. It deliberately no longer covers what the building is made
// of. Finishes/wainscot, doors and insulation moved to the Specs page
// (specs.jsx), which is now the single place the envelope is documented, along
// with the trim, panel and accessory pages of the brochure that were never on
// the site at all. The handoff sits under the build-sequence strip below.
// Don't re-add a panel, color, door or insulation section here.

const ServicesHero = ({ setRoute }) => (
  <section style={{ borderBottom: '1px solid var(--border)', position: 'relative' }}>
    <div className="grid-bg" style={{
      position: 'absolute', inset: 0, opacity: 0.4,
      maskImage: 'linear-gradient(to bottom, black, transparent)',
      WebkitMaskImage: 'linear-gradient(to bottom, black, transparent)',
    }}></div>
    <div className="page" style={{ position: 'relative', paddingTop: 80, paddingBottom: 80 }}>
      <SectionEyebrow id="services" label="What we build" />
      <h1 style={{ maxWidth: 1000 }}>
        Steel buildings to fit<br/>
        <span style={{ color: 'var(--fg-faint)' }}>every project.</span>
      </h1>
      <p style={{ marginTop: 32, maxWidth: 640, fontSize: 18 }}>
        Pre-engineered metal structures, custom-built and customer-designed.
        Quick to put up, durable, low-maintenance, and made with 100% American-made steel.
        From materials-only supply packages to complete turnkey builds.
      </p>

      {/* Category quick jump */}
      <div style={{ marginTop: 48, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        {[
          { href: 'delivery', label: 'How we deliver' },
          { href: 'residential', label: 'Residential' },
          { href: 'commercial', label: 'Commercial' },
          { href: 'specialty', label: 'Specialty & Industry' },
          { href: 'other', label: 'Other' },
        ].map(c => (
          <a
            key={c.href}
            href={`#${c.href}`}
            onClick={(e) => {
              e.preventDefault();
              document.getElementById(c.href)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }}
            className="btn"
          >
            {c.label}
            <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5 2 L5 8 M2 5 L5 8 L8 5" stroke="currentColor" strokeWidth="1.5"/></svg>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const CategoryHeader = ({ id, eyebrow, title, intro, kicker = 'CATEGORY' }) => (
  <div id={id} style={{ scrollMarginTop: 80, paddingTop: 96, paddingBottom: 48, borderTop: '1px solid var(--border)' }}>
    <div className="page">
      <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'start' }}>
        <div className="cat-sticky" style={{ position: 'sticky', top: 96 }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-faint)', letterSpacing: '0.08em' }}>
            {kicker}
          </div>
          <h2 style={{ marginTop: 14 }}>{title}</h2>
        </div>
        <div>
          <SectionEyebrow label={eyebrow} />
          <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--fg)' }}>{intro}</p>
        </div>
      </div>
    </div>
  </div>
);

const CapabilityCard = ({ idx, title, blurb, span = 1 }) => (
  <article
    className="lift"
    style={{
      gridColumn: `span ${span}`,
      border: '1px solid var(--border)',
      background: 'var(--bg-card)',
      padding: 24,
      display: 'flex', flexDirection: 'column', gap: 14,
      minHeight: 220,
    }}
  >
    <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'baseline' }}>
      <span className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>↗</span>
    </div>
    <h3 className="cap-card-title">{title}</h3>
    <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--fg-dim)' }}>{blurb}</p>
  </article>
);

const CategoryGrid = ({ items, prefix }) => (
  <div className="page" style={{ paddingBottom: 64 }}>
    <div className="mob-stack" style={{
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
    }}>
      {items.map((it, i) => (
        <CapabilityCard
          key={it.title}
          idx={`${prefix}.${String(i + 1).padStart(2, '0')}`}
          title={it.title}
          blurb={it.blurb}
          span={it.span}
        />
      ))}
    </div>
  </div>
);

// `clip` (a basename under assets/video) fills the media half with looping
// drone footage instead of a still. It plays while on screen rather than on
// hover, there's only one row in view at a time and nothing to point at.
const FeaturedRow = ({ idx, title, blurb, imgLabel, reversed, clip }) => (
  <div className="page" style={{ paddingBottom: 48 }}>
    <div className="mob-stack" style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
      border: '1px solid var(--border)', background: 'var(--bg-card)',
    }}>
      <div style={{ padding: 48, order: reversed ? 2 : 1, borderRight: reversed ? 'none' : '1px solid var(--border)', borderLeft: reversed ? '1px solid var(--border)' : 'none' }}>
        <span className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.08em' }}>FEATURED</span>
        <h3 className="featured-row-title" style={{ marginTop: 16 }}>{title}</h3>
        <p style={{ marginTop: 16, fontSize: 15, lineHeight: 1.55, color: 'var(--fg-dim)' }}>{blurb}</p>
      </div>
      <div style={{ order: reversed ? 1 : 2, minHeight: 320 }}>
        {clip ? (
          <LoopVideo src={clip} label={imgLabel} height="100%" style={{ height: '100%', border: 'none' }} />
        ) : (
          <ImgSlot label={imgLabel} height="100%" style={{ height: '100%', border: 'none' }} src="assets/img/image2.jpeg" />
        )}
      </div>
    </div>
  </div>
);

// The DELIVERY cards above list what we sell; this strip shows the same job in
// the order it actually happens, using photos off our own sites.
const BUILD_STAGES = [
  {
    n: '01', tag: 'FOUNDATION', slug: 'slab-pour-aerial',
    title: 'We pour the pad.',
    blurb: 'Site work, footers, anchor bolts, and a finished slab. Set square and level, because every dimension above it depends on this one.',
    alt: 'Concrete pump truck placing a building slab on a cleared pad',
  },
  {
    n: '02', tag: 'ERECTION', slug: 'frame-erection-white',
    title: 'The steel goes up.',
    blurb: 'Columns, rafters, and purlins set by our own crew. A clear-span frame this size goes up in days, not months.',
    alt: 'Crew setting steel columns and rafters with a telehandler and boom lift',
  },
  {
    n: '03', tag: 'FRAME OUT', slug: 'aerial-two-bay-frame',
    title: 'The frame tops out.',
    blurb: 'Full footprint standing, braced and plumbed. This is where you can walk the building and see your floor plan for the first time.',
    alt: 'Aerial view of a completed steel building frame with bracing in place',
  },
  {
    n: '04', tag: 'DRY IN', slug: 'hangar-bay-open',
    title: 'Sheeted and closed in.',
    blurb: 'Roof and wall panels, insulation, trim, and the doors hung. From a bare pad to a building you can lock up behind you.',
    alt: 'Steel hangar sheeted in, with a large open bay door and insulated liner',
  },
];

const BuildSequence = ({ setRoute }) => (
  <section style={{ borderTop: '1px solid var(--border)' }} className="section">
    <div className="page">
      <SectionEyebrow label="On our sites" />
      <h2 style={{ maxWidth: 720 }}>How a building goes up.</h2>
      <p style={{ marginTop: 16, maxWidth: 620, fontSize: 16, color: 'var(--fg-dim)' }}>
        This is the process.
      </p>

      <div className="mob-2col" style={{
        marginTop: 48,
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
        border: '1px solid var(--border)', background: 'var(--bg-card)',
      }}>
        {BUILD_STAGES.map((s, i) => (
          <div
            key={s.n}
            className="lift"
            style={{
              display: 'flex', flexDirection: 'column',
              borderRight: i < BUILD_STAGES.length - 1 ? '1px solid var(--border)' : 'none',
            }}
          >
            <ImgSlot
              slug={s.slug}
              label={s.alt}
              height={240}
              style={{ border: 'none', borderBottom: '1px solid var(--border)' }}
            />
            <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', color: 'var(--fg-faint)' }}>
                <span style={{ color: 'var(--accent)' }}>{s.n}</span> · {s.tag}
              </div>
              <h3 className="cap-card-title">{s.title}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--fg-dim)' }}>{s.blurb}</p>
            </div>
          </div>
        ))}
      </div>

      {/* Handoff to /specs. This sits at the end of the process strip on
          purpose: someone who has just watched the building go up stage by
          stage is exactly the person who wants to know what the panels, doors
          and insulation actually are. That used to be three more sections on
          this page; it is a whole page of its own now. */}
      <div className="mob-stack" style={{
        marginTop: 32, padding: '32px 36px',
        border: '1px solid var(--border)', background: 'var(--bg-card)',
        display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center',
      }}>
        <div>
          <span className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--accent)' }}>
            SPECS · THE BUILDING ITSELF
          </span>
          <h3 className="cap-card-title" style={{ marginTop: 12, fontSize: 20 }}>
            What it&rsquo;s made of, part by part.
          </h3>
          <p style={{ margin: '12px 0 0', maxWidth: 620, fontSize: 14.5, lineHeight: 1.55, color: 'var(--fg-dim)' }}>
            Frames, panels, doors, insulation, and the full color charts.
          </p>
        </div>
        <button className="btn btn-primary btn-lg" onClick={() => setRoute('specs')} style={{ justifySelf: 'start' }}>
          See the full spec
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 6 L9 6 M6 3 L9 6 L6 9" stroke="currentColor" strokeWidth="1.6" /></svg>
        </button>
      </div>
    </div>
  </section>
);

//. REMOVED (Jul 2026): Finishes, Doors and Insulation ,
// All three now live on the Specs page (specs.jsx), alongside the brochure's
// trim/closure and accessory pages that had never been on the site. They were
// lifted whole, not rewritten, so nothing was lost: FIG. 05 Panels (with the
// GenStone wainscot block and the color chart), FIG. 06 Doors (with the Janus
// tiers), FIG. 08 Insulation. The four-card "rest of the envelope" strip that
// closed the old Insulation section is now FIG. 07 Accessories, expanded to the
// brochure's full pp. 9-10 list.
//
// STEEL_COLORS and JANUS_DOOR_COLORS stay in components.jsx and are read by
// specs.jsx and quote.jsx; nothing on this page needs them any more.

//. HOW WE DELIVER ,
// Delivery services in spectrum order: materials-only → complete turnkey.
const DELIVERY = [
  { title: 'Custom Floor Plan Drafting',
    blurb: 'Bring us a sketch, leave with buildable plans. In-house CAD drafting tailored to your lot, your use, and your budget.' },
  { title: 'Metal Building Supply Packages',
    blurb: 'Materials only: a complete engineered steel building kit, delivered to your site and ready for your own crew to erect.' },
  { title: 'Concrete & Foundations',
    blurb: 'Site pads, footers, slabs, and columns, poured and finished right. A good build starts with the foundation.' },
  { title: 'Building Erection',
    blurb: 'Experienced crews put your steel up square, plumb, safe, and on schedule.' },
  { title: 'Turnkey Design-Build Projects',
    blurb: 'One contract from concept to keys. We design, engineer, pour, erect, and finish your building, you show up when it\'s done.' },
];

//. RESIDENTIAL ,
const RESIDENTIAL = [
  { title: 'Steel Building Kits',
    blurb: 'Looking to add square footage to your property? Pre-engineered residential building kits, an economical, durable choice.' },
  { title: 'Workshops',
    blurb: 'Extra storage, a hobby workshop, or a place to run your business. Expert craftsmanship, a valuable addition for years.' },
  { title: 'Steel Building Barns',
    blurb: 'A reliable, hassle-free way to safeguard livestock, equipment, and farm essentials. Affordable and low-maintenance.' },
  { title: 'Garages',
    blurb: 'Budget-friendly protection for cars, RVs, boats, ATVs, and outdoor equipment. Excellent protection, minimal upkeep.' },
  { title: 'Custom Steel Buildings',
    blurb: 'From storage spaces to commercial buildings, customize with metal garage doors, windows, and more.' },
  { title: 'Sheds',
    blurb: 'Fully customizable, extra storage, workspace, or a place to park your vehicles. Tailored to your needs.' },
  { title: 'Outbuildings',
    blurb: 'Top-of-the-line prefab metal building kits made with 100% American-made steel. Residential or commercial.' },
];

//. COMMERCIAL , 
const COMMERCIAL = [
  { title: 'Industrial Buildings',
    blurb: 'Highly adaptable, cost-effective, and energy-efficient prefab metal building design for different industrial needs.' },
  { title: 'Retail Buildings',
    blurb: 'Construct your physical store at a more cost-effective price than conventional buildings. Steel frames win on price and durability.' },
  { title: 'Office Spaces',
    blurb: 'A cost-effective way to construct your office building. Pre-engineered metal: durable, practical, reliable, affordable.' },
  { title: 'Warehouses',
    blurb: 'The pre-engineered metal building design is the way to go. Excellent flexibility, cost-effectiveness, and long-lasting durability.' },
  { title: 'Mini Storage',
    blurb: 'Clear-span design allows spans of up to 200 feet without interior uprights, spacious, versatile, multi-use.' },
  { title: 'Manufacturing',
    blurb: 'Custom-engineered steel buildings that cater to the unique requirements of manufacturing plants.' },
  { title: 'Climate Controlled Storage',
    blurb: 'Top-quality climate-controlled steel buildings, a wide range of options to suit any purpose.' },
  { title: 'Strip Malls',
    blurb: 'Flexible expertise, we\'ll help you create the ideal building for your strip mall, built to last.' },
];

//. SPECIALTY & INDUSTRY , 
const SPECIALTY = [
  { title: 'Horse Arenas',
    blurb: 'Clear-span framing for the column-free, open-space interiors and high ceilings riding arenas need.' },
  { title: 'Horse Stables',
    blurb: 'Fully customizable steel horse barns and stables, constructed with 100% American-made steel.' },
  { title: 'Hay Storage',
    blurb: 'Custom-built steel hay storage designed with the best quality materials. Long-lasting and durable.' },
  { title: 'Agricultural',
    blurb: 'Cost-effective, hassle-free protection for farm livestock, machinery, supplies, and assets.' },
  { title: 'Aircraft Hangars',
    blurb: 'Clear-span framing, spacious open interiors with no columns, and high ceilings, a safe and stable environment.' },
  { title: 'Churches',
    blurb: 'Fully customizable worship and fellowship buildings, exceptional strength, durability, and affordable prices.' },
  { title: 'Schools',
    blurb: 'Charter schools, daycares, and higher learning institutions. Incredibly versatile and completely customizable.' },
  { title: 'Day Care',
    blurb: 'Custom-engineered steel buildings to meet your Day Care\'s unique needs. Tailored to your specifications.' },
  { title: 'Fire Stations',
    blurb: 'Metal fire station buildings, fully customizable, strong, durable, and affordable.' },
  { title: 'Fitness Centers',
    blurb: '100% made in America, clear-spanning hundreds of square feet, weight rooms, classrooms, and more.' },
  { title: 'Gymnasium',
    blurb: 'Tailor-made steel building kits ideal for constructing gymnasium facilities.' },
  { title: 'Recreational',
    blurb: 'Clear-span design up to 200 feet without interior uprights, a fantastic choice for recreational spaces.' },
  { title: 'Sports Facilities',
    blurb: 'A wide range of sport facility buildings that cater to any specific need you may have.' },
  { title: 'Batting Cages',
    blurb: 'Indoor baseball batting cages so coaches and players can improve their game without weather interference.' },
  { title: 'Casinos',
    blurb: 'Fully customizable to your exact theme, with various eye-catching facade options, classic or modern.' },
  { title: 'Brewery',
    blurb: 'High clearances and easily sanitized spaces, the ideal environment for your brewing needs.' },
  { title: 'Car Wash',
    blurb: 'Easy-to-assemble kits, quickly have the perfect building for your car wash business.' },
  { title: 'Auto Shops',
    blurb: 'High clearances and clear-span space, room to run a professional multi-bay auto shop.' },
  { title: 'Medical Buildings',
    blurb: 'Effortless, rapid assembly. Steel is highly convenient when it comes to cleaning and sanitizing.' },
  { title: 'Government',
    blurb: 'Durable, economical pre-engineered structures for offices, warehouses, or storage facilities.' },
  { title: 'Institutional',
    blurb: 'Premium-quality structures for medical facilities, government offices, and beyond.' },
  { title: 'RV Storage',
    blurb: 'Protect your investment in style, the perfect solution for long-term RV storage.' },
  { title: 'Golf Cart Storage',
    blurb: 'Reliable, durable storage, fire and water-resistant, safe for many years.' },
];

const Services = ({ setRoute }) => (
  <div className="page-anim">
    <ServicesHero setRoute={setRoute} />

    {/*. HOW WE DELIVER, */}
    <CategoryHeader
      id="delivery"
      kicker="SERVICES"
      title="How we deliver."
      eyebrow="Supply only, full turnkey, or anywhere in between"
      intro="Take just the materials package and put it up with your own crew, or turn the whole job over to us. Drafting, concrete, erection, doors, finish, we handle all of it."
    />
    <CategoryGrid items={DELIVERY} prefix="D" />
    <BuildSequence setRoute={setRoute} />

    {/*. RESIDENTIAL, */}
    <CategoryHeader
      id="residential"
      title="Residential."
      eyebrow="Why choose residential steel buildings?"
      intro="Are you looking for a quick, durable solution for your residential building needs? Unlike traditional buildings that take a long time to construct, our pre-engineered steel buildings are quick to put up and highly durable. They withstand harsh weather and the day-to-day elements of climates across the US. They are pest and termite resistant, and not very susceptible to mold and mildew."
    />
    <FeaturedRow
      idx="01.A"
      title="Barndominium, your home, in steel."
      blurb="Looking for a top-quality steel frame barndominium kit that lets you build your dream home exactly how you want it? Our kits give you complete flexibility and control over your project, with a range of customization options to make sure your new home is everything you've ever wanted."
      imgLabel="Barndominium with wraparound porch, aerial pass on a foggy morning"
      clip="barndominium-fog"
    />
    <CategoryGrid items={RESIDENTIAL} prefix="R" />

    {/*. COMMERCIAL, */}
    <CategoryHeader
      id="commercial"
      title="Commercial."
      eyebrow="Commercial steel buildings designed for you"
      intro="In the market for a new warehouse, office, or commercial building? Our facilities come in various sizes and can be customized to meet your specific needs. They are incredibly durable and stronger than buildings made of wood or other materials, low-maintenance with precise span framing, providing maximum interior space and flexibility in designing the inside."
    />
    <FeaturedRow
      idx="02.A"
      title="Shops and warehouses, put up fast."
      blurb="Clear-span framing gives you the whole interior, no columns in the middle of your floor. Windload-rated roll-up doors where you want them, so the opening passes code instead of holding up the permit, the office end finished to match, and a building that goes up in a fraction of the time a conventional shop takes. Same steel whether it's a two-bay shop or a distribution warehouse."
      imgLabel="Ranch workshop with roll-up doors, aerial pass"
      clip="ranch-workshop"
      reversed
    />
    <CategoryGrid items={COMMERCIAL} prefix="C" />

    {/*. SPECIALTY, */}
    <CategoryHeader
      id="specialty"
      title="Specialty & Industry."
      eyebrow="& so much more"
      intro="From riding arenas to fire stations, breweries to schools, our clear-span design and customizable kits make a Chambliss steel building the right answer for an enormous range of uses. Below is what we've built. If you don't see your use case listed, just ask. We approach every project with creative enthusiasm."
    />
    <FeaturedRow
      idx="03.A"
      title="Aircraft hangars, doors and all."
      blurb="Clear-span framing means no columns between your aircraft and the door, and we hang the door too, bi-fold or hydraulic, up to 38,000 lb. High ceilings, open interior, and an envelope that holds up to what Florida weather does to an airframe."
      imgLabel="Aircraft hangar with bi-fold door, aerial pass"
      clip="hangar-aerial"
    />
    <CategoryGrid items={SPECIALTY} prefix="S" />

    {/*. OTHER / EXPERTISE, */}
    <section id="other" style={{ scrollMarginTop: 80, borderTop: '1px solid var(--border)' }} className="section">
      <div className="page">
        <SectionEyebrow label="Other expertise" />
        <h2 style={{ maxWidth: 720, marginBottom: 32 }}>And the work that doesn't fit a category.</h2>
        <p style={{ maxWidth: 620, fontSize: 16, marginBottom: 48 }}>
          We are a family-owned business, and we take on custom and one-off projects regularly.
          If it is over 3,500 sq ft and made of steel, we would be glad to talk it through
          with you.
        </p>
        <div className="mob-2col" style={{
          display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)',
          border: '1px solid var(--border)',
        }}>
          {[
            'Strip malls', 'Day cares', 'Government', 'Batting cages', 'Brewery',
            'Casinos', 'Churches', 'Fire stations', 'Schools', 'Manufacturing',
            'Recreational', 'Sports facilities',
          ].map((t, i) => (
            <div key={t} style={{
              padding: 24,
              borderRight: (i % 6 !== 5) ? '1px solid var(--border)' : 'none',
              borderBottom: i < 6 ? '1px solid var(--border)' : 'none',
              fontSize: 14, color: 'var(--fg-dim)',
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <span style={{ color: 'var(--accent)', fontFamily: 'Geist Mono, monospace', fontSize: 10 }}>/</span>
              {t}
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* CTA */}
    <section className="section">
      <div className="page">
        <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 64, alignItems: 'end' }}>
          <h2 style={{ maxWidth: 720 }}>
            Ready to get started?<br/>
            <span style={{ color: 'var(--fg-faint)' }}>We're ready to start working with you today.</span>
          </h2>
          <button className="btn btn-primary btn-lg" onClick={() => setRoute('quote')}>
            Get a quote
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 6 L9 6 M6 3 L9 6 L6 9" stroke="currentColor" strokeWidth="1.6"/></svg>
          </button>
        </div>
      </div>
    </section>
  </div>
);

Object.assign(window, { Services });