// Remaining sections: Water damage deep-dive, Properties, Process, FAQ,
// Quote-request form, Footer.

function WaterDamage() {
  const [ref, inView] = useInView();
  const stats = [
    { k: '24/7', v: 'Dispatch' },
    { k: '< 90 min', v: 'Avg. arrival · Broward' },
    { k: '$85+', v: 'Extraction from' },
    { k: '6', v: 'Multifamily partners' },
  ];
  return (
    <section id="water" ref={ref} style={{ padding: '96px 0', background: 'var(--bg)' }}>
      <div className="wrap-wide" style={{
        display: 'grid',
        gridTemplateColumns: '1.1fr 1fr',
        gap: 56,
        alignItems: 'center',
      }} className="water-grid">
        <div style={{
          opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateX(-12px)',
          transition: 'opacity .7s, transform .7s',
        }}>
          <div className="eyebrow" style={{ color: 'var(--alert)', display:'inline-flex', alignItems:'center', gap: 8 }}>
            <span className="anim-pulse" style={{
              display:'inline-block', width: 8, height: 8, borderRadius:'50%',
              background:'var(--alert)',
            }}/>
            LIVE 24/7
          </div>
          <h2 className="h-1" style={{ margin: '8px 0 18px' }}>
            When minutes matter,<br/>
            <span style={{ color: 'var(--muted)' }}>we're already moving.</span>
          </h2>
          <p className="sub" style={{ maxWidth: 560, marginTop: 0 }}>
            A burst line, a failed water heater, a unit discovered after a long weekend — we document
            moisture on intake and at release so carriers can reconcile the loss.
          </p>
          <div style={{ display:'flex', gap: 12, marginTop: 28, flexWrap:'wrap' }}>
            <a href="tel:+19546358521" className="btn btn-dark"><Icon.Phone size={16}/> (954) 635-8521</a>
            <a href="tel:+17544228677" className="btn btn-secondary"><Icon.Phone size={16}/> (754) 422-8677</a>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1,
            marginTop: 36, background: 'var(--line-soft)',
            borderRadius: 'var(--radius-md)', overflow: 'hidden',
            border: '1px solid var(--line-soft)',
          }}>
            {stats.map(s => (
              <div key={s.k} style={{ background:'#fff', padding: '20px 22px' }}>
                <div style={{ fontSize: 30, fontWeight: 600, letterSpacing: '-0.025em' }}>{s.k}</div>
                <div style={{ color:'var(--muted)', fontSize: 13, marginTop: 2 }}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{
          background: 'linear-gradient(180deg, #0f2735 0%, #18465e 100%)',
          color: '#fff',
          borderRadius: 'var(--radius-xl)',
          padding: '40px 40px 32px',
          minHeight: 480,
          position: 'relative',
          overflow: 'hidden',
          opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateX(12px)',
          transition: 'opacity .7s, transform .7s',
        }}>
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)', marginBottom: 12 }}>Included in every response</div>
          <div className="h-3" style={{ color: '#fff', marginBottom: 22 }}>Restoration protocol</div>
          <div style={{ display:'flex', flexDirection:'column', gap: 2 }}>
            {[
              ['Extraction', 'Truck-mount, billed by volume'],
              ['Pad removal', 'When affected · $85 and up'],
              ['Mildewcide', 'EPA-registered'],
              ['Deodorizer', 'Neutralizing, non-fragrance'],
              ['Sanitizing', 'Category-matched'],
              ['Blowers', '$35–45 / day'],
              ['Dehumidifier', '$150–250 / day'],
              ['Ozone', '$100–150 / day'],
              ['Air scrubber', '$175–225 / day'],
            ].map((row, i) => (
              <div key={i} data-reveal style={{
                display:'flex', justifyContent:'space-between', alignItems:'center',
                padding: '14px 0', borderTop: i === 0 ? 'none' : '1px solid rgba(255,255,255,0.1)',
                transitionDelay: `${i * 60}ms`,
              }}>
                <span style={{ fontSize: 15 }}>{row[0]}</span>
                <span style={{ color:'rgba(255,255,255,0.64)', fontSize: 13, fontFamily: 'var(--mono)' }}>{row[1]}</span>
              </div>
            ))}
          </div>
          {/* Decorative concentric circles */}
          <svg style={{ position:'absolute', right:-80, bottom:-80, opacity:0.18 }} width="320" height="320" viewBox="0 0 320 320">
            {[40,80,120,160].map(r => <circle key={r} cx="160" cy="160" r={r} fill="none" stroke="#fff" strokeWidth="1"/>)}
          </svg>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .water-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function Properties() {
  return (
    <section id="properties" style={{ padding: '96px 0', background: 'var(--bg-soft)' }}>
      <div className="wrap-wide">
        <div style={{ textAlign:'center', maxWidth: 820, margin:'0 auto 48px' }}>
          <div className="eyebrow">Trusted partners</div>
          <h2 className="h-1" style={{ margin: '8px 0 14px' }}>
            The properties that count on us.
          </h2>
          <p className="sub" style={{ margin: 0 }}>
            Multifamily operators across Broward and Miami-Dade run their turns,
            renewals and water events through H A Carpet Cleaning. We show up on schedule,
            document the work, and stand behind every unit we touch.
          </p>
        </div>

        {/* Trust metrics */}
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 1,
          background:'var(--line-soft)',
          border:'1px solid var(--line-soft)',
          borderRadius:'var(--radius-lg)',
          overflow:'hidden',
          marginBottom: 40,
        }} className="trust-metrics">
          {[
            { k: 10, suf: '+', v: 'Multifamily partners' },
            { k: null, text: '1,000s', v: 'Units turned' },
            { k: null, text: '24/7', v: 'Water damage dispatch' },
            { k: 90, prefix: '< ', suf: ' min', v: 'Avg. emergency arrival' },
          ].map((m, i) => (
            <div key={m.v} data-reveal style={{ background:'#fff', padding:'24px 22px', transitionDelay: `${i*80}ms` }}>
              <div style={{ fontSize: 34, fontWeight: 600, letterSpacing:'-0.03em' }}>
                {m.k !== null
                  ? <CountUp to={m.k} prefix={m.prefix || ''} suffix={m.suf || ''}/>
                  : m.text}
              </div>
              <div style={{ color:'var(--muted)', fontSize: 13, marginTop: 4 }}>{m.v}</div>
            </div>
          ))}
        </div>

        {/* Partner logos — word-marks as original typographic chips */}
        <div style={{
          background:'#fff',
          border:'1px solid var(--line-soft)',
          borderRadius:'var(--radius-xl)',
          padding:'38px 28px',
        }}>
          <div style={{
            fontSize: 12, fontWeight: 600,
            letterSpacing:'0.08em', textTransform:'uppercase',
            color:'var(--muted)', textAlign:'center', marginBottom: 28,
          }}>
            Serving, on standing schedule
          </div>
          <div style={{
            display:'grid',
            gridTemplateColumns:'repeat(4, 1fr)',
            gap: 22,
            alignItems:'center',
          }} className="partner-row">
            {PROPERTIES.map((p, i) => (
              <div key={p.id} data-reveal className="lift" style={{
                textAlign:'center',
                display:'flex', flexDirection:'column', alignItems:'center', gap: 10,
                padding: '14px 8px',
                borderRadius: 12,
                cursor: 'default',
                transitionDelay: `${i * 45}ms`,
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: 'var(--bg-soft)',
                  color: 'var(--ink)',
                  display:'grid', placeItems:'center',
                  fontFamily: 'var(--mono)', fontSize: 13, fontWeight: 600,
                  letterSpacing: 0,
                  border: '1px solid var(--line-soft)',
                }}>
                  {p.name.split(/\s+/).filter(w => /^[A-Z]/.test(w)).slice(0,2).map(w => w[0]).join('') || p.short[0]}
                </div>
                <div style={{
                  fontSize: 14, fontWeight: 500,
                  letterSpacing:'-0.01em', color:'var(--ink)',
                  lineHeight: 1.25,
                }}>{p.name}</div>
                <div style={{
                  fontSize: 12, color:'var(--muted)',
                }}>{p.city}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Quote / endorsement */}
        <div style={{
          marginTop: 32,
          background: 'var(--bg)',
          border: '1px solid var(--line-soft)',
          borderRadius: 'var(--radius-xl)',
          padding: '40px 40px 36px',
          display: 'grid',
          gridTemplateColumns: '1fr auto',
          gap: 32,
          alignItems: 'center',
        }} className="quote-card">
          <div>
            <div style={{
              fontSize: 40, lineHeight: 1, color:'var(--muted)',
              fontFamily: 'var(--mono)', marginBottom: 8,
            }}>"</div>
            <div style={{
              fontSize: 'clamp(20px, 1.8vw, 26px)',
              lineHeight: 1.35,
              letterSpacing:'-0.015em',
              fontWeight: 500,
              color: 'var(--ink)',
              maxWidth: 760,
            }}>
              Show up, do the work, send clean photos. Our turn crew doesn't think twice —
              H A is on the schedule.
            </div>
            <div style={{ marginTop: 18, fontSize: 14, color:'var(--muted)' }}>
              Property operations · Multifamily · South Florida
            </div>
          </div>
          <a href="#quote" className="btn btn-primary">Become a partner <Icon.Chevron/></a>
        </div>
      </div>

      <style>{`
        @media (max-width: 1100px) {
          .partner-row { grid-template-columns: repeat(3, 1fr) !important; row-gap: 24px !important; }
        }
        @media (max-width: 720px) {
          .partner-row { grid-template-columns: repeat(2, 1fr) !important; }
          .trust-metrics { grid-template-columns: repeat(2, 1fr) !important; }
          .quote-card { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function Process() {
  const steps = [
    { n: '01', t: 'Work order', b: 'PM sends the unit list, turn date and access notes. We confirm within the hour on business days.' },
    { n: '02', t: 'Site assessment', b: 'Tech notes stains, stretch, pad condition and any water events. Scope adjusted before invoice.' },
    { n: '03', t: 'Clean & treat', b: 'Pre-condition, extract, deodorize. Deep-stain, re-seam and pet treatments as flagged.' },
    { n: '04', t: 'QC & turnover', b: 'Walk-through photos sent with the invoice. Unit ready for move-in inspection the same day.' },
  ];
  return (
    <section id="process" style={{ padding: '96px 0', background: 'var(--bg)' }}>
      <div className="wrap-wide">
        <div className="eyebrow">How it works</div>
        <h2 className="h-1" style={{ margin: '8px 0 40px', maxWidth: 820 }}>
          Four steps from work order to walkthrough.
        </h2>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 16,
        }} className="process-grid">
          {steps.map((s, i) => (
            <div key={s.n} className="lift" data-reveal style={{
              background: 'var(--bg-soft)',
              borderRadius: 'var(--radius-lg)',
              padding: '28px 24px',
              minHeight: 220,
              display:'flex', flexDirection:'column',
              transitionDelay: `${i * 90}ms`,
            }}>
              <div style={{
                fontFamily: 'var(--mono)', fontSize: 12, color:'var(--muted)',
                letterSpacing: '0.06em', marginBottom: 20,
              }}>STEP {s.n}</div>
              <div className="h-3" style={{ margin: 0, marginBottom: 8 }}>{s.t}</div>
              <div style={{ color:'var(--ink-2)', fontSize: 15, lineHeight: 1.5 }}>{s.b}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .process-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 560px) {
          .process-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={{ padding: '96px 0', background: 'var(--bg-soft)' }}>
      <div className="wrap">
        <div className="eyebrow" style={{ textAlign:'center' }}>Frequently asked</div>
        <h2 className="h-1" style={{ margin: '8px 0 36px', textAlign:'center' }}>
          Questions we get from property managers.
        </h2>
        <div style={{
          background: '#fff', borderRadius: 'var(--radius-xl)',
          border: '1px solid var(--line-soft)', overflow: 'hidden',
        }}>
          {FAQS.map((f, i) => {
            const active = open === i;
            return (
              <div key={i} style={{ borderTop: i === 0 ? 'none' : '1px solid var(--line-soft)' }}>
                <button onClick={() => setOpen(active ? -1 : i)} style={{
                  width: '100%', textAlign: 'left',
                  background: 'transparent', border: 'none',
                  padding: '22px 28px',
                  display:'flex', alignItems:'center', justifyContent:'space-between',
                  cursor: 'pointer',
                  fontSize: 18, fontWeight: 500, letterSpacing: '-0.015em',
                  color: 'var(--ink)',
                }}>
                  <span>{f.q}</span>
                  <span style={{
                    width: 28, height: 28, borderRadius: 999,
                    background: active ? 'var(--ink)' : 'var(--bg-soft)',
                    color: active ? '#fff' : 'var(--ink)',
                    display:'grid', placeItems:'center',
                    transition: 'background .3s, color .3s, transform .4s cubic-bezier(.2,.7,.2,1)',
                    transform: active ? 'rotate(180deg)' : 'rotate(0deg)',
                    flex: '0 0 auto',
                  }}>
                    {active ? <Icon.Minus/> : <Icon.Plus/>}
                  </span>
                </button>
                <div style={{
                  maxHeight: active ? 400 : 0,
                  opacity: active ? 1 : 0,
                  overflow: 'hidden',
                  transition: 'max-height .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease',
                }}>
                  <div style={{
                    padding: '0 28px 24px',
                    color: 'var(--ink-2)', fontSize: 16, lineHeight: 1.5,
                    maxWidth: 760,
                  }}>{f.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function QuoteForm() {
  const [form, setForm] = useState({
    name: '', company: '', property: 'general', phone: '', email: '',
    service: 'Carpet cleaning', units: '', notes: '',
  });
  const [sent, setSent] = useState(false);
  const update = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    if (!form.name || (!form.phone && !form.email)) return;
    setSent(true);
  };

  const field = {
    width: '100%', background: '#fff',
    border: '1px solid var(--line)',
    borderRadius: 'var(--radius-sm)',
    padding: '12px 14px', fontSize: 15,
    fontFamily: 'inherit', color: 'var(--ink)',
    outline: 'none',
    transition: 'border-color .15s, box-shadow .15s',
  };
  const label = { fontSize: 13, color: 'var(--muted)', marginBottom: 6, display:'block', fontWeight: 500 };

  return (
    <section id="quote" style={{ padding: '96px 0', background: 'var(--bg)' }}>
      <div className="wrap-wide" style={{
        display:'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56,
        alignItems: 'start',
      }} className="quote-grid">
        <div>
          <div className="eyebrow">Request a quote</div>
          <h2 className="h-1" style={{ margin: '8px 0 16px' }}>
            Tell us about<br/>your property.
          </h2>
          <p className="sub" style={{ maxWidth: 460 }}>
            A real human responds within the hour on business days. For water events, call the 24/7 line instead — this form queues behind dispatch.
          </p>

          <div style={{ marginTop: 32, display: 'flex', flexDirection:'column', gap: 14, fontSize: 15, color:'var(--ink-2)' }}>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <span style={{ color:'var(--muted)' }}><Icon.Phone size={16}/></span>
              <a href="tel:+19546358521">(954) 635-8521</a>
              <span style={{ color:'var(--muted)' }}>·</span>
              <a href="tel:+17544228677">(754) 422-8677</a>
            </div>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <span style={{ color:'var(--muted)' }}><Icon.Mail size={16}/></span>
              <a href="mailto:hacarpetcleaningcorp@gmail.com">hacarpetcleaningcorp@gmail.com</a>
            </div>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <span style={{ color:'var(--muted)' }}><Icon.Pin size={16}/></span>
              <span>P.O. Box 834345 · Hollywood, FL 33083</span>
            </div>
          </div>
        </div>

        <div style={{
          background: 'var(--bg-soft)',
          borderRadius: 'var(--radius-xl)',
          padding: 32,
        }}>
          {sent ? (
            <div style={{ padding: '40px 12px', textAlign:'center' }}>
              <div style={{
                width: 56, height: 56, borderRadius: 999,
                background: 'var(--link)', color:'#fff',
                display:'grid', placeItems:'center',
                margin: '0 auto 16px',
              }}><Icon.Check size={24}/></div>
              <div className="h-3" style={{ margin: 0, marginBottom: 6 }}>Request received.</div>
              <p style={{ color:'var(--muted)', maxWidth: 360, margin:'0 auto' }}>
                We'll reply within the hour on business days. For same-day water events, call (954) 635-8521.
              </p>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display:'grid', gap: 14 }}>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 14 }} className="qrow">
                <div>
                  <label style={label}>Contact name</label>
                  <input required style={field} value={form.name} onChange={update('name')} placeholder="Jane Doe" />
                </div>
                <div>
                  <label style={label}>Company</label>
                  <input style={field} value={form.company} onChange={update('company')} placeholder="Property management" />
                </div>
              </div>

              <div>
                <label style={label}>Property</label>
                <select style={field} value={form.property} onChange={update('property')}>
                  {PROPERTIES.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                  <option value="other">Other / new property</option>
                </select>
              </div>

              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 14 }} className="qrow">
                <div>
                  <label style={label}>Phone</label>
                  <input style={field} value={form.phone} onChange={update('phone')} placeholder="(xxx) xxx-xxxx" />
                </div>
                <div>
                  <label style={label}>Email</label>
                  <input type="email" style={field} value={form.email} onChange={update('email')} placeholder="you@company.com" />
                </div>
              </div>

              <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap: 14 }} className="qrow">
                <div>
                  <label style={label}>Service</label>
                  <select style={field} value={form.service} onChange={update('service')}>
                    <option>Carpet cleaning</option>
                    <option>Tile & grout</option>
                    <option>Vinyl strip / re-coat</option>
                    <option>A/C duct cleaning</option>
                    <option>Dryer vent cleaning</option>
                    <option>Emergency water damage</option>
                    <option>Full-property walk-through</option>
                  </select>
                </div>
                <div>
                  <label style={label}>Units</label>
                  <input style={field} value={form.units} onChange={update('units')} placeholder="# of units" />
                </div>
              </div>

              <div>
                <label style={label}>Notes</label>
                <textarea style={{...field, minHeight: 100, resize:'vertical'}} value={form.notes} onChange={update('notes')} placeholder="Turn dates, access, anything we should know." />
              </div>

              <div style={{ display:'flex', gap: 12, alignItems:'center', marginTop: 4 }}>
                <button type="submit" className="btn btn-primary">Submit request <Icon.Chevron/></button>
                <span style={{ fontSize: 13, color:'var(--muted)' }}>No spam. We only reply to the address you provide.</span>
              </div>
            </form>
          )}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .quote-grid { grid-template-columns: 1fr !important; }
          .qrow { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--bg-soft)', borderTop: '1px solid var(--line-soft)', padding: '48px 0 36px', fontSize: 13, color: 'var(--muted)' }}>
      <div className="wrap-wide">
        <div style={{
          display:'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40,
          marginBottom: 32,
        }} className="foot-grid">
          <div>
            <div style={{ display:'inline-flex', alignItems:'center', gap:8, color:'var(--ink)', fontWeight:600, fontSize:15 }}>
              <span style={{ display:'inline-grid', placeItems:'center', width:22, height:22, borderRadius:6, background:'var(--ink)', color:'#fff', fontSize:11, fontWeight:700 }}>HA</span>
              H A Carpet Cleaning Corp.
            </div>
            <p style={{ marginTop: 10, maxWidth: 360, lineHeight: 1.5 }}>
              Commercial carpet, hard floors, air and water-damage services for multifamily properties in South Florida.
            </p>
          </div>
          <div>
            <div style={{ color:'var(--ink)', fontWeight:500, marginBottom: 10 }}>Services</div>
            <div style={{ display:'flex', flexDirection:'column', gap: 8 }}>
              <a href="#services" style={{ color:'inherit' }}>Carpet</a>
              <a href="#services" style={{ color:'inherit' }}>Tile &amp; vinyl</a>
              <a href="#services" style={{ color:'inherit' }}>A/C &amp; dryer vents</a>
              <a href="#water" style={{ color:'inherit' }}>Water damage</a>
            </div>
          </div>
          <div>
            <div style={{ color:'var(--ink)', fontWeight:500, marginBottom: 10 }}>Company</div>
            <div style={{ display:'flex', flexDirection:'column', gap: 8 }}>
              <a href="#pricing" style={{ color:'inherit' }}>Pricing</a>
              <a href="#properties" style={{ color:'inherit' }}>Properties</a>
              <a href="#process" style={{ color:'inherit' }}>Process</a>
              <a href="#faq" style={{ color:'inherit' }}>FAQ</a>
            </div>
          </div>
          <div>
            <div style={{ color:'var(--ink)', fontWeight:500, marginBottom: 10 }}>Contact</div>
            <div style={{ display:'flex', flexDirection:'column', gap: 8 }}>
              <a href="tel:+19546358521" style={{ color:'inherit' }}>(954) 635-8521</a>
              <a href="tel:+17544228677" style={{ color:'inherit' }}>(754) 422-8677</a>
              <a href="mailto:hacarpetcleaningcorp@gmail.com" style={{ color:'inherit' }}>Email</a>
            </div>
          </div>
        </div>
        <div style={{
          display:'flex', justifyContent:'space-between', alignItems:'center',
          flexWrap:'wrap', gap: 10,
          paddingTop: 22, borderTop: '1px solid var(--line-soft)',
          fontSize: 12,
        }}>
          <div>© 2026 H A Carpet Cleaning Corp. P.O. Box 834345, Hollywood, FL 33083.</div>
          <div style={{ display:'flex', gap: 18 }}>
            <a href="#" style={{ color:'inherit' }}>Privacy</a>
            <a href="#" style={{ color:'inherit' }}>Terms</a>
            <a href="#" style={{ color:'inherit' }}>Accessibility</a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .foot-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 500px) {
          .foot-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { WaterDamage, Properties, Process, FAQ, QuoteForm, Footer });