// Section components — Services, Industries, About, Service Area, Trust, Footer

const { SectionEyebrow, DuotoneImage, Chip } = window;

// Commercial interior imagery — Unsplash
const IMG = {
  hotelLobby:   'https://images.unsplash.com/photo-1564540574859-0dfb63985953?auto=format&fit=crop&w=1400&q=80',
  officeDay:    'https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1400&q=80',
  bankLobby:    'https://images.unsplash.com/photo-1554469384-e58fac16e23a?auto=format&fit=crop&w=1400&q=80',
  medical:      'https://images.unsplash.com/photo-1631815588090-d4bfec5b1ccb?auto=format&fit=crop&w=1400&q=80',
  floorCare:    'https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1400&q=80',
  windows:      'https://images.unsplash.com/photo-1590725175785-de25cb5bb7a4?auto=format&fit=crop&w=1400&q=80',
  carpets:      'https://images.unsplash.com/photo-1586105251261-72a756497a11?auto=format&fit=crop&w=1400&q=80',
  retail:       'https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?auto=format&fit=crop&w=1400&q=80',
  restroom:     'https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?auto=format&fit=crop&w=1400&q=80',
  postcon:      'https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1400&q=80',
  toddPortrait: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1400&q=80',
  team:         'https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1400&q=80',
  spokane:      'https://images.unsplash.com/photo-1568515387631-8b650bbcdb90?auto=format&fit=crop&w=1400&q=80',
};

// ──────────────────────────────────────────────────────
// PROOF STRIP — immediately under hero
// ──────────────────────────────────────────────────────
function ProofStrip() {
  const stats = [
    { n: '22', l: 'Years in business' },
    { n: '100%', l: 'Word-of-mouth' },
    { n: '5+', l: 'Cities served' },
    { n: 'L·B·I', l: 'Licensed · Bonded · Insured' },
  ];
  return (
    <section style={{ padding:'80px 0', background:'var(--white)', borderBottom:'1px solid var(--mist)' }}>
      <div className="container">
        <div className="trust-grid">
          {stats.map(({n,l}, i) => (
            <div key={l} className="fade-up" style={{ transitionDelay:`${i*.08}s` }}>
              <div className="display" style={{ fontSize:'clamp(44px, 5vw, 60px)', color:'var(--ink)', lineHeight:1 }}>{n}</div>
              <div style={{ fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--muted)', marginTop:14, fontWeight:500 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────
// SERVICES — editorial numbered list
// ──────────────────────────────────────────────────────
function Services() {
  const services = [
    { n:'01', title:'Nightly Office Cleaning', desc:'After-hours crews, five nights a week. Your team arrives to a reset space every morning.', img: IMG.officeDay },
    { n:'02', title:'Hard-Floor Care', desc:'Strip, wax, and burnish on tile, VCT, terrazzo, and polished concrete. Quarterly or as specified.', img: IMG.floorCare },
    { n:'03', title:'Window Cleaning', desc:'Interior and exterior storefront glass, lobby walls, and reachable upper panes. Streak-free, every pane.', img: IMG.windows },
    { n:'04', title:'Carpet Cleaning', desc:'Hot-water extraction, spot treatment, and scheduled deep cleans. Commercial-grade equipment.', img: IMG.carpets },
    { n:'05', title:'Restroom Sanitation', desc:'Hospital-grade disinfection protocol. Fixtures, fittings, floors, and consumables handled.', img: IMG.restroom },
    { n:'06', title:'Post-Construction Clean', desc:'Final cleans for remodels, tenant improvements, and new builds. Turnover-ready handoff.', img: IMG.postcon },
  ];
  const [hover, setHover] = React.useState(0);

  return (
    <section id="services" style={{ background:'var(--paper)' }}>
      <div className="container">
        <SectionEyebrow n="S · 01" label="Services" />
        <div style={{ display:'grid', gridTemplateColumns:'5fr 7fr', gap:80, alignItems:'start' }} className="svc-grid">
          <div className="fade-up svc-sidebar" style={{ position:'sticky', top:120 }}>
            <h2 className="display" style={{ fontSize:'clamp(40px, 4.5vw, 64px)', margin:0 }}>
              What we<br/><em className="italic-light">handle.</em>
            </h2>
            <p style={{ fontSize:15, lineHeight:1.65, color:'var(--muted)', marginTop:20, maxWidth:360 }}>
              Full-service commercial janitorial — every task on this list is something Todd's crew has done, on schedule, for twenty-two years. If it's not here, ask.
            </p>
            <DuotoneImage src={services[hover].img} alt={services[hover].title} label={services[hover].title}
              style={{ marginTop:32, aspectRatio:'4 / 5', width:'100%', transition:'opacity .3s' }} />
          </div>

          <div>
            {services.map((s, i) => (
              <div key={s.n} className="service-row fade-up" onMouseEnter={() => setHover(i)}>
                <span className="mono service-num" style={{ fontSize:12, color:'var(--accent)' }}>{s.n}</span>
                <div>
                  <h3 className="service-title">{s.title}</h3>
                  <p className="service-desc">{s.desc}</p>
                </div>
                <div className="service-arrow">→</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────
// INDUSTRIES
// ──────────────────────────────────────────────────────
function Industries() {
  const items = [
    { key:'Banks',     note:'Vaults, lobbies, ATM vestibules' },
    { key:'Medical',   note:'Clinics & dental offices' },
    { key:'Offices',   note:'Corporate, co-working, pro services' },
    { key:'Retail',    note:'Storefronts & showrooms' },
    { key:'Schools',   note:'Private & charter facilities' },
  ];
  return (
    <section id="industries" style={{ background:'var(--white)', borderTop:'1px solid var(--mist)' }}>
      <div className="container">
        <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:56, flexWrap:'wrap', gap:24 }}>
          <div>
            <SectionEyebrow n="S · 02" label="Industries Served" />
            <h2 className="display fade-up" style={{ fontSize:'clamp(40px, 4.5vw, 64px)', margin:0, maxWidth:680, lineHeight:1.02 }}>
              For the businesses that<br/>take cleaning <em className="italic-light">seriously.</em>
            </h2>
          </div>
          <p className="fade-up" style={{ fontSize:15, color:'var(--muted)', maxWidth:360, lineHeight:1.6 }}>
            Every vertical has its own protocol — access control, compliance, supply handling. We match yours.
          </p>
        </div>

        <div className="industries-grid fade-up">
          {items.map((it, i) => (
            <div key={it.key} className="industry-tile">
              <span className="mono it-num" style={{ fontSize:11, color:'var(--accent)' }}>{String(i+1).padStart(2,'0')}</span>
              <div className="display it-title" style={{ fontSize:28, color:'var(--ink)', lineHeight:1 }}>{it.key}</div>
              <div className="it-note" style={{ fontSize:12, color:'var(--muted)', lineHeight:1.4 }}>{it.note}</div>
            </div>
          ))}
        </div>

        {/* Industry imagery row */}
        <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gap:16, marginTop:32 }} className="fade-up">
          <DuotoneImage src={IMG.bankLobby} alt="Bank lobby" label="Banks & Credit Unions" style={{ aspectRatio:'16 / 10' }} />
          <DuotoneImage src={IMG.medical} alt="Medical office" label="Medical" style={{ aspectRatio:'4 / 5' }} />
          <DuotoneImage src={IMG.retail} alt="Retail" label="Retail" style={{ aspectRatio:'4 / 5' }} />
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────
// ABOUT — Todd's story
// ──────────────────────────────────────────────────────
function About() {
  return (
    <section id="about" style={{ background:'var(--ink)', color:'#fff' }}>
      <div className="container">
        <div style={{ color:'var(--accent)' }}><SectionEyebrow n="S · 03" label="About Todd" /></div>

        <div className="about-grid">
          <div className="fade-up">
            <DuotoneImage src={IMG.toddPortrait} alt="Todd Johnson" label="Todd D. Johnson · Owner" style={{ aspectRatio:'4 / 5' }} />
            <div style={{ marginTop:24, padding:'20px 0', borderTop:'1px solid rgba(255,255,255,.15)', borderBottom:'1px solid rgba(255,255,255,.15)', fontFamily:'var(--mono)', fontSize:11, color:'rgba(255,255,255,.65)', display:'flex', justifyContent:'space-between' }}>
              <span>Est. 2004</span><span>Hayden, ID</span><span>Owner-operated</span>
            </div>
          </div>

          <div className="fade-up" style={{ transitionDelay:'.15s' }}>
            <h2 className="display" style={{ fontSize:'clamp(40px, 4.5vw, 64px)', margin:0, color:'#fff', lineHeight:1.02 }}>
              Twenty-two years<br/><em className="italic-light">in Hayden.</em>
            </h2>
            <div style={{ fontSize:18, lineHeight:1.7, color:'rgba(255,255,255,.82)', marginTop:32, fontWeight:300 }}>
              <p style={{ margin:'0 0 18px' }}>
                Todd D. Johnson started Above &amp; Beyond Janitorial in 2004 and has run it from Hayden ever since. Every account — banks, clinics, offices, and schools across North Idaho and Spokane — came from somebody telling somebody else. No ads, no salespeople.
              </p>
              <p style={{ margin:'0 0 18px' }}>
                Today Todd works alongside a crew he's built over the years. He still walks the jobs, still picks up when a client calls, and still signs off before an invoice goes out. The company is bigger than when it started; the handshake is the same.
              </p>
              <p style={{ margin:0, color:'var(--silver)', fontStyle:'italic', fontFamily:'var(--serif)' }}>
                "Experience the image." — it's what's been on the business card from day one.
              </p>
            </div>

            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:24, marginTop:48, paddingTop:32, borderTop:'1px solid rgba(255,255,255,.15)' }}>
              {[
                ['Owner on site', 'Todd still walks the jobs.'],
                ['Seasoned crew', 'Trained, vetted, same protocol every night.'],
                ['Direct line', "Call Todd — he'll pick up."],
              ].map(([t, d]) => (
                <div key={t}>
                  <div className="display" style={{ fontSize:22, color:'#fff' }}>{t}</div>
                  <div style={{ fontSize:13, color:'rgba(255,255,255,.6)', marginTop:6, lineHeight:1.55 }}>{d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────
// SERVICE AREA
// ──────────────────────────────────────────────────────
function ServiceArea() {
  const cities = [
    ['Hayden, ID', 'HQ'], ['Coeur d\'Alene, ID', ''], ['Post Falls, ID', ''],
    ['Hayden Lake, ID', ''], ['Dalton Gardens, ID', ''], ['Rathdrum, ID', ''],
    ['Sandpoint, ID', ''], ['Spokane, WA', ''], ['Spokane Valley, WA', ''], ['Liberty Lake, WA', ''],
  ];

  return (
    <section id="area" style={{ background:'var(--paper)' }}>
      <div className="container">
        <SectionEyebrow n="S · 04" label="Service Area" />

        <div className="sa-grid">
          <div className="fade-up">
            <h2 className="display" style={{ fontSize:'clamp(40px, 4.5vw, 64px)', margin:0, lineHeight:1.02 }}>
              From Sandpoint<br/>to <em className="italic-light">the Valley.</em>
            </h2>
            <p style={{ fontSize:16, lineHeight:1.65, color:'var(--muted)', marginTop:24, maxWidth:380 }}>
              Based in Hayden, Idaho. We work the whole Inland Northwest corridor — from North Idaho lake country down through Spokane.
            </p>

            <div style={{ marginTop:32 }}>
              {cities.map(([c, tag], i) => (
                <div key={c} style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'12px 0', borderTop: i === 0 ? '1px solid var(--mist)' : 'none', borderBottom:'1px solid var(--mist)' }}>
                  <span style={{ fontFamily:'var(--serif)', fontSize:18, color:'var(--ink)' }}>{c}</span>
                  {tag && <span className="mono" style={{ fontSize:10, letterSpacing:'.2em', color:'var(--accent)', padding:'3px 8px', border:'1px solid var(--accent)' }}>{tag}</span>}
                </div>
              ))}
            </div>
          </div>

          <div className="fade-up" style={{ transitionDelay:'.15s' }}>
            <ServiceMap />
            <div style={{ marginTop:24, display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
              <DuotoneImage src={IMG.spokane} alt="Spokane skyline" label="Spokane" style={{ aspectRatio:'16 / 10' }} />
              <DuotoneImage src={IMG.hotelLobby} alt="Hayden commercial" label="Hayden · HQ" style={{ aspectRatio:'16 / 10' }} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServiceMap() {
  // Google Maps embed centered on Hayden, ID with markers for key cities
  // Using a search query that spans our service area
  const src = "https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d424906.9!2d-117.2!3d47.85!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1700000000000!5m2!1sen!2sus";

  return (
    <div style={{ position:'relative', background:'#fff', border:'1px solid var(--mist)', aspectRatio:'5 / 6', overflow:'hidden' }}>
      <iframe
        src={src}
        title="Inland Northwest Service Area"
        style={{ border:0, width:'100%', height:'100%', filter:'grayscale(.3) contrast(.95)' }}
        loading="lazy"
        referrerPolicy="no-referrer-when-downgrade"
        allowFullScreen
      />
      {/* Top-left label badge overlaid on map */}
      <div style={{ position:'absolute', top:16, left:16, background:'rgba(255,255,255,.95)', backdropFilter:'blur(6px)', padding:'10px 14px', border:'1px solid var(--mist)', fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', color:'var(--ink)', fontWeight:600, pointerEvents:'none' }}>
        Service Area
      </div>
      {/* Top-right coord */}
      <div style={{ position:'absolute', top:16, right:16, background:'rgba(255,255,255,.95)', backdropFilter:'blur(6px)', padding:'10px 14px', border:'1px solid var(--mist)', fontFamily:'var(--mono)', fontSize:10, color:'var(--muted)', pointerEvents:'none' }}>
        47.76°N · 116.79°W
      </div>
      {/* HQ pin badge bottom-left */}
      <div style={{ position:'absolute', bottom:16, left:16, background:'var(--ink)', color:'#fff', padding:'10px 14px', fontSize:11, letterSpacing:'.12em', textTransform:'uppercase', display:'flex', alignItems:'center', gap:10, pointerEvents:'none' }}>
        <span style={{ width:8, height:8, borderRadius:'50%', background:'var(--accent)' }} />
        HQ · Hayden, ID
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────
// TRUST — licensed bonded insured etc
// ──────────────────────────────────────────────────────
function Trust() {
  const items = [
    { t:'Licensed', d:'Idaho business license in good standing since 2004.' },
    { t:'Bonded', d:'Surety-bonded for every building we hold keys to.' },
    { t:'Insured', d:'Full general liability + workers\' comp coverage.' },
    { t:'Green Certified', d:'Low-VOC products and EPA-Safer-Choice protocols.' },
  ];
  return (
    <section style={{ background:'var(--white)', borderTop:'1px solid var(--mist)' }}>
      <div className="container">
        <SectionEyebrow n="S · 05" label="Trust" />
        <h2 className="display fade-up" style={{ fontSize:'clamp(40px, 4.5vw, 64px)', margin:'0 0 56px', maxWidth:780, lineHeight:1.02 }}>
          Paperwork in order.<br/><em className="italic-light">Handshake on top.</em>
        </h2>

        <div className="trust-grid fade-up">
          {items.map(({t, d}, i) => (
            <div key={t} style={{ paddingTop:24, borderTop:'2px solid var(--ink)' }}>
              <div className="mono" style={{ fontSize:10, color:'var(--accent)', marginBottom:8 }}>{String(i+1).padStart(2,'0')} / 04</div>
              <div className="display" style={{ fontSize:28, color:'var(--ink)' }}>{t}</div>
              <div style={{ fontSize:13, color:'var(--muted)', marginTop:8, lineHeight:1.6 }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────
// CTA / CONTACT
// ──────────────────────────────────────────────────────
function CTA() {
  return (
    <section id="contact" style={{ background:'var(--paper)', padding:'120px 0', borderTop:'1px solid var(--mist)' }}>
      <div className="container">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center', maxWidth:1100, margin:'0 auto' }} className="cta-grid">
          <div className="fade-up">
            <div className="eyebrow">Free walkthrough · No obligation</div>
            <h2 className="display" style={{ fontSize:'clamp(36px, 4vw, 52px)', margin:'18px 0 20px', lineHeight:1.02 }}>
              Call Todd.<br/>
              <em className="italic-light">He'll pick up.</em>
            </h2>
            <p style={{ fontSize:15, color:'var(--muted)', lineHeight:1.6, maxWidth:380, margin:0 }}>
              Tell him the building, the size, and the schedule. He'll come walk it with you.
            </p>
          </div>

          <div className="fade-up" style={{ transitionDelay:'.1s' }}>
            <div style={{ background:'#fff', border:'1px solid var(--mist)', padding:'36px 32px' }}>
              <div className="mono" style={{ fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', color:'var(--muted)' }}>Direct line · Todd D. Johnson</div>
              <a href="tel:12088183175" style={{ display:'block', marginTop:12 }}>
                <div className="mono" style={{ fontSize:'clamp(28px, 3.2vw, 40px)', color:'var(--ink)', letterSpacing:'-.01em', fontWeight:500 }}>
                  208 · 818 · 3175
                </div>
              </a>
              <div style={{ height:1, background:'var(--mist)', margin:'24px 0' }} />
              <div style={{ display:'grid', gridTemplateColumns:'auto 1fr', gap:'12px 16px', fontSize:13, color:'var(--text)', alignItems:'center' }}>
                <span style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--muted)' }}>Email</span>
                <a href="mailto:abovejanitorial@hotmail.com" style={{ borderBottom:'1px solid var(--mist)', paddingBottom:1 }}>abovejanitorial@hotmail.com</a>
                <span style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--muted)' }}>Based in</span>
                <span>Hayden, Idaho</span>
                <span style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--muted)' }}>Hours</span>
                <span>Mon–Fri · 7a–5p · After-hours by arrangement</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────
// FOOTER
// ──────────────────────────────────────────────────────
function Footer() {
  return (
    <footer>
      <div className="container">
        <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap:48, marginBottom:64 }} className="footer-grid">
          <div>
            <window.Logo size={48} dark />
            <p style={{ fontSize:14, color:'rgba(255,255,255,.65)', marginTop:24, maxWidth:340, lineHeight:1.6 }}>
              Commercial janitorial for the Inland Northwest since 2004. Licensed, bonded, insured, green-certified — and still owner-operated.
            </p>
          </div>
          <div>
            <div className="eyebrow" style={{ color:'var(--silver)', marginBottom:16 }}>Services</div>
            <div style={{ display:'flex', flexDirection:'column', gap:8, fontSize:13 }}>
              <a>Office Cleaning</a><a>Floor Care</a><a>Windows</a><a>Carpets</a><a>Restrooms</a><a>Post-Construction</a>
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{ color:'var(--silver)', marginBottom:16 }}>Service Area</div>
            <div style={{ display:'flex', flexDirection:'column', gap:8, fontSize:13 }}>
              <span>Hayden</span><span>Coeur d'Alene</span><span>Post Falls</span><span>Sandpoint</span><span>Spokane</span><span>Spokane Valley</span>
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{ color:'var(--silver)', marginBottom:16 }}>Contact</div>
            <div style={{ display:'flex', flexDirection:'column', gap:8, fontSize:13 }}>
              <a href="tel:12088183175" className="mono" style={{ color:'var(--accent)' }}>208·818·3175</a>
              <a href="mailto:abovejanitorial@hotmail.com">abovejanitorial@hotmail.com</a>
              <span>Hayden, Idaho</span>
            </div>
          </div>
        </div>

        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop:24, borderTop:'1px solid rgba(255,255,255,.15)', fontSize:11, color:'rgba(255,255,255,.5)', fontFamily:'var(--mono)', flexWrap:'wrap', gap:12 }}>
          <span>© 2026 Above & Beyond Janitorial · Todd D. Johnson, Owner</span>
          <span>Licensed · Bonded · Insured · Green Certified</span>
          <span>"Experience the image."</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ProofStrip, Services, Industries, About, ServiceArea, Trust, CTA, Footer });