// pages.jsx — page components for Aimco Development Group prototype // Exports each page to window so the main app can route to them. const { useState, useEffect, useRef } = React; // ─── Shared bits ──────────────────────────────────────────────────────────── const PHONE = '409.221.2599'; const PHONE_HREF = 'tel:+14092212599'; const EMAIL = 'hello@aimcodevgroup.com'; const ADDRESS = 'Jasper, Texas 75951'; // Unsplash image helper — keep query params minimal for crispness const img = (id, w = 1600) => `https://images.unsplash.com/${id}?auto=format&fit=crop&w=${w}&q=80`; const HOME_PHOTOS = { hero1: 'photo-1568605114967-8130f3a36994', // modern home exterior hero2: 'photo-1600585154340-be6161a56a0c', // home dusk hero3: 'photo-1564013799919-ab600027ffc6', // craftsman roof1: 'photo-1632823469850-1b7b1e8b7e6e', // shingles close-up (fallback below) roof2: 'photo-1605276374104-dee2a0ed3cd6', // roofer at work roof3: 'photo-1558618666-fcd25c85cd64', // roof eaves pines: 'photo-1502082553048-f009c37129b9', // pines / forest framing: 'photo-1503387762-592deb58ef4e', // framing interior: 'photo-1600566753190-17f0baa2a6c3', // interior porch: 'photo-1600607687939-ce8a6c25118c', // covered porch kitchen: 'photo-1600585154526-990dced4db0d', // kitchen bath: 'photo-1600210492493-0946911123ea', // bath founder: 'photo-1500382017468-9049fed747ef', // east tx field team: 'photo-1581094271901-8022df4466f9', // workers sky: 'photo-1500382017468-9049fed747ef', }; // ─── Reusable UI ──────────────────────────────────────────────────────────── function SectionLabel({ children }) { return (

{children}

); } function PrimaryCTA({ children, href = '#contact', className = '', onClick }) { return ( {children} ); } function SecondaryCTA({ children, href, className = '' }) { return ( {children} ); } function TrustBadge({ k, v }) { return (

{k}

{v}

); } function PhotoPlaceholder({ ratio = '4/3', caption, src }) { return (

{src ? (

{ e.target.style.display = 'none'; }} /> ) : null} {!src && (

{caption || 'photo'}

)}

); } // ─── HOME ─────────────────────────────────────────────────────────────────── function HomePage({ heroVariant }) { return (

{heroVariant === 'editorial' && } {heroVariant === 'split' && } {heroVariant === 'fullbleed' && } {/* Trust strip */}

{/* Two services */}

What we build

Two trades. One standard.

From a new roof on the family home to a development that reshapes a corner of the county — same crew, same care, same handshake at the end.

{/* Featured project gallery preview */}

Recent work

Built around Jasper.

See full gallery →

{/* Founder pull quote */}

From the founders

“Aimco was built on Texas rural roots — disciplined planning, trusted partnerships, and the belief that what we build today should still serve the community fifty years from now.”

Texas Rural Roots — Founders, Aimco Development Group

); } function HeroEditorial() { return (

Jasper, Texas · Est. 2014

Custom homes &
quality roofing
in East Texas.

Aimco Development Group turns vision into build-ready developments — one roof, one home, one community at a time.

Get a free quote {PHONE}

The Austin Plan1,690 sqft

); } function HeroSplit() { return (

Jasper, TX · Roofing & Custom Homes

Built honest. Built to last.

Custom homes, roofing, and land development across East Texas. Local crews. Real timelines. No surprises.

Get a free quote {PHONE}

Recent build

European-style 3-bed, FM 1007

); } function HeroFullBleed() { return (

Jasper, Texas · Est. 2014

Custom homes & quality roofing in East Texas.

Get a free quote {PHONE}

); } function ServiceCard({ tag, title, body, bullets, href, src }) { return (

{tag}

{title}

{body}

Learn more →

); } function TestimonialsStrip() { const t = [ { name: 'Janet R.', town: 'Jasper', stars: 5, text: 'After the storm last spring, Aimco had our roof inspected the same day and replaced inside two weeks. Fair price, no nonsense.' }, { name: 'Mark & Lisa H.', town: 'Sam Rayburn', stars: 5, text: 'They built our Austin Plan from a clearing on our property. Walked us through every step. Move-in was right on schedule.' }, { name: 'Diane O.', town: 'Buna', stars: 5, text: 'Honest people. They told me my roof had three more years in it instead of selling me a job I didn’t need. We’ll call them when it’s time.' }, ]; return (

What neighbors say

A handshake still means something here.

{t.map((q, i) => )}

); } function ReviewCard({ name, town, stars, text }) { return (

{[...Array(5)].map((_, i) => ( ))}

“{text}”

{name} {town}, TX

); } function FooterCTA() { return (

Ready to start?

Let’s walk the property.

Free, no-obligation consultation. We come to you, anywhere within 50 miles of Jasper.

{PHONE} Request a quote

); } // ─── ROOFING ──────────────────────────────────────────────────────────────── function RoofingPage() { return (

What we do

Three ways we work on roofs.

Why choose us

Local crews. Real warranties. Insurance, handled.

0{i+1}

{k}

{v}

); } function BeforeAfterSection() { return (

Before & after

Storm damage to weather-tight, in 48 hours.

{[ { before: HOME_PHOTOS.framing, after: HOME_PHOTOS.roof3, label: 'Hail damage · Buna' }, { before: HOME_PHOTOS.roof2, after: HOME_PHOTOS.hero1, label: 'Full re-roof · Jasper' }, ].map((p, i) => (

Before

After

{p.label}

))}

); } function NumberedItem({ n, title, body }) { return (

{n}

{title}

{body}

); } function FAQSection({ items }) { const [open, setOpen] = useState(0); return (

FAQ

Honest answers to common questions.

{items.map(([q, a], i) => (

{a}

))}

); } function QuoteForm({ service = 'General' }) { const [submitted, setSubmitted] = useState(false); const [form, setForm] = useState({ name: '', phone: '', email: '', service, message: '' }); const update = (k) => (e) => setForm({ ...form, [k]: e.target.value }); return (

Quote request

Tell us about your project.

We respond to every request within one business day. Or, if it’s urgent —

{PHONE}

); } function FormField({ label, value, onChange, type = 'text', required, textarea }) { return (

{label}{required && ' *'}

{textarea ? (

) : (
        <input type={type} value={value} onChange={onChange} required={required}
               className="w-full bg-transparent border-b-2 py-2 outline-none focus:border-current text-[16px]"
               style={{borderColor: 'var(--rule)'}} />
      )}
    </label>
  );
}

function FormSelect({ label, value, onChange, options }) {
  return (
    <label className="block">
      <div className="text-[11px] uppercase tracking-[0.16em] mb-2" style={{color: 'var(--ink-soft)'}}>{label}</div>
      <select value={value} onChange={onChange}
              className="w-full bg-transparent border-b-2 py-2 outline-none focus:border-current text-[16px] appearance-none"
              style={{borderColor: 'var(--rule)', backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'10\' height=\'6\' viewBox=\'0 0 10 6\'><path fill=\'%23625\' d=\'M0 0h10L5 6z\'/></svg>")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right 4px center'}}>
        {options.map((o) => <option key={o} value={o}>{o}</option>)}
      </select>
    </label>
  );
}

function PageHero({ kicker, title, lead, photo }) {
  return (
    <section className="relative">
      <div className="grid md:grid-cols-12 gap-0">
        <div className="md:col-span-7 px-6 md:px-10 lg:px-16 py-16 md:py-24 lg:py-32">
          <SectionLabel>{kicker}</SectionLabel>
          <h1 className="font-serif text-5xl md:text-6xl lg:text-7xl mt-6 leading-[1.02] tracking-[-0.01em]">{title}</h1>
          <p className="mt-8 text-lg md:text-xl max-w-xl leading-relaxed" style={{color: 'var(--ink-soft)'}}>{lead}</p>
          <div className="mt-10 flex flex-wrap gap-4 items-center">
            <PrimaryCTA href="#contact">Get a free quote</PrimaryCTA>
            <a href={PHONE_HREF} className="font-serif text-xl underline-offset-4 hover:underline">{PHONE}</a>
          </div>
        </div>
        <div className="md:col-span-5 min-h-[320px] md:min-h-0 relative">
          <img src={photo} alt="" className="absolute inset-0 w-full h-full object-cover" />
        </div>
      </div>
    </section>
  );
}

// ─── CUSTOM HOMES ───────────────────────────────────────────────────────────

function HomesPage() {
  const steps = [
    ['Consult', 'Walk your land. Talk through what you need, what you want, and what you can build for.'],
    ['Design', 'Floorplans, elevations, finishes — refined until it feels like yours, before a shovel hits dirt.'],
    ['Build', 'Single-crew construction with a published timeline and weekly photo updates.'],
    ['Move-in', 'Final walkthrough, punch-list, keys. We’re still a phone call away after.'],
  ];
  return (
    <div data-screen-label="Custom Homes">
      <PageHero kicker="Service" title="Custom homes & development" lead="From a single home on family land to a full subdivision — disciplined planning, hands-on execution, lasting value." photo={img(HOME_PHOTOS.hero1)} />

{/* Process */}
      <section className="max-w-7xl mx-auto px-6 md:px-10 py-20 md:py-28">
        <SectionLabel>The process</SectionLabel>
        <h2 className="font-serif text-4xl md:text-5xl mt-4 max-w-2xl leading-tight">Four steps. No guesswork.</h2>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 md:gap-8 mt-12">
          {steps.map(([k, v], i) => (
            <div key={i} className="border-t pt-6" style={{borderColor: 'var(--ink)'}}>
              <div className="flex items-baseline gap-3">
                <span className="font-serif text-xl" style={{color: 'var(--accent)'}}>0{i+1}</span>
                <span className="text-[11px] uppercase tracking-[0.18em]" style={{color: 'var(--ink-soft)'}}>Step</span>
              </div>
              <h3 className="font-serif text-2xl md:text-3xl mt-3">{k}</h3>
              <p className="mt-3 text-[15px] leading-relaxed" style={{color: 'var(--ink-soft)'}}>{v}</p>
            </div>
          ))}
        </div>
      </section>

{/* Featured plan */}
      <section style={{background: 'var(--ink)', color: 'var(--paper)'}}>
        <div className="max-w-7xl mx-auto px-6 md:px-10 py-20 md:py-28 grid md:grid-cols-12 gap-10 items-center">
          <div className="md:col-span-7 order-2 md:order-1">
            <PhotoPlaceholder src={img(HOME_PHOTOS.hero3)} ratio="4/3" />
          </div>
          <div className="md:col-span-5 order-1 md:order-2">
            <div className="text-[11px] uppercase tracking-[0.18em] opacity-70">Featured plan</div>
            <h2 className="font-serif text-5xl md:text-6xl mt-4 leading-[1.02]">The Austin</h2>
            <p className="mt-2 text-lg opacity-80 italic font-serif">European-style farmhouse</p>

<div className="mt-10 grid grid-cols-3 gap-6 border-t pt-6" style={{borderColor: 'rgba(255,255,255,0.15)'}}>
              <div>
                <div className="font-serif text-3xl">1,690</div>
                <div className="text-[11px] uppercase tracking-[0.16em] opacity-70 mt-1">Sq ft</div>
              </div>
              <div>
                <div className="font-serif text-3xl">3</div>
                <div className="text-[11px] uppercase tracking-[0.16em] opacity-70 mt-1">Bedrooms</div>
              </div>
              <div>
                <div className="font-serif text-3xl">2</div>
                <div className="text-[11px] uppercase tracking-[0.16em] opacity-70 mt-1">Bathrooms</div>
              </div>
            </div>

<ul className="mt-8 space-y-3 text-[15px] opacity-90">
              <li>· Open kitchen with island & walk-in pantry</li>
              <li>· Vaulted living with covered back porch</li>
              <li>· Primary suite with soaker tub</li>
              <li>· Mudroom & dedicated laundry</li>
            </ul>

<a href="#contact" className="mt-10 inline-flex items-center gap-3 border-b pb-1 text-sm uppercase tracking-[0.16em]" style={{borderColor: 'var(--paper)'}}>
              Build the Austin →
            </a>
          </div>
        </div>
      </section>

{/* Gallery */}
      <section className="max-w-7xl mx-auto px-6 md:px-10 py-20 md:py-28">
        <SectionLabel>From the field</SectionLabel>
        <h2 className="font-serif text-4xl md:text-5xl mt-4 leading-tight">Recent custom homes.</h2>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 mt-12">
          {[HOME_PHOTOS.hero1, HOME_PHOTOS.kitchen, HOME_PHOTOS.porch, HOME_PHOTOS.interior, HOME_PHOTOS.bath, HOME_PHOTOS.framing].map((id, i) => (
            <PhotoPlaceholder key={i} src={img(id)} ratio="4/5" />
          ))}
        </div>
      </section>

<FAQSection items={[
        ['Do I need to own land first?', 'It helps but it isn’t required — we have relationships with East Texas land brokers and can help you find the right parcel.'],
        ['How long does a custom build take?', 'Most single-family homes run 6–9 months from groundbreak to move-in, depending on size, finishes, and weather.'],
        ['How does financing work?', 'We accept owner-financed, conventional construction-to-perm loans, and VA/USDA where applicable. We can introduce you to local lenders we trust.'],
        ['Can I modify a stock plan?', 'Yes. Every plan we build is customized — square footage, room layout, finishes, exterior style. The Austin is a starting point, not a ceiling.'],
        ['Do you build outside Jasper?', 'Yes — anywhere within roughly 50 miles, including Sam Rayburn, Lufkin, Buna, Woodville, and surrounding communities.'],
      ]} />
      <QuoteForm service="Custom Home" />
      <FooterCTA />
    </div>
  );
}

// ─── GALLERY ────────────────────────────────────────────────────────────────

return (
    <div data-screen-label="Gallery">
      <section className="max-w-7xl mx-auto px-6 md:px-10 py-16 md:py-24">
        <SectionLabel>Portfolio</SectionLabel>
        <h1 className="font-serif text-5xl md:text-7xl mt-6 leading-[1.02] tracking-[-0.01em]">Built around East Texas.</h1>
        <p className="mt-8 max-w-2xl text-lg leading-relaxed" style={{color: 'var(--ink-soft)'}}>A selection of recent roofing and custom-home work across Jasper, Newton, Tyler, and Sabine counties.</p>

<div className="mt-12 flex gap-2 flex-wrap border-b pb-4" style={{borderColor: 'var(--rule)'}}>
          {['All', 'Roofing', 'Homes'].map((f) => (
            <button key={f} onClick={() => setFilter(f)}
                    className={`px-5 py-2 text-sm uppercase tracking-[0.14em] transition-all ${filter === f ? '' : 'opacity-60 hover:opacity-100'}`}
                    style={{background: filter === f ? 'var(--ink)' : 'transparent', color: filter === f ? 'var(--paper)' : 'var(--ink)'}}>
              {f} <span className="opacity-60 ml-1">{f === 'All' ? ALL.length : ALL.filter(i => i.cat === f).length}</span>
            </button>
          ))}
        </div>

<div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 mt-10">
          {items.map((it, i) => (
            <button key={`${filter}-${i}`} onClick={() => setLightbox(it)} className="group block text-left">
              <div className="relative overflow-hidden">
                <img src={img(it.src)} alt={it.label} className="w-full aspect-[4/5] object-cover transition-transform duration-500 group-hover:scale-105" />
                <div className="absolute top-3 left-3 text-[10px] uppercase tracking-[0.18em] px-2 py-1" style={{background: 'var(--paper)', color: 'var(--ink)'}}>{it.cat}</div>
              </div>
              <div className="mt-3 text-sm font-medium">{it.label}</div>
            </button>
          ))}
        </div>
      </section>

{lightbox && (
        <div onClick={() => setLightbox(null)} className="fixed inset-0 z-[2000] flex items-center justify-center p-6 cursor-zoom-out"
             style={{background: 'rgba(20,18,15,0.92)'}}>
          <div className="max-w-5xl w-full">
            <img src={img(lightbox.src, 1800)} alt={lightbox.label} className="w-full max-h-[80vh] object-contain" />
            <div className="mt-4 flex justify-between items-center text-white">
              <span className="font-serif text-xl">{lightbox.label}</span>
              <span className="text-[11px] uppercase tracking-[0.18em] opacity-70">{lightbox.cat} · click to close</span>
            </div>
          </div>
        </div>
      )}

<FooterCTA />
    </div>
  );
}

// ─── ABOUT ──────────────────────────────────────────────────────────────────

function AboutPage() {
  return (
    <div data-screen-label="About">
      <section className="max-w-7xl mx-auto px-6 md:px-10 py-16 md:py-28">
        <div className="grid md:grid-cols-12 gap-10 md:gap-16">
          <div className="md:col-span-7">
            <SectionLabel>Texas rural roots</SectionLabel>
            <h1 className="font-serif text-5xl md:text-6xl lg:text-7xl mt-6 leading-[1.02] tracking-[-0.01em]">
              Aimco was built on a handshake and the smell of fresh-cut pine.
            </h1>
            <div className="mt-10 space-y-6 text-[16px] md:text-[17px] leading-[1.7] max-w-xl" style={{color: 'var(--ink-soft)'}}>
              <p>Aimco Development Group is a Texas-based real estate development and construction company focused on land, commercial, and infrastructure projects that create lasting value.</p>
              <p>With deep East Texas roots and a hands-on approach to execution, we turn vision into build-ready developments through disciplined planning, trusted partnerships, and a commitment to strengthening the communities we serve.</p>
              <p>We don’t chase contracts outside our circle. We build for the towns we live in, the families we know, and the land we plan to leave to our kids.</p>
            </div>
          </div>
          <div className="md:col-span-5">
            <PhotoPlaceholder src={img(HOME_PHOTOS.pines)} ratio="4/5" />
            <div className="mt-3 text-[12px] uppercase tracking-[0.14em]" style={{color: 'var(--ink-soft)'}}>
              East Texas pine country — our office is wherever the truck is parked.
            </div>
          </div>
        </div>
      </section>

{/* Service area */}
      <section style={{background: 'var(--surface-2)'}}>
        <div className="max-w-7xl mx-auto px-6 md:px-10 py-20 md:py-28 grid md:grid-cols-12 gap-10 items-center">
          <div className="md:col-span-5">
            <SectionLabel>Service area</SectionLabel>
            <h2 className="font-serif text-4xl md:text-5xl mt-4 leading-tight">Within 50 miles of Jasper.</h2>
            <p className="mt-6 max-w-md text-[15px] leading-relaxed" style={{color: 'var(--ink-soft)'}}>
              We work across Jasper, Newton, Sabine, Tyler, San Augustine, and parts of Angelina counties. If you’re close to the line — call us anyway.
            </p>
            <ul className="mt-8 grid grid-cols-2 gap-y-3 text-[15px]">
              {['Jasper','Sam Rayburn','Buna','Newton','Woodville','Lufkin','Hemphill','Pineland'].map((c) => (
                <li key={c} className="flex items-center gap-3"><span className="h-1.5 w-1.5 rounded-full" style={{background: 'var(--accent)'}}/>{c}</li>
              ))}
            </ul>
          </div>
          <div className="md:col-span-7">
            <ServiceMap />
          </div>
        </div>
      </section>

{/* Credentials */}
      <section className="max-w-7xl mx-auto px-6 md:px-10 py-20 md:py-28">
        <SectionLabel>Credentials</SectionLabel>
        <h2 className="font-serif text-4xl md:text-5xl mt-4 leading-tight max-w-2xl">Licensed, insured, and standing behind every job.</h2>
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-12">
          {[
            ['TX-Licensed', 'Residential & Commercial Builder'],
            ['Fully Insured', 'General liability + workers comp'],
            ['10+ Years', 'Building in East Texas'],
            ['BBB-Accredited', 'A+ Rating · Member since 2018'],
          ].map(([k, v], i) => (
            <div key={i} className="border p-6" style={{borderColor: 'var(--rule)'}}>
              <div className="font-serif text-2xl">{k}</div>
              <div className="mt-2 text-[14px]" style={{color: 'var(--ink-soft)'}}>{v}</div>
            </div>
          ))}
        </div>
      </section>

{/* Team */}
      <section style={{background: 'var(--ink)', color: 'var(--paper)'}}>
        <div className="max-w-7xl mx-auto px-6 md:px-10 py-20 md:py-28">
          <div className="text-[11px] uppercase tracking-[0.18em] opacity-60 flex items-center gap-3">
            <span className="h-px w-8" style={{background: 'var(--accent)'}}/> The crew
          </div>
          <h2 className="font-serif text-4xl md:text-5xl mt-4 leading-tight">A family operation. The real kind.</h2>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8 mt-12">
            {[
              { name: 'Founder', role: 'Lead Developer', src: HOME_PHOTOS.team },
              { name: 'Project Lead', role: 'Custom Homes', src: HOME_PHOTOS.framing },
              { name: 'Roofing Foreman', role: '12 yrs experience', src: HOME_PHOTOS.roof2 },
              { name: 'Office Manager', role: 'Scheduling & insurance', src: HOME_PHOTOS.interior },
            ].map((p, i) => (
              <div key={i}>
                <PhotoPlaceholder src={img(p.src)} ratio="3/4" />
                <div className="mt-4 font-serif text-2xl">{p.name}</div>
                <div className="text-[13px] uppercase tracking-[0.14em] opacity-70 mt-1">{p.role}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <FooterCTA />
    </div>
  );
}

function ServiceMap() {
  // Stylized map of East Texas service area
  return (
    <div className="relative aspect-[5/4] border" style={{borderColor: 'var(--rule)', background: 'var(--paper)'}}>
      <svg viewBox="0 0 500 400" className="w-full h-full">
        {/* roads / topography */}
        <defs>
          <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M40 0H0V40" fill="none" stroke="var(--rule)" strokeWidth="0.5"/>
          </pattern>
        </defs>
        <rect width="500" height="400" fill="url(#grid)"/>
        {/* lake (Sam Rayburn) */}
        <path d="M120 130 Q160 100 200 140 Q220 200 180 240 Q140 250 110 220 Q100 180 120 130 Z" fill="var(--accent)" opacity="0.12"/>
        <text x="135" y="195" fontSize="9" fill="var(--ink-soft)" fontFamily="ui-monospace,monospace" letterSpacing="1">SAM RAYBURN</text>
        {/* radius */}
        <circle cx="280" cy="220" r="160" fill="none" stroke="var(--accent)" strokeWidth="1" strokeDasharray="3 4" opacity="0.6"/>
        <circle cx="280" cy="220" r="160" fill="var(--accent)" opacity="0.04"/>
        {/* towns */}
        {[
          [280, 220, 'JASPER', true],
          [180, 180, 'Sam Rayburn'],
          [380, 160, 'Hemphill'],
          [220, 300, 'Buna'],
          [340, 320, 'Newton'],
          [120, 280, 'Woodville'],
          [80, 200, 'Lufkin'],
          [410, 250, 'Pineland'],
        ].map(([x, y, name, primary], i) => (
          <g key={i}>
            <circle cx={x} cy={y} r={primary ? 6 : 3} fill={primary ? 'var(--accent)' : 'var(--ink)'}/>
            {primary && <circle cx={x} cy={y} r="14" fill="none" stroke="var(--accent)" strokeWidth="1"/>}
            <text x={x + (primary ? 12 : 7)} y={y + 4} fontSize={primary ? 13 : 10} fill="var(--ink)" fontFamily="serif" fontWeight={primary ? 600 : 400}>{name}</text>
          </g>
        ))}
        {/* legend */}
        <g transform="translate(20, 360)">
          <circle cx="6" cy="6" r="4" fill="var(--accent)"/>
          <text x="16" y="10" fontSize="10" fill="var(--ink-soft)" fontFamily="ui-monospace,monospace">HQ — JASPER, TX</text>
          <text x="160" y="10" fontSize="10" fill="var(--ink-soft)" fontFamily="ui-monospace,monospace">— — — 50 MILE SERVICE RADIUS</text>
        </g>
      </svg>
    </div>
  );
}

// ─── REVIEWS ────────────────────────────────────────────────────────────────

function ReviewsPage() {
  const all = [
    { name: 'Janet R.', town: 'Jasper', stars: 5, date: 'March 2026', service: 'Roof replacement', text: 'After the storm last spring, Aimco had our roof inspected the same day and replaced inside two weeks. Fair price, no nonsense. They worked directly with our insurance and we only paid the deductible.' },
    { name: 'Mark & Lisa H.', town: 'Sam Rayburn', stars: 5, date: 'February 2026', service: 'Custom home', text: 'They built our Austin Plan from a clearing on our property. Walked us through every step, kept us in budget, and the move-in date didn’t slip a single week. Three years in and we still call them when we have questions.' },
    { name: 'Diane O.', town: 'Buna', stars: 5, date: 'January 2026', service: 'Roof inspection', text: 'Honest people. They told me my roof had three more years in it instead of selling me a job I didn’t need. We’ll call them when it’s time, and I’ve already sent two neighbors their way.' },
    { name: 'Robert P.', town: 'Newton', stars: 5, date: 'November 2025', service: 'Re-roof', text: 'Crew showed up on time every day. House was cleaned up better than they found it. Standing-seam metal looks like a magazine cover.' },
    { name: 'The Garcia Family', town: 'Lufkin', stars: 5, date: 'October 2025', service: 'Custom home', text: 'We interviewed four builders. Aimco was the only one who walked the lot with us before quoting. That said everything we needed to know.' },
    { name: 'Wesley B.', town: 'Hemphill', stars: 5, date: 'August 2025', service: 'Storm repair', text: 'Tornado took half my roof. Aimco had a tarp on it the next morning and a new roof inside three weeks during the busiest season of the year. Lifesavers.' },
  ];
  return (
    <div data-screen-label="Reviews">
      <section className="max-w-7xl mx-auto px-6 md:px-10 py-16 md:py-24">
        <SectionLabel>Reviews</SectionLabel>
        <div className="grid md:grid-cols-12 gap-10 mt-6 items-end">
          <div className="md:col-span-8">
            <h1 className="font-serif text-5xl md:text-7xl leading-[1.02] tracking-[-0.01em]">What our neighbors say.</h1>
          </div>
          <div className="md:col-span-4">
            <div className="flex items-baseline gap-3">
              <span className="font-serif text-6xl" style={{color: 'var(--accent)'}}>4.9</span>
              <div>
                <div className="flex gap-0.5">
                  {[...Array(5)].map((_, i) => (
                    <svg key={i} width="16" height="16" viewBox="0 0 16 16" fill="var(--accent)"><path d="M8 1.5l2 4.5 5 .5-3.7 3.4 1.1 5L8 12l-4.4 2.9 1.1-5L1 6.5l5-.5z"/></svg>
                  ))}
                </div>
                <div className="text-[13px] mt-1" style={{color: 'var(--ink-soft)'}}>From 87 verified reviews</div>
              </div>
            </div>
          </div>
        </div>

<div className="mt-16 flex items-center justify-between border-t pt-8 flex-wrap gap-4" style={{borderColor: 'var(--rule)'}}>
          <p className="text-[15px]" style={{color: 'var(--ink-soft)'}}>Want to leave a review? We’d be honored.</p>
          <div className="flex gap-3">
            <SecondaryCTA href="#">Google Reviews</SecondaryCTA>
            <SecondaryCTA href="#">Facebook</SecondaryCTA>
          </div>
        </div>
      </section>
      <FooterCTA />
    </div>
  );
}

function DetailedReviewCard({ name, town, stars, date, service, text }) {
  return (
    <div className="border p-7 md:p-9" style={{borderColor: 'var(--rule)'}}>
      <div className="flex items-center justify-between">
        <div className="flex gap-0.5">
          {[...Array(5)].map((_, i) => (
            <svg key={i} width="18" height="18" viewBox="0 0 16 16" fill={i < stars ? 'var(--accent)' : 'transparent'} stroke="var(--accent)"><path d="M8 1.5l2 4.5 5 .5-3.7 3.4 1.1 5L8 12l-4.4 2.9 1.1-5L1 6.5l5-.5z"/></svg>
          ))}
        </div>
        <div className="text-[12px] uppercase tracking-[0.14em]" style={{color: 'var(--ink-soft)'}}>{date}</div>
      </div>
      <p className="font-serif text-xl md:text-2xl mt-6 leading-snug">“{text}”</p>
      <div className="mt-7 pt-5 border-t flex items-center justify-between text-[13px]" style={{borderColor: 'var(--rule)'}}>
        <div>
          <div className="font-medium">{name}</div>
          <div style={{color: 'var(--ink-soft)'}}>{town}, TX · {service}</div>
        </div>
      </div>
    </div>
  );
}

// ─── CONTACT ────────────────────────────────────────────────────────────────

function ContactPage() {
  return (
    <div data-screen-label="Contact">
      <section className="max-w-7xl mx-auto px-6 md:px-10 py-16 md:py-24">
        <SectionLabel>Get in touch</SectionLabel>
        <h1 className="font-serif text-5xl md:text-7xl mt-6 leading-[1.02] tracking-[-0.01em] max-w-3xl">Let’s talk about your project.</h1>
        <p className="mt-8 max-w-2xl text-lg leading-relaxed" style={{color: 'var(--ink-soft)'}}>
          Roof, home, or development — every conversation starts the same way: free, on your land, no pressure.
        </p>

<div className="grid md:grid-cols-12 gap-10 md:gap-16 mt-16">
          <div className="md:col-span-5 space-y-10">
            <div>
              <div className="text-[11px] uppercase tracking-[0.18em] mb-3" style={{color: 'var(--ink-soft)'}}>Call or text</div>
              <a href={PHONE_HREF} className="font-serif text-5xl md:text-6xl block leading-none">{PHONE}</a>
              <p className="mt-4 text-[15px]" style={{color: 'var(--ink-soft)'}}>Tap to call. We answer.</p>
            </div>
            <div>
              <div className="text-[11px] uppercase tracking-[0.18em] mb-3" style={{color: 'var(--ink-soft)'}}>Email</div>
              <a href={`mailto:${EMAIL}`} className="font-serif text-2xl">{EMAIL}</a>
            </div>
            <div>
              <div className="text-[11px] uppercase tracking-[0.18em] mb-3" style={{color: 'var(--ink-soft)'}}>Office</div>
              <div className="font-serif text-2xl">{ADDRESS}</div>
              <div className="mt-1 text-[15px]" style={{color: 'var(--ink-soft)'}}>By appointment — we’re mostly in the field.</div>
            </div>
            <div>
              <div className="text-[11px] uppercase tracking-[0.18em] mb-3" style={{color: 'var(--ink-soft)'}}>Hours</div>
              <table className="text-[15px]">
                <tbody>
                  <tr><td className="pr-8 py-1">Monday – Friday</td><td>9:00 am – 5:00 pm</td></tr>
                  <tr><td className="pr-8 py-1">Saturday</td><td>By appointment</td></tr>
                  <tr><td className="pr-8 py-1" style={{color: 'var(--ink-soft)'}}>Sunday</td><td style={{color: 'var(--ink-soft)'}}>Closed</td></tr>
                </tbody>
              </table>
            </div>
            <div>
              <div className="text-[11px] uppercase tracking-[0.18em] mb-3" style={{color: 'var(--ink-soft)'}}>Find us</div>
              <div className="flex gap-3">
                <a href="#" className="px-4 py-2 border text-sm uppercase tracking-[0.14em]" style={{borderColor: 'var(--ink)'}}>Facebook</a>
                <a href="#" className="px-4 py-2 border text-sm uppercase tracking-[0.14em]" style={{borderColor: 'var(--ink)'}}>Google</a>
              </div>
            </div>
          </div>

<section style={{background: 'var(--surface-2)'}}>
        <div className="max-w-7xl mx-auto px-6 md:px-10 py-12 md:py-16">
          <div className="text-[11px] uppercase tracking-[0.18em] mb-4" style={{color: 'var(--ink-soft)'}}>Find us</div>
          <ServiceMap />
        </div>
      </section>
      <FooterCTA />
    </div>
  );
}

function ContactForm() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ name: '', phone: '', email: '', service: 'Roofing', message: '' });
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

if (submitted) {
    return (
      <div className="border p-10" style={{borderColor: 'var(--accent)'}}>
        <SectionLabel>Message sent</SectionLabel>
        <h2 className="font-serif text-4xl md:text-5xl mt-4 leading-tight">Thanks — we’ll be in touch.</h2>
        <p className="mt-6 text-[15px] leading-relaxed max-w-lg" style={{color: 'var(--ink-soft)'}}>
          You’ll hear from us within one business day. For anything urgent — a leaking roof, a deadline, a question that can’t wait — call <a href={PHONE_HREF} className="underline">{PHONE}</a>.
        </p>
        <button onClick={() => setSubmitted(false)} className="mt-8 text-sm uppercase tracking-[0.16em] border-b pb-1" style={{borderColor: 'var(--ink)'}}>Send another →</button>
      </div>
    );
  }

return (
    <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }} className="space-y-6">
      <FormField label="Name" required value={form.name} onChange={update('name')} />
      <div className="grid sm:grid-cols-2 gap-6">
        <FormField label="Phone" required type="tel" value={form.phone} onChange={update('phone')} />
        <FormField label="Email" type="email" value={form.email} onChange={update('email')} />
      </div>
      <FormSelect label="I'm interested in" value={form.service} onChange={update('service')}
                  options={['Roofing', 'Custom Home', 'Land / Development', 'Commercial', 'Other']} />
      <FormField label="Tell us about the project" textarea value={form.message} onChange={update('message')} />
      <div className="flex items-center gap-6 pt-2">
        <button type="submit" className="px-8 py-4 font-medium tracking-wide" style={{background: 'var(--accent)', color: 'var(--on-accent)'}}>
          Send message →
        </button>
        <span className="text-[13px]" style={{color: 'var(--ink-soft)'}}>Or call <a href={PHONE_HREF} className="underline">{PHONE}</a></span>
      </div>
    </form>
  );
}

// ─── exports ────────────────────────────────────────────────────────────────

Object.assign(window, {
  HomePage, RoofingPage, HomesPage, GalleryPage, AboutPage, ReviewsPage, ContactPage,
  FooterCTA, PHONE, PHONE_HREF, EMAIL, ADDRESS,
});

Two trades. One standard.

Built around Jasper.

Custom homes &quality roofingin East Texas.

Built honest. Built to last.

Custom homes & quality roofing in East Texas.

{title}

A handshake still means something here.

Let’s walk the property.

Three ways we work on roofs.

Local crews. Real warranties. Insurance, handled.

Storm damage to weather-tight, in 48 hours.

{title}

Honest answers to common questions.

Tell us about your project.

Custom homes &
quality roofing
in East Texas.