// Home tweaks: hero variant, accent color, headline, badge toggle.
// Imagery is real photos from /images — no toggle.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#f26a1f",
  "headline": "AC Out? We'll be there <em>today</em> — or it's free.",
  "subheadline": "Austin's heat doesn't wait, and neither do we. EverFlow technicians arrive within hours, diagnose for free, and fix it right the first time. Backed by our same-day guarantee since 2014.",
  "heroVariant": "split",
  "showEmergencyBadge": true
}/*EDITMODE-END*/;

const IMG = {
  hero:        'images/hero.jpg',
  acRepair:    'images/ac-repair.jpg',
  acInstall:   'images/ac-install.jpg',
  heating:     'images/heating.jpg',
  maintenance: 'images/maintenance.jpg',
  why:         'images/why-us.jpg'
};

const PHONE_ICON = (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
  </svg>
);

function HeroSplit({ t }) {
  return (
    <section className="hero">
      <div className="container">
        <div>
          <span className="hero-eyebrow">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
            Same-day service · Austin, TX
          </span>
          <h1 dangerouslySetInnerHTML={{__html: t.headline}} />
          <p className="hero-sub">{t.subheadline}</p>
          <div className="hero-cta">
            <a href="tel:+15124800311" className="btn btn-primary btn-lg">{PHONE_ICON} Call (512) 480-0311</a>
            <a href="contact.html" className="btn btn-outline btn-lg" style={{background:'rgba(255,255,255,.06)',color:'#fff',borderColor:'rgba(255,255,255,.2)'}}>
              Get Free Quote
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
          </div>
          <div className="hero-trust">
            <div className="item"><span className="num">4.9★</span><span className="lbl">2,847 Google reviews</span></div>
            <div className="item"><span className="num">12+ yrs</span><span className="lbl">Serving Austin</span></div>
            <div className="item"><span className="num">90 min</span><span className="lbl">Avg. arrival time</span></div>
          </div>
        </div>
        <div className="hero-image-wrap">
          <img src={IMG.hero} alt="EverFlow technician servicing an AC unit at an Austin home" />
          {t.showEmergencyBadge && (
            <>
              <div className="hero-card top">
                <div className="ic green">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <div>
                  <div className="hero-card-title">On-Time Guarantee</div>
                  <div className="hero-card-sub">$25 off if we're late</div>
                </div>
              </div>
              <div className="hero-card bottom">
                <div className="ic">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                </div>
                <div>
                  <div className="hero-card-title">Booked at 9:14 AM</div>
                  <div className="hero-card-sub">Tech arriving by 11:00</div>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </section>
  );
}

function HeroCentered({ t }) {
  return (
    <section className="hero hero-centered">
      <div className="hero-centered-bg" style={{backgroundImage:`url(${IMG.hero})`}} />
      <div className="container" style={{display:'block', maxWidth: 820, paddingTop: 90, paddingBottom: 90, position:'relative', zIndex: 2, textAlign:'center'}}>
        <span className="hero-eyebrow">Same-day service · Austin, TX</span>
        <h1 dangerouslySetInnerHTML={{__html: t.headline}} />
        <p className="hero-sub" style={{margin:'18px auto 32px'}}>{t.subheadline}</p>
        <div className="hero-cta" style={{justifyContent:'center'}}>
          <a href="tel:+15124800311" className="btn btn-primary btn-lg">{PHONE_ICON} Call (512) 480-0311</a>
          <a href="contact.html" className="btn btn-outline btn-lg" style={{background:'rgba(255,255,255,.06)',color:'#fff',borderColor:'rgba(255,255,255,.2)'}}>Get Free Quote</a>
        </div>
        <div className="hero-trust" style={{justifyContent:'center', marginTop: 36}}>
          <div className="item"><span className="num">4.9★</span><span className="lbl">2,847 Google reviews</span></div>
          <div className="item"><span className="num">12+ yrs</span><span className="lbl">Serving Austin</span></div>
          <div className="item"><span className="num">90 min</span><span className="lbl">Avg. arrival time</span></div>
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  { id: 'ac-repair',   img: IMG.acRepair,    title: 'AC Repair',         body: 'Diagnostic in 30 minutes, most repairs same day. Capacitors, compressors, refrigerant leaks — all of it.' },
  { id: 'ac-install',  img: IMG.acInstall,   title: 'AC Installation',   body: 'New high-efficiency systems from Trane, Carrier, and Lennox. 10-year parts warranty, financing in minutes.' },
  { id: 'heating',     img: IMG.heating,     title: 'Heating Repair',    body: "Furnaces, heat pumps, gas and electric. Pilot won't light? Blowing cold? We're on it before the next cold front." },
  { id: 'maintenance', img: IMG.maintenance, title: 'Maintenance Plans', body: 'Two tune-ups a year, 15% off repairs, priority booking. Starts at $14.95/month — cancel anytime.' }
];

function ServicesGrid() {
  return (
    <div className="services-grid">
      {SERVICES.map(s => (
        <a className="service-card" href={`services.html#${s.id}`} key={s.id}>
          <div className="img"><img src={s.img} alt={s.title} /></div>
          <div className="body">
            <h3>{s.title}</h3>
            <p>{s.body}</p>
            <span className="link">Learn more <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg></span>
          </div>
        </a>
      ))}
    </div>
  );
}

function hexToRgb(h) {
  const m = h.replace('#','').match(/.{1,2}/g);
  return m ? m.map(x => parseInt(x, 16)) : [242,106,31];
}
function shade(hex, amt) {
  const [r,g,b] = hexToRgb(hex).map(c => Math.max(0, Math.min(255, c + amt)));
  return `rgb(${r}, ${g}, ${b})`;
}
function rgba(hex, a) {
  const [r,g,b] = hexToRgb(hex);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply accent color globally
  React.useEffect(() => {
    document.body.style.setProperty('--accent-color', t.accentColor);
    document.body.style.setProperty('--accent-color-dark', shade(t.accentColor, -25));
    document.body.style.setProperty('--accent-color-bg', rgba(t.accentColor, 0.1));
  }, [t.accentColor]);

  return (
    <>
      {t.heroVariant === 'split' ? <HeroSplit t={t}/> : <HeroCentered t={t}/>}
      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio
          label="Layout"
          value={t.heroVariant}
          options={['split', 'centered']}
          onChange={(v) => setTweak('heroVariant', v)}
        />
        <TweakText
          label="Headline"
          value={t.headline}
          onChange={(v) => setTweak('headline', v)}
        />
        <TweakText
          label="Subheadline"
          value={t.subheadline}
          onChange={(v) => setTweak('subheadline', v)}
        />
        <TweakToggle
          label="Show floating badges"
          value={t.showEmergencyBadge}
          onChange={(v) => setTweak('showEmergencyBadge', v)}
        />
        <TweakSection label="Brand" />
        <TweakColor
          label="Accent color"
          value={t.accentColor}
          onChange={(v) => setTweak('accentColor', v)}
        />
      </TweaksPanel>
    </>
  );
}

function ServicesApp() {
  return <ServicesGrid />;
}

function WhyImage() {
  return <img src={IMG.why} alt="EverFlow service truck at an Austin home"/>;
}

ReactDOM.createRoot(document.getElementById('hero-root')).render(<App/>);
ReactDOM.createRoot(document.getElementById('services-root')).render(<ServicesApp/>);
ReactDOM.createRoot(document.getElementById('why-image-root')).render(<WhyImage/>);