(function(){
/* global React, Link, Ph, Icon, Stars, TrustBar, Breadcrumbs */
const { useState, useEffect, useRef } = React;

function TrustindexWidget({ src, style }) {
  const containerRef = useRef(null);
  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    container.appendChild(script);
    return () => {
      if (script.parentNode) script.parentNode.removeChild(script);
    };
  }, [src]);
  return <div ref={containerRef} style={style} />;
}

function Home() {
  return (
    <div>
      <HomeHero />
      <TrustBar />
      <ServicesOverview />
      <WhyUs />
      <FeaturedProducts />
      <ServiceArea />
      <Testimonials />
      <FAQSection />
      <FinalCTA />
    </div>
  );
}

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

function HomeHero() {
  const [quick, setQuick] = useState({ name: '', phone: '', email: '' });
  const [status, setStatus] = useState('idle');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const payload = {
        form_source: 'hero_callback',
        submitted_at: new Date().toISOString(),
        page_url: window.location.href,
        user_agent: navigator.userAgent,
        name: quick.name,
        phone: quick.phone,
        email: quick.email,
      };
      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 (
    <section style={{ padding: '48px 0 72px' }}>
      <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <TrustindexWidget
            src="https://cdn.trustindex.io/loader.js?28f512470f1d6996b376dce2628"
            style={{ marginBottom: 20 }}
          />
          <h1 style={{ marginBottom: 22 }}>
            Los Angeles gutter<br/>
            <span className="ital">installation</span> and repair.
          </h1>
          <p style={{ fontSize: 18, color: 'var(--color-text-muted)', maxWidth: 520, marginBottom: 32 }}>
            Coastline Gutter Pros has been installing and repairing seamless gutters across Los Angeles since 2003. Every job includes a lifetime material warranty and a 5-year workmanship guarantee.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 36 }}>
            <Link to="/gutter-guide" className="btn btn-primary btn-lg">
              Get a Free Quote <Icon name="arrow" size={16}/>
            </Link>
            <a href="tel:+13234521809" className="btn btn-secondary btn-lg">
              <Icon name="phone" size={16}/> (323) 452-1809
            </a>
          </div>

          <div style={{
            background: 'var(--color-surface)', border: '1px solid var(--color-border)',
            borderRadius: 'var(--radius-card)', padding: 22,
            boxShadow: 'var(--shadow-md)', maxWidth: 560,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <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="clock" size={18}/></div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--color-primary)' }}>We'll call you back within 15 minutes.</div>
                <div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>No pressure, no sales pitch. Just a straight answer.</div>
              </div>
            </div>
            {status === 'success' ? (
              <div style={{ padding: '14px 16px', background: 'var(--color-accent-soft)', borderRadius: 10, color: 'var(--color-primary)', fontSize: 14, fontWeight: 500 }}>
                <Icon name="check" size={14}/> &nbsp;Thanks, {quick.name.split(' ')[0] || 'friend'} — we'll be in touch within 15 minutes.
              </div>
            ) : (
              <form onSubmit={handleSubmit}
                    style={{ display: 'grid', gridTemplateColumns: '1fr 1fr auto', gap: 10 }}>
                <input required placeholder="Your name" className="input" disabled={status === 'sending'}
                       value={quick.name} onChange={(e)=>setQuick({ ...quick, name: e.target.value })}/>
                <input required type="tel" placeholder="Phone" className="input" disabled={status === 'sending'}
                       value={quick.phone} onChange={(e)=>setQuick({ ...quick, phone: e.target.value })}/>
                <button className="btn btn-primary" type="submit" disabled={status === 'sending'}>
                  {status === 'sending' ? 'Sending…' : 'Call me'}
                </button>
                <input type="email" placeholder="Email (optional)" className="input" style={{ gridColumn: '1 / -1' }} disabled={status === 'sending'}
                       value={quick.email} onChange={(e)=>setQuick({ ...quick, email: e.target.value })}/>
                {status === 'error' && (
                  <div style={{ gridColumn: '1 / -1', padding: '10px 14px', borderRadius: 10, background: '#FAEEED', color: '#7A3A38', fontSize: 13 }}>
                    Something went wrong sending your request. 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>.
                  </div>
                )}
              </form>
            )}
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <Ph
            src="assets/installer-fascia-2.jpg"
            alt="Coastline installer mounting a brown K-style gutter to fascia on a Los Angeles home."
            ratio="4/5"
            pos="center"
          />
          <div style={{
            position: 'absolute', left: -24, bottom: 28,
            background: 'var(--color-surface)', border: '1px solid var(--color-border)',
            borderRadius: 14, padding: '14px 18px', boxShadow: 'var(--shadow-md)', maxWidth: 260
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <Stars size={14} />
              <span style={{ fontWeight: 600, fontSize: 13, color: 'var(--color-primary)' }}>5.0</span>
            </div>
            <div style={{ fontSize: 13, color: 'var(--color-text-muted)', marginTop: 6, lineHeight: 1.4 }}>
              "Quick, clean, and the corners are tighter than the last company we used."
            </div>
            <div style={{ fontSize: 12, color: 'var(--color-primary)', fontWeight: 600, marginTop: 6 }}>— Sonia R., Eagle Rock</div>
          </div>
          <div style={{
            position: 'absolute', right: -20, top: 24,
            background: 'var(--color-accent)', color: 'var(--color-primary)',
            borderRadius: 999, padding: '10px 16px', fontWeight: 600, fontSize: 13,
            boxShadow: 'var(--shadow-sm)',
          }}>
            <Icon name="shield" size={13}/> Lifetime material warranty
          </div>
        </div>
      </div>
      <style>{`@media(max-width: 860px){ .wrap > div { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function ServicesOverview() {
  const services = [
    { icon: 'wrench', title: 'Seamless Installation', to: '/services/gutter-installation', copy: 'Aluminum or copper gutters, measured and formed on-site to fit your home exactly.' },
    { icon: 'ruler', title: 'Gutter Repair', to: '/services/gutter-repair', copy: 'Leaks, sagging sections, loose corners, fascia damage, and drainage fixes.' },
    { icon: 'broom', title: 'Gutter Cleaning', to: '/services/gutter-cleaning', copy: 'Full debris removal, downspout flush, and a water test before we leave.' },
    { icon: 'grid', title: 'Gutter Guards', to: '/services/gutter-guards', copy: 'Micro-mesh and reverse-curve systems chosen to fit your roof and trees.' },
    { icon: 'drop', title: 'Downspouts & Drainage', to: '/services/downspout-installation', copy: 'Extensions, splash blocks, and buried lines that move water away from the house.' },
    { icon: 'building', title: 'Commercial', to: '/services/commercial-gutters', copy: 'Box gutters, scupper boxes, and heavy-gauge systems for commercial buildings.' },
  ];
  return (
    <section className="section" style={{ background: 'var(--color-bg)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 20, marginBottom: 40 }}>
          <div>
            <span className="eyebrow">What we do</span>
            <h2 style={{ marginTop: 12, maxWidth: 640 }}>
              Every part of your gutter system, <span className="ital">handled by one team.</span>
            </h2>
          </div>
          <Link to="/services" className="btn btn-ghost">View all services <Icon name="arrow" size={14}/></Link>
        </div>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
          {services.map((s) => (
            <Link key={s.to} to={s.to} className="card" style={{ textDecoration: 'none' }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12, background: 'var(--color-accent-soft)',
                color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 18
              }}><Icon name={s.icon} size={22}/></div>
              <h3 style={{ marginBottom: 8 }}>{s.title}</h3>
              <p className="muted" style={{ fontSize: 14 }}>{s.copy}</p>
              <div style={{ marginTop: 18, color: 'var(--color-primary)', fontWeight: 600, fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                Learn more <Icon name="arrow" size={12}/>
              </div>
            </Link>
          ))}
        </div>
      </div>
      <style>{`@media(max-width:860px){.grid{grid-template-columns:1fr !important}}`}</style>
    </section>
  );
}

function WhyUs() {
  const points = [
    { n: '20+', t: 'Years in Los Angeles', s: 'Our lead installers have spent decades on Southern California roofs. There isn’t much we haven’t seen.' },
    { n: 'Lifetime', t: 'Material warranty', s: 'Every aluminum and copper gutter we install is covered for as long as you own the home.' },
    { n: '5 yrs', t: 'Workmanship guarantee', s: 'If a seam opens, a corner fails, or water doesn’t drain the way it should, we come back and fix it.' },
    { n: '15 min', t: 'Quick callbacks', s: 'During business hours, a real person returns your call within 15 minutes. Usually sooner.' },
  ];
  return (
    <section className="section" style={{ background: 'var(--color-primary)', color: '#F8F4EC' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64, alignItems: 'start' }}>
          <div>
            <span className="eyebrow" style={{ color: '#B9C6BE' }}>Why Coastline</span>
            <h2 style={{ color: '#F8F4EC', marginTop: 12 }}>
              The small details <span className="ital">are what keep your home dry.</span>
            </h2>
            <p style={{ color: '#C8D1C9', marginTop: 20, fontSize: 16, maxWidth: 440 }}>
              Our crews are licensed employees, not subcontractors. We measure carefully, form each corner by hand, and walk every gutter with water before we call a job finished.
            </p>
            <Link to="/about" className="btn btn-secondary" style={{ color: '#F8F4EC', borderColor: '#F8F4EC', marginTop: 28 }}>
              About our team <Icon name="arrow" size={14}/>
            </Link>
          </div>
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            {points.map((p) => (
              <div key={p.t} style={{ borderTop: '1px solid rgba(255,255,255,0.15)', paddingTop: 22 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, color: 'var(--color-accent)', letterSpacing: '-0.03em' }}>{p.n}</div>
                <div style={{ fontWeight: 600, color: '#F8F4EC', marginTop: 6 }}>{p.t}</div>
                <div style={{ fontSize: 14, color: '#B9C6BE', marginTop: 8, lineHeight: 1.5 }}>{p.s}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`@media(max-width:860px){section.section>.wrap>div{grid-template-columns:1fr !important; gap:40px !important}}`}</style>
    </section>
  );
}

function FeaturedProducts() {
  const products = [
    { title: 'Seamless aluminum', to: '/products/seamless-aluminum-gutters', spec: '.032″ · 5″/6″/7″ · 25+ baked finishes', tag: 'Most popular' },
    { title: 'Copper', to: '/products/copper-gutters', spec: '16oz half-round · hand-soldered miters', tag: 'Heritage' },
    { title: 'Half-round', to: '/products/half-round-gutters', spec: 'Aluminum or copper · period-accurate', tag: 'Craftsman homes' },
    { title: 'Gutter guards', to: '/products/gutter-guards', spec: 'Micro-mesh · stainless · pest-proof', tag: 'Add-on' },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 20, marginBottom: 40 }}>
          <div>
            <span className="eyebrow">Materials we install</span>
            <h2 style={{ marginTop: 12 }}>The right material <span className="ital">for your home.</span></h2>
          </div>
          <Link to="/products" className="btn btn-ghost">All products <Icon name="arrow" size={14}/></Link>
        </div>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
          {products.map((p, i) => (
            <Link key={p.to} to={p.to} className="card" style={{ padding: 0, textDecoration: 'none', overflow: 'hidden' }}>
              <Ph src={["assets/installer-tape.jpg","assets/worker-portrait.jpg","assets/installer-fascia.jpg","assets/installer-fascia-2.jpg"][i % 4]} alt={`${p.title} — Coastline install`} ratio="4/3" pos="center"/>
              <div style={{ padding: 22 }}>
                <div className="tag-muted tag" style={{ marginBottom: 10, fontSize: 11 }}>{p.tag}</div>
                <h3 style={{ marginBottom: 6 }}>{p.title}</h3>
                <div className="muted" style={{ fontSize: 13 }}>{p.spec}</div>
              </div>
            </Link>
          ))}
        </div>
      </div>
      <style>{`@media(max-width:860px){section .grid{grid-template-columns:1fr 1fr !important}}`}</style>
    </section>
  );
}

function ServiceArea() {
  const cities = ['Glendale', 'Altadena', 'Pasadena', 'Burbank', 'Encino', 'Eagle Rock', 'Highland Park', 'Silver Lake', 'La Cañada', 'Sherman Oaks', 'Studio City', 'South Pasadena'];
  return (
    <section className="section" style={{ background: 'var(--color-accent-soft)' }}>
      <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <span className="eyebrow">Where we work</span>
          <h2 style={{ marginTop: 12 }}>Serving Los Angeles <span className="ital">and the surrounding areas.</span></h2>
          <p className="muted" style={{ fontSize: 16, marginTop: 18, maxWidth: 460 }}>
            We work throughout Los Angeles County, Orange County, and the Inland Empire. If you don’t see your city listed, give us a call — chances are we cover it.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 22 }}>
            {cities.map((c) => (
              <Link key={c} to={`/service-areas/${c.toLowerCase().replace(/\s|ñ/g, '-')}`} className="tag" style={{ background: 'rgba(255,255,255,0.6)' }}>{c}</Link>
            ))}
          </div>
          <Link to="/service-areas" className="btn btn-secondary" style={{ marginTop: 28 }}>View all service areas <Icon name="arrow" size={14}/></Link>
        </div>
        <Ph src="assets/house-full-install.jpg" alt="Coastline installer at work on a two-story Los Angeles home with fresh gutter sections staged on the lawn." ratio="4/3" pos="center"/>
      </div>
      <style>{`@media(max-width:860px){section .wrap{grid-template-columns:1fr !important}}`}</style>
    </section>
  );
}

function Testimonials() {
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="eyebrow">Reviews</span>
          <h2 style={{ marginTop: 12 }}>What our customers <span className="ital">are saying.</span></h2>
        </div>
        <TrustindexWidget src="https://cdn.trustindex.io/loader.js?f62b44b34c706282e156619dfb8" />
      </div>
    </section>
  );
}

function FAQSection() {
  const qs = [
    ['How long does a gutter installation take?', 'Most single-family homes are finished in one day. We measure, form the gutters on-site, hang them, and run water through every line before we leave. Larger or multi-story homes may run into a second day.'],
    ['What does the lifetime warranty cover?', 'The aluminum or copper material is warrantied against manufacturer defects and finish failure for as long as you own the home. Our separate 5-year workmanship warranty covers the installation itself — seams, hangers, corners, and slope.'],
    ['Do I need gutter guards?', 'Not always. If you have heavy tree cover, especially pine or liquidambar, guards often pay for themselves within a year or two. If your roof stays clean, they may not be worth the cost. We’ll give you an honest recommendation at the estimate.'],
    ['Do you pull permits?', 'Standard residential gutter replacement usually doesn’t require a permit in Los Angeles. Commercial box gutter work and certain historic districts do, and we handle the paperwork whenever it’s needed.'],
    ['Can you match my existing fascia color?', 'Yes. We carry 25+ baked-on finishes in stock and can order custom color matches for HOAs and heritage homes. We’ll bring a color fan to the estimate so you can see the options in person.'],
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section" style={{ background: 'var(--color-bg)' }}>
      <div className="wrap-n">
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <span className="eyebrow">FAQ</span>
          <h2 style={{ marginTop: 12 }}>Common questions.</h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {qs.map(([q, a], i) => (
            <div key={q} className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)}
                style={{ width: '100%', textAlign: 'left', padding: '22px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, color: 'var(--color-primary)', fontWeight: 600, fontSize: 16 }}>
                {q}
                <Icon name={open === i ? 'minus' : 'plus'} size={18}/>
              </button>
              {open === i && (
                <div style={{ padding: '0 24px 24px', color: 'var(--color-text-muted)', fontSize: 15, lineHeight: 1.6, borderTop: '1px solid var(--color-border)', paddingTop: 18 }}>
                  {a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="section">
      <div className="wrap">
        <div style={{
          background: 'var(--color-primary)', color: '#F8F4EC',
          borderRadius: 'var(--radius-card)', padding: '72px 64px',
          display: 'grid', gridTemplateColumns: '1.3fr 1fr', alignItems: 'center', gap: 48,
          position: 'relative', overflow: 'hidden'
        }}>
          <div>
            <h2 style={{ color: '#F8F4EC' }}>Ready to get <br/><span className="ital">started?</span></h2>
            <p style={{ color: '#C8D1C9', marginTop: 18, fontSize: 17, maxWidth: 480 }}>
              Free estimates, same-day quotes, and a 15-minute callback — whether you need a full replacement or just a cleaning.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <Link to="/gutter-guide" className="btn btn-lg" style={{ background: 'var(--color-accent)', color: 'var(--color-primary)' }}>
              Start a free quote <Icon name="arrow" size={16}/>
            </Link>
            <a href="tel:+13234521809" className="btn btn-lg btn-secondary" style={{ color: '#F8F4EC', borderColor: '#F8F4EC' }}>
              <Icon name="phone" size={16}/> (323) 452-1809
            </a>
          </div>
          <div style={{ position: 'absolute', right: -60, top: -60, width: 280, height: 280, borderRadius: '50%', background: 'rgba(169,196,169,0.12)' }}/>
        </div>
      </div>
      <style>{`@media(max-width:860px){section .wrap > div{grid-template-columns:1fr !important; padding:40px !important}}`}</style>
    </section>
  );
}

Object.assign(window, { Home });

})();