(function(){
/* global React, Link, Ph, Icon, Breadcrumbs, FAQList, RelatedLinks */
const { useState } = React;

// ───── ABOUT ─────
function About() {
  return (
    <div>
      <div className="wrap"><Breadcrumbs items={[{ label:'Home', to:'/' }, { label:'About' }]}/></div>
      <section style={{ padding: '24px 0 72px' }}>
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <span className="eyebrow">About Coastline</span>
            <h1 style={{ marginTop: 14 }}>A family-run gutter company <span className="ital">built on long-term relationships.</span></h1>
            <p style={{ fontSize: 17, marginTop: 22, color: 'var(--color-text-muted)', maxWidth: 540 }}>
              Coastline started in Glendale in 2003 with a single truck and a simple idea: do careful work, treat people fairly, and stand behind what you install. Twenty years later, we’re still doing the same thing — just with a bigger crew and a lot more customers who call us back.
            </p>
          </div>
          <Ph src="assets/team-van.jpg" alt="The Coastline Gutter Pros crew in front of a company Transit van in Los Angeles." ratio="4/5" pos="center"/>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--color-surface)', borderTop: '1px solid var(--color-border)', borderBottom: '1px solid var(--color-border)' }}>
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 56 }}>
          <div>
            <span className="eyebrow">Our team</span>
            <h2 style={{ marginTop: 12 }}>Our own employees. No subcontractors.</h2>
          </div>
          <div style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--color-text)' }}>
            <p>Every installer on a Coastline job is a licensed member of our team. We don’t farm jobs out, and we don’t run different crews on different days. That consistency matters because gutter work comes down to the small things — how the hangers are spaced, how the corners are formed, where the outlet sits, how the slope is set. Those details are the difference between a system that lasts 30 years and one that fails in five.</p>
            <p style={{ marginTop: 18 }}>Because the same people do the estimating, installing, and warranty service, we can stand behind our work without hesitation. If something isn’t right, you’ll hear from a familiar voice, and the fix will be handled by the people who originally did the job.</p>
          </div>
        </div>
        <style>{`@media(max-width:860px){section.section>.wrap{grid-template-columns:1fr !important}}`}</style>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
            {[
              ['Honest recommendations', 'If a cheaper material would serve your home just as well, we’ll say so. If you don’t need gutter guards, we’ll tell you. No one on our team works on commission.'],
              ['A full look at the system', 'We check the fascia, drip edge, soffit, and drainage path — not just the gutter itself. Fixing a gutter without addressing the surrounding problems rarely solves anything for long.'],
              ['The small things that matter', 'Drop cloths on the driveway. A clean worksite at the end of the day. A water test before we leave. Warranty paperwork handed to you in person. None of it is glamorous, but all of it is the job.'],
            ].map(([t, s]) => (
              <div key={t} style={{ borderTop: '2px solid var(--color-primary)', paddingTop: 22 }}>
                <h3 style={{ marginBottom: 10 }}>{t}</h3>
                <p className="muted" style={{ fontSize: 14 }}>{s}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`@media(max-width:860px){section.section>.wrap>div{grid-template-columns:1fr !important}}`}</style>
      </section>

      <section className="section" style={{ background: 'var(--color-accent-soft)' }}>
        <div className="wrap" style={{ textAlign: 'center' }}>
          <span className="eyebrow">Service area</span>
          <h2 style={{ marginTop: 12, maxWidth: 700, margin: '12px auto 0' }}>
            Los Angeles County, Orange County, and the Inland Empire
          </h2>
          <p className="muted" style={{ maxWidth: 560, margin: '18px auto 0', fontSize: 16 }}>
            From older Craftsman homes in Altadena to single-story ranch houses in Encino, we’ve worked on just about every type of home in the region. If you’re in our coverage area, there’s a good chance we’ve already done a job nearby.
          </p>
          <Link to="/service-areas" className="btn btn-secondary" style={{ marginTop: 28 }}>Explore service areas <Icon name="arrow" size={14}/></Link>
        </div>
      </section>
    </div>
  );
}

// ───── CONTACT ─────
const ZAPIER_WEBHOOK = 'https://hooks.zapier.com/hooks/catch/21809085/uv1ibvd/';

function Contact() {
  const [status, setStatus] = useState('idle');
  const [form, setForm] = useState({ name:'', email:'', phone:'', message:'' });

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const payload = {
        form_source: 'contact',
        submitted_at: new Date().toISOString(),
        page_url: window.location.href,
        user_agent: navigator.userAgent,
        name: form.name,
        email: form.email,
        phone: form.phone,
        message: form.message,
      };
      const params = new URLSearchParams();
      Object.entries(payload).forEach(([key, value]) => {
        params.append(key, typeof value === 'object' ? JSON.stringify(value) : String(value));
      });
      const res = await fetch(ZAPIER_WEBHOOK, { method: 'POST', body: params });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      setStatus('success');
    } catch (err) {
      setStatus('error');
    }
  };

  return (
    <div>
      <div className="wrap"><Breadcrumbs items={[{ label:'Home', to:'/' }, { label:'Contact' }]}/></div>
      <section style={{ padding: '24px 0 72px' }}>
        <div className="wrap">
          <span className="eyebrow">Contact</span>
          <h1 style={{ marginTop: 14, maxWidth: 760 }}>Tell us what’s going on. <span className="ital">We’ll take care of it.</span></h1>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 56, alignItems: 'start' }}>
          <div className="card" style={{ padding: 32 }}>
            <h3 style={{ marginBottom: 18 }}>Coastline Gutter Pros</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, fontSize: 15 }}>
              <InfoRow icon="phone" label="Phone"><a href="tel:+13234521809">(323) 452-1809</a></InfoRow>
              <InfoRow icon="mail" label="Email"><a href="mailto:admin@coastlinegutterpros.com">admin@coastlinegutterpros.com</a></InfoRow>
              <InfoRow icon="pin" label="Address">2640 N San Fernando Rd B5<br/>Los Angeles, CA 90065</InfoRow>
              <InfoRow icon="clock" label="Hours">Mon–Sat · 7 AM – 6 PM<br/>Sun · By appointment</InfoRow>
            </div>
            <div style={{ marginTop: 24 }}>
              <Ph src="assets/van-side.jpg" alt="Coastline Gutter Pros service van parked on a Los Angeles street." ratio="4/3" pos="center"/>
            </div>
            <div style={{ background: 'var(--color-accent-soft)', padding: 18, borderRadius: 12, marginTop: 24, fontSize: 14 }}>
              <strong style={{ color: 'var(--color-primary)' }}>Looking for a full quote?</strong><br/>
              <span className="muted">The <Link to="/gutter-guide" style={{ textDecoration: 'underline', color: 'var(--color-primary)' }}>Gutter Guide</Link> takes about three minutes and gives our estimators everything they need to get you an accurate price.</span>
            </div>
          </div>

          <div className="card" style={{ padding: 32 }}>
            <h3 style={{ marginBottom: 6 }}>Send us a message</h3>
            <p className="muted" style={{ fontSize: 14, marginBottom: 22 }}>During business hours, we’ll get back to you within 15 minutes.</p>
            {status === 'success' ? (
              <div style={{ padding: '40px 20px', textAlign: 'center', background: 'var(--color-accent-soft)', borderRadius: 12 }}>
                <div style={{ width: 48, height: 48, borderRadius: 99, background: 'var(--color-primary)', color: '#F8F4EC', display:'inline-flex', alignItems:'center', justifyContent:'center', marginBottom: 14 }}><Icon name="check" size={22}/></div>
                <div style={{ fontWeight: 600, color: 'var(--color-primary)', fontSize: 17 }}>Thanks, {form.name.split(' ')[0] || 'friend'}.</div>
                <div className="muted" style={{ fontSize: 14, marginTop: 8 }}>Your message is in. We'll be in touch shortly. If it's urgent, please call <a href="tel:+13234521809" style={{ color: 'var(--color-primary)' }}>(323) 452-1809</a>.</div>
              </div>
            ) : (
              <form onSubmit={handleSubmit} style={{ display: 'grid', gap: 14 }}>
                <div className="field">
                  <label>Name</label>
                  <input required className="input" disabled={status === 'sending'} value={form.name} onChange={(e)=>setForm({...form, name:e.target.value})}/>
                </div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 14 }}>
                  <div className="field">
                    <label>Email</label>
                    <input required type="email" className="input" disabled={status === 'sending'} value={form.email} onChange={(e)=>setForm({...form, email:e.target.value})}/>
                  </div>
                  <div className="field">
                    <label>Phone</label>
                    <input required type="tel" className="input" disabled={status === 'sending'} value={form.phone} onChange={(e)=>setForm({...form, phone:e.target.value})}/>
                  </div>
                </div>
                <div className="field">
                  <label>How can we help?</label>
                  <textarea className="textarea" disabled={status === 'sending'} placeholder="New install, repair, cleaning, guards, commercial…" value={form.message} onChange={(e)=>setForm({...form, message:e.target.value})}/>
                </div>
                {status === 'error' && (
                  <div style={{ padding: '12px 16px', borderRadius: 10, background: '#FAEEED', color: '#7A3A38', fontSize: 14 }}>
                    We couldn't send your message. Please call <a href="tel:+13234521809" style={{ color: '#7A3A38', textDecoration: 'underline', fontWeight: 600 }}>(323) 452-1809</a> or email <a href="mailto:admin@coastlinegutterpros.com" style={{ color: '#7A3A38', textDecoration: 'underline', fontWeight: 600 }}>admin@coastlinegutterpros.com</a> directly.
                  </div>
                )}
                <button type="submit" className="btn btn-primary btn-lg" style={{ marginTop: 6 }} disabled={status === 'sending'}>
                  {status === 'sending' ? 'Sending…' : <>Send message <Icon name="arrow" size={14}/></>}
                </button>
              </form>
            )}
          </div>
        </div>
        <style>{`@media(max-width:860px){section .wrap{grid-template-columns:1fr !important}}`}</style>
      </section>
    </div>
  );
}
function InfoRow({ icon, label, children }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: 14, alignItems: 'start' }}>
      <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--color-accent-soft)', color: 'var(--color-primary)', display:'flex', alignItems:'center', justifyContent:'center' }}>
        <Icon name={icon} size={16}/>
      </div>
      <div>
        <div style={{ fontSize: 11, letterSpacing: '.1em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--color-text-muted)', marginBottom: 2 }}>{label}</div>
        <div style={{ color: 'var(--color-primary)', fontWeight: 500 }}>{children}</div>
      </div>
    </div>
  );
}

// ───── BLOG INDEX ─────
function BlogIndex() {
  const posts = [
    { slug:'gutter-cleaning-frequency-los-angeles', title:'How often should you clean your gutters in Los Angeles?', meta:'Seasonal schedule for LA homeowners, adjusted for tree cover and microclimate.', words:1400, kw:'gutter cleaning los angeles', intent:'informational', date:'Mar 2026', category:'Maintenance' },
    { slug:'k-style-vs-half-round', title:'K-style vs half-round gutters: which is right for your home?', meta:'Profile comparison with capacity math and architecture-match guidance.', words:1600, kw:'k-style vs half-round', intent:'informational / commercial', date:'Feb 2026', category:'Materials' },
    { slug:'seamless-vs-sectional', title:'Seamless vs sectional gutters: the real difference', meta:'Why fewer seams = fewer failure points, plus when sectional still makes sense.', words:1200, kw:'seamless gutters los angeles', intent:'commercial', date:'Feb 2026', category:'Installation' },
    { slug:'copper-gutters-worth-it', title:'Copper gutters: are they worth the cost in Southern California?', meta:'Honest cost-vs-value analysis for LA homes — when copper pays off, when it doesn\'t.', words:1800, kw:'copper gutters los angeles', intent:'commercial', date:'Jan 2026', category:'Materials' },
    { slug:'do-gutter-guards-work', title:'Gutter guards: do they actually work?', meta:'Tested guard types, where they fail, and who should skip them entirely.', words:1500, kw:'gutter guards los angeles', intent:'informational', date:'Jan 2026', category:'Add-ons' },
    { slug:'signs-replace-gutters', title:'Signs your gutters need to be replaced (not just repaired)', meta:'12 visual clues — with photos — that push you from patch-job to replacement.', words:1100, kw:'gutter replacement los angeles', intent:'commercial', date:'Dec 2025', category:'Repair' },
    { slug:'gutter-installation-cost-los-angeles-2026', title:'How much does gutter installation cost in Los Angeles? 2026 pricing guide', meta:'Real price ranges by material, linear foot, home size, and complexity.', words:2000, kw:'gutter installation cost los angeles', intent:'transactional', date:'Dec 2025', category:'Pricing' },
    { slug:'gutter-sizing-5-6-7', title:'Rain gutter sizing: when to choose 5" vs 6" vs 7"', meta:'Capacity math for roof area, rainfall intensity, and downspout count.', words:1300, kw:'gutter size', intent:'informational', date:'Nov 2025', category:'Materials' },
    { slug:'prep-for-california-rainy-season', title:'How to prepare your gutters for the California rainy season', meta:'October checklist: inspection, cleanout, downspout flush, guard check.', words:900, kw:'gutter maintenance los angeles', intent:'informational', date:'Oct 2025', category:'Maintenance' },
    { slug:'commercial-vs-residential-gutters', title:"Commercial vs residential gutters: what's different", meta:'Box gutters, heavier gauges, scupper boxes, and drainage math.', words:1400, kw:'commercial gutters los angeles', intent:'informational', date:'Oct 2025', category:'Commercial' },
    { slug:'preventing-foundation-damage-drainage', title:'Preventing foundation damage: the role of downspouts and drainage', meta:'Where LA homes actually leak into foundations — and how to route water away.', words:1500, kw:'gutter drainage foundation', intent:'informational', date:'Sep 2025', category:'Drainage' },
    { slug:'la-gutter-maintenance-checklist', title:'Gutter maintenance checklist for LA homeowners', meta:'Quarterly checklist tuned to LA\'s jacarandas, pines, palms, and Santa Anas.', words:1000, kw:'gutter maintenance checklist', intent:'informational', date:'Sep 2025', category:'Maintenance' },
  ];
  return (
    <div>
      <div className="wrap"><Breadcrumbs items={[{ label:'Home', to:'/' }, { label:'Blog' }]}/></div>
      <section style={{ padding: '24px 0 40px' }}>
        <div className="wrap">
          <span className="eyebrow">From the field</span>
          <h1 style={{ marginTop: 14, maxWidth: 720 }}>
            Notes from our team <span className="ital">after years on LA roofs.</span>
          </h1>
          <p className="muted" style={{ maxWidth: 540, fontSize: 17, marginTop: 18 }}>
            Straightforward writing on materials, maintenance, and drainage — the kind of advice we give customers at the estimate. Each article is written by someone on our installation team.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 32 }}>
        <div className="wrap">
          <Link to={`/blog/${posts[0].slug}`} style={{ textDecoration:'none' }}>
            <div className="card" style={{ padding: 0, overflow: 'hidden', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 0 }}>
              <Ph src="assets/house-exterior-install.jpg" alt="Two Coastline installers working on a gutter at a Los Angeles home." ratio="4/3" pos="center"/>
              <div style={{ padding: 40, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div className="tag" style={{ marginBottom: 14 }}>Featured</div>
                <h2 style={{ fontSize: 'clamp(1.6rem, 2.4vw, 2rem)', lineHeight: 1.15 }}>{posts[0].title}</h2>
                <p className="muted" style={{ marginTop: 16, fontSize: 15 }}>{posts[0].meta}</p>
                <div style={{ marginTop: 22, fontSize: 13, color: 'var(--color-text-muted)' }}>{posts[0].date} · {posts[0].words.toLocaleString()} words · {posts[0].category}</div>
              </div>
            </div>
          </Link>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="wrap">
          <div className="grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {posts.slice(1).map((p, i) => (
              <Link key={p.slug} to={`/blog/${p.slug}`} className="card" style={{ padding: 0, overflow:'hidden', textDecoration: 'none', display:'flex', flexDirection:'column' }}>
                <Ph src={["assets/toolbox.jpg","assets/installer-fascia.jpg","assets/tape-notebook.jpg","assets/ladders-driveway.jpg","assets/installer-drill.jpg","assets/van-side.jpg","assets/crew-with-ladders.jpg","assets/house-full-install.jpg"][i % 8]} alt={p.category} ratio="4/3" pos="center"/>
                <div style={{ padding: 24, display:'flex', flexDirection:'column', gap: 10, flex: 1 }}>
                  <div className="tag tag-muted" style={{ fontSize: 11, alignSelf: 'flex-start' }}>{p.category}</div>
                  <h3 style={{ fontSize: 17, lineHeight: 1.3 }}>{p.title}</h3>
                  <p className="muted" style={{ fontSize: 13, flex: 1 }}>{p.meta}</p>
                  <div style={{ fontSize: 12, color: 'var(--color-text-muted)', marginTop: 8, borderTop: '1px solid var(--color-border)', paddingTop: 12 }}>{p.date} · {p.words.toLocaleString()} words</div>
                </div>
              </Link>
            ))}
          </div>
        </div>
        <style>{`@media(max-width:860px){section .grid{grid-template-columns:1fr !important}}`}</style>
      </section>

      <section className="section" style={{ background: 'var(--color-accent-soft)' }}>
        <div className="wrap-n" style={{ textAlign: 'center' }}>
          <span className="eyebrow">Newsletter</span>
          <h2 style={{ marginTop: 12 }}>Seasonal gutter reminders, <span className="ital">four times a year.</span></h2>
          <p className="muted" style={{ marginTop: 12 }}>A short note at the start of each season with one tip and a reminder to check your gutters. That’s it.</p>
          <form style={{ display: 'flex', gap: 10, maxWidth: 440, margin: '24px auto 0' }} onSubmit={(e) => { e.preventDefault(); alert("Thanks — we'll keep it short."); }}>
            <input required type="email" className="input" placeholder="you@home.com" style={{ flex: 1 }}/>
            <button type="submit" className="btn btn-primary">Subscribe</button>
          </form>
        </div>
      </section>
    </div>
  );
}

// ───── SINGLE POST (template) ─────
function BlogPost({ slug }) {
  // Just render the featured post template
  return (
    <div>
      <div className="wrap"><Breadcrumbs items={[{ label:'Home', to:'/' }, { label:'Blog', to:'/blog' }, { label:'Article' }]}/></div>
      <article style={{ padding: '16px 0 72px' }}>
        <div className="wrap-n">
          <div className="tag" style={{ marginBottom: 16 }}>Maintenance</div>
          <h1 style={{ maxWidth: 760 }}>How often should you clean your gutters in Los Angeles?</h1>
          <div style={{ display:'flex', alignItems:'center', gap: 16, marginTop: 22, color: 'var(--color-text-muted)', fontSize: 14 }}>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <div style={{ width: 32, height: 32, borderRadius: 99, background: 'var(--color-accent-soft)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily: 'var(--font-display)', color: 'var(--color-primary)' }}>M</div>
              <span>Mateo R. · Lead estimator</span>
            </div>
            <span>·</span>
            <span>Published Mar 2026 · 6 min read</span>
          </div>
        </div>

        <div className="wrap-n" style={{ marginTop: 40 }}>
          <Ph src="assets/installer-fascia.jpg" alt="Coastline installer attaching a dark bronze K-style gutter to fascia." ratio="16/9" pos="center"/>
        </div>

        <div className="wrap-n" style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '240px 1fr', gap: 56, alignItems: 'start' }}>
          <aside style={{ position: 'sticky', top: 96, fontSize: 13 }}>
            <div style={{ fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--color-text-muted)', marginBottom: 14 }}>Contents</div>
            <ol style={{ paddingLeft: 16, margin: 0, color: 'var(--color-primary)', display: 'grid', gap: 10 }}>
              <li>The short answer</li>
              <li>What actually clogs LA gutters</li>
              <li>Tree-by-tree schedule</li>
              <li>Microclimate adjustments</li>
              <li>When to call a pro</li>
              <li>The cost math</li>
            </ol>
          </aside>

          <div style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--color-text)' }}>
            <p><strong>The short answer:</strong> twice a year is right for most Los Angeles homes — once in late spring after the jacarandas finish blooming, and again in early fall before the first rain. If you have a pine, liquidambar, or sycamore overhanging the roof, plan on three cleanings a year.</p>
            <p style={{ marginTop: 22 }}>Gutter cleaning in Los Angeles is a little different than in most parts of the country. We don’t get a single, defined leaf season. Instead, we see jacaranda petals in June, liquidambar seed pods in winter, palm fronds year-round, and a steady stream of pine needles in the hills. Each one causes a different kind of clog, which is why timing matters.</p>

            <h2 style={{ marginTop: 40 }}>What actually clogs LA gutters</h2>
            <p style={{ marginTop: 14 }}>Based on a year of service calls across Altadena, Pasadena, Glendale, and the Valley, here’s what we pull out of gutters most often:</p>
            <ul style={{ marginTop: 16, paddingLeft: 20 }}>
              <li><strong>Jacaranda petals</strong> — sticky when wet, and they compact into a dense mat that blocks outlets.</li>
              <li><strong>Pine needles</strong> — slip through any mesh guard with openings larger than 2mm.</li>
              <li><strong>Palm fiber</strong> — long strands that wrap around outlet strainers and stop drainage entirely.</li>
              <li><strong>Oak tassels</strong> — a short but heavy problem in March and April.</li>
              <li><strong>Liquidambar seed pods</strong> — they don’t usually clog the gutter, but they jam downspouts.</li>
            </ul>

            <h2 style={{ marginTop: 40 }}>When you can stretch out the schedule</h2>
            <p style={{ marginTop: 14 }}>If your home has a tile roof, no trees nearby, and no neighboring trees overhanging the property, you can often go to an annual cleaning. We’ve inspected plenty of mid-century homes in Encino where the gutters were essentially clean after 14 months. If that’s the case, we’ll tell you and adjust our recommendation.</p>

            <div style={{ background: 'var(--color-accent-soft)', padding: 28, borderRadius: 14, margin: '40px 0' }}>
              <h3 style={{ marginBottom: 10 }}>Related reading</h3>
              <ul style={{ margin: 0, paddingLeft: 18, display: 'grid', gap: 8 }}>
                <li><Link to="/services/gutter-cleaning" style={{ color: 'var(--color-primary)', textDecoration: 'underline' }}>Our gutter cleaning service</Link></li>
                <li><Link to="/blog/do-gutter-guards-work" style={{ color: 'var(--color-primary)', textDecoration: 'underline' }}>Gutter guards: do they actually work?</Link></li>
                <li><Link to="/blog/prep-for-california-rainy-season" style={{ color: 'var(--color-primary)', textDecoration: 'underline' }}>Prepping for the California rainy season</Link></li>
              </ul>
            </div>

            <h2 style={{ marginTop: 40 }}>The cost of cleaning vs. the cost of not cleaning</h2>
            <p style={{ marginTop: 14 }}>A professional cleaning in Los Angeles typically runs between $180 and $320 for a single-family home. Skipping it often leads to the same cost plus fascia damage, leak repairs, or water getting behind your foundation. Cleaning is one of the least expensive services we offer, and in our experience, the one that prevents the most costly problems.</p>

            <h2 style={{ marginTop: 40 }}>When to call us</h2>
            <p style={{ marginTop: 14 }}>If water is spilling over the front of the gutter during a rain, streaking down the fascia, or pooling at the base of a downspout, the system is clogged and needs attention. Give us a call at <a href="tel:+13234521809" style={{ color: 'var(--color-primary)', textDecoration: 'underline' }}>(323) 452-1809</a>, or request a quote online.</p>

            <div style={{ borderTop: '1px solid var(--color-border)', marginTop: 48, paddingTop: 32, display: 'flex', gap: 16, alignItems: 'center' }}>
              <div style={{ width: 52, height: 52, borderRadius: 99, background: 'var(--color-accent-soft)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--color-primary)' }}>M</div>
              <div>
                <div style={{ fontWeight: 600, color: 'var(--color-primary)' }}>Mateo R.</div>
                <div className="muted" style={{ fontSize: 13 }}>Lead estimator at Coastline Gutter Pros, with twelve years of experience on Los Angeles homes.</div>
              </div>
            </div>
          </div>
        </div>
        <style>{`@media(max-width:860px){article .wrap-n{grid-template-columns:1fr !important} aside{display:none}}`}</style>
      </article>
    </div>
  );
}

Object.assign(window, { About, Contact, BlogIndex, BlogPost });

})();
