const { useState, useEffect, useMemo } = React;

// ---------- Data ----------
const PHONE_DISPLAY = "713-254-5649";
const PHONE_HREF = "tel:+17132545649";
const EMAIL = "justin@joliedrain.com";

// ---------- Tweakable copy (StoryBrand framework) ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "copyMode": "storybrand",
  "sb_character": "Every homeowner wants a dry yard and a sound foundation.",
  "sb_problem": "But standing water, soggy lawns, and failing drains put your home at risk, and most contractors only treat the symptoms.",
  "sb_guide": "At Jolie Drain & Excavation, we're drainage specialists, not a lawn crew with a shovel. We've solved 1,200+ yards with honest diagnostics and clean excavation.",
  "sb_plan": "1. Call for a free on-site assessment.  2. Get a written plan with fixed pricing.  3. We install it clean and leave your yard better than we found it.",
  "sb_cta_primary": "Request a free assessment",
  "sb_cta_secondary": "Call 713-254-5649",
  "sb_success": "Imagine a yard you can actually walk across after a storm, and a basement that stays dry, season after season.",
  "sb_failure": "Ignore it and the water only goes one direction: toward your foundation, your landscaping, and your wallet."
}/*EDITMODE-END*/;

const HOURS = "Mon–Sat · 7am–6pm";
const SERVICE_AREA = "Greater metro area & surrounding counties";

const CATEGORIES = [
{
  key: "assessments",
  title: "Drainage Assessments & Camera Diagnostics",
  desc:
  "Before we dig, we diagnose. On-site evaluations and in-pipe camera work that pinpoint where water is going wrong, and what it will take to make it right.",
  items: [
  "Drainage site assessments",
  "Camera drainage assessments",
  "Surface water flow assessments",
  "Yard drainage failure assessments",
  "Downspout drainage assessments",
  "Catch basin and area drain inspections",
  "Outlet and discharge inspections",
  "Drainage system troubleshooting",
  "Equipment-assisted drainage assessments",
  "Underground drainage line location",
  "Existing drain line condition assessments"]

},
{
  key: "yard",
  title: "Yard Drainage Solutions",
  desc:
  "Soggy lawns, failing perimeters, groundwater that refuses to move. We build systems that quietly take the water away and keep it away.",
  items: [
  "French drains",
  "Curtain drains",
  "Wet-yard correction",
  "Yard drainage correction",
  "Groundwater interception drains",
  "Standing water solutions",
  "Soggy yard drainage improvements",
  "Foundation perimeter drainage correction"]

},
{
  key: "surface",
  title: "Surface Water Control",
  desc:
  "For water that runs across the ground, driveways, patios, low spots, uphill neighbors. We intercept runoff and route it somewhere useful.",
  items: [
  "Trench drains",
  "Channel drains",
  "Catch basins",
  "Area drains",
  "Surface runoff collection systems",
  "Low-spot drainage correction",
  "Water redirection away from foundation",
  "Drainage path correction"]

},
{
  key: "downspout",
  title: "Downspout & Discharge Solutions",
  desc:
  "Gutters do their job; then the water sits against your house. We move it out, bury it, and give it a proper outlet.",
  items: [
  "Downspout extensions",
  "Downspout burial",
  "Downspout reroutes",
  "Pop-up emitters",
  "Outlet and discharge corrections",
  "Discharge line extensions"]

},
{
  key: "grading",
  title: "Grading & Runoff Control",
  desc:
  "Sometimes the fix is shaping the land, not digging into it. Swales, regrades, and slope corrections that send water where it belongs.",
  items: [
  "Surface swales",
  "Runoff redirection",
  "Minor grading correction",
  "Yard slope correction",
  "Erosion-control drainage correction",
  "Foundation water management"]

},
{
  key: "excavation",
  title: "Excavation & Trenching",
  desc:
  "Mini-excavator work for tight yards and big problems. Clean trenches, careful restoration, and machines sized to the site.",
  items: [
  "Drainage trenching",
  "Excavation for drainage installation",
  "Underground access digging",
  "Spot excavation for drainage failure",
  "Tight-access drainage excavation",
  "Mini excavation services"]

},
{
  key: "maintenance",
  title: "Maintenance",
  desc:
  "A drainage system is only as good as the day it was installed, unless someone keeps it running. Seasonal checkups and annual plans keep yours moving.",
  items: [
  "Catch basin cleaning",
  "Drain outlet clearing",
  "Pop-up emitter maintenance",
  "Seasonal drainage checkups",
  "Annual drainage maintenance visits",
  "Drainage maintenance plans"]

}];


const PROBLEMS = [
"Standing water in the yard",
"Soggy lawns and muddy side yards",
"Water pooling near the foundation",
"Downspouts dumping water too close to the house",
"Patio and driveway drainage issues",
"Garage-entry flooding",
"Erosion around landscaping",
"Low spots that never dry out",
"Surface runoff cutting across the yard",
"Existing drainage systems that aren't flowing"];


// ---------- Small components ----------
function PhoneIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" 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 ArrowRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12" />
      <polyline points="12 5 19 12 12 19" />
    </svg>);

}

function PhoneBar() {
  return (
    <div className="phonebar" role="region" aria-label="Contact">
      <a href={PHONE_HREF} className="tel">
        <PhoneIcon />
        <span>Call {PHONE_DISPLAY}</span>
      </a>
      <span className="sep">·</span>
      <span className="hrs">{HOURS}</span>
      <span className="sep">·</span>
      <span className="hrs">Free on-site estimates</span>
    </div>);

}

function Nav({ route, go }) {
  const [open, setOpen] = useState(false);
  const items = [
  { k: "home", label: "Home" },
  { k: "services", label: "Services" },
  { k: "problems", label: "Problems We Solve" },
  { k: "about", label: "About" },
  { k: "contact", label: "Contact" }];

  return (
    <nav className={"top" + (open ? " open" : "")}>
      <div className="inner">
        <div className="brand" onClick={() => {go("home");setOpen(false);}}>
          <img className="logo" src="assets/logo.png" alt="Jolie Drain & Excavation" />
          <span className="sr-only">Jolie Drain & Excavation, Your drainage experts</span>
        </div>
        <div className="links">
          {items.map((it) =>
          <a
            key={it.k}
            className={route === it.k ? "active" : ""}
            onClick={() => {go(it.k);setOpen(false);}}>
            
              {it.label}
            </a>
          )}
        </div>
        <a className="nav-cta" onClick={() => go("contact")}>
          Request a quote <ArrowRight />
        </a>
        <button className="menu-btn" onClick={() => setOpen((o) => !o)} aria-label="Menu">
          <svg width="18" height="14" viewBox="0 0 18 14"><path d="M0 1h18M0 7h18M0 13h18" stroke="currentColor" strokeWidth="1.5" /></svg>
        </button>
      </div>
    </nav>);

}

function CTABand({ go }) {
  return (
    <section className="ctaband">
      <div className="inner wrap">
        <div>
          <h2>Water has somewhere <em>better</em> to go.<br />Let's show it the way.</h2>
          <p>On-site assessments are free. We'll walk the property, diagnose what's happening underground, and give you an honest plan, no upsell, no guesswork.</p>
        </div>
        <div className="right">
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: '#9FD6DF' }}>Talk to us</div>
          <a href={PHONE_HREF} className="big-tel">{PHONE_DISPLAY}</a>
          <div className="hrs">{HOURS} · Free estimates · Licensed & insured</div>
          <div style={{ display: 'flex', gap: 10, marginTop: 10, flexWrap: 'wrap' }}>
            <a className="btn btn-primary" onClick={() => go("contact")}>Request a quote <ArrowRight /></a>
            <a className="btn" style={{ color: '#fff', border: '1px solid #3B4844' }} onClick={() => go("services")}>See all services</a>
          </div>
        </div>
      </div>
    </section>);

}

function Footer({ go }) {
  return (
    <footer>
      <div className="wrap">
        <div className="grid">
          <div>
            <div className="brand" style={{ marginBottom: 14 }}>
              <img className="logo" src="assets/logo.png" alt="Jolie Drain & Excavation" />
            </div>
            <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.6, maxWidth: '36ch', margin: 0 }}>
              Residential drainage, yard grading, and light excavation. Diagnosis first, then a plan that actually solves the problem.
            </p>
          </div>
          <div>
            <h5>Explore</h5>
            <ul>
              <li><a onClick={() => go("home")}>Home</a></li>
              <li><a onClick={() => go("services")}>Services</a></li>
              <li><a onClick={() => go("problems")}>Problems We Solve</a></li>
              <li><a onClick={() => go("about")}>About</a></li>
              <li><a onClick={() => go("contact")}>Contact</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href={PHONE_HREF}>{PHONE_DISPLAY}</a></li>
              <li><a href={`mailto:${EMAIL}`}>{EMAIL}</a></li>
              <li style={{ color: 'var(--muted)' }}>{HOURS}</li>
            </ul>
          </div>
          <div>
            <h5>Service area</h5>
            <ul>
              <li style={{ color: 'var(--muted)', lineHeight: 1.6 }}>{SERVICE_AREA}</li>
              <li style={{ color: 'var(--muted)' }}>Licensed & insured</li>
              <li style={{ color: 'var(--muted)' }}>Free estimates</li>
            </ul>
          </div>
        </div>
        <div className="fine">
          <div>© {new Date().getFullYear()} Jolie Drain & Excavation · joliedrain.com</div>
          <div>Site by placeholder</div>
        </div>
      </div>
    </footer>);

}

// ---------- Pages ----------
function Home({ go }) {
  const featured = CATEGORIES.slice(0, 6);
  const tweaks = React.useContext(TweakCtx);
  const isSB = tweaks.copyMode === "storybrand";
  return (
    <div className="page">
      <section className="hero">
        <div className="inner wrap">
          <div>
            <div className="eyebrow">
              {isSB ? "Drainage specialists · Houston & surrounding counties" : "Residential drainage · Excavation · Maintenance"}
            </div>
            {isSB ? (
              <h1 style={{ fontSize: "40px", fontFamily: "Inter" }}>{tweaks.sb_character}</h1>
            ) : (
              <h1 style={{ fontSize: "40px", fontFamily: "Inter" }}>Wet yards, dry basements,<br />and water that <em>at&nbsp;last</em><br />goes somewhere.</h1>
            )}
            <p className="lede">
              {isSB
                ? tweaks.sb_problem
                : "Jolie Drain & Excavation diagnoses and solves the drainage problems most landscapers walk away from, soggy lawns, failing french drains, pooling downspouts, and the water that shouldn't be near your foundation."}
            </p>
            {isSB && tweaks.sb_guide && (
              <p className="lede" style={{ color: "var(--muted)", fontSize: 15, marginTop: -20, marginBottom: 28, fontStyle: "italic" }}>
                {tweaks.sb_guide}
              </p>
            )}
            <div className="ctas">
              <a className="btn btn-primary" onClick={() => go("contact")}>
                {isSB ? tweaks.sb_cta_primary : "Request a free assessment"} <ArrowRight />
              </a>
              <a className="btn btn-ghost" href={PHONE_HREF}>
                <PhoneIcon /> {isSB ? tweaks.sb_cta_secondary : `Call ${PHONE_DISPLAY}`}
              </a>
            </div>
            {isSB ? (
              <div className="meta" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20 }}>
                <div><strong>The plan</strong>{tweaks.sb_plan}</div>
                <div><strong>What success looks like</strong>{tweaks.sb_success}</div>
                <div><strong>What's at stake</strong>{tweaks.sb_failure}</div>
              </div>
            ) : (
              <div className="meta">
                <div><strong>Licensed & insured</strong>State-licensed, fully insured</div>
                <div><strong>On-site estimates</strong>Always free, no pressure</div>
                <div><strong>Camera diagnostics</strong>We look before we dig</div>
              </div>
            )}
          </div>
          <div className="hero-img" aria-hidden="true">
            <img src="assets/hero.png" alt="Jolie Drain crew on site" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }} />
          </div>
        </div>
      </section>

      <section className="block">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow">What we do</div>
              <h2 style={{ fontFamily: "Inter" }}>Drainage, done the quiet way.</h2>
            </div>
            <p>From a single pop-up emitter to a whole-yard regrade, every project starts with a walk of the property and ends with water going somewhere it isn't causing harm. Seven practice areas, one team, one phone number.</p>
          </div>

          <div className="services">
            {featured.map((c, i) =>
            <div key={c.key} className="service" onClick={() => go("services")}>
                <div className="num">0{i + 1}</div>
                <h3>{c.title}</h3>
                <p>{c.desc}</p>
                <span className="more">Explore <ArrowRight size={12} /></span>
              </div>
            )}
          </div>
          <div style={{ marginTop: 32, textAlign: 'right' }}>
            <a className="btn btn-ghost" onClick={() => go("services")}>See all services <ArrowRight /></a>
          </div>
        </div>
      </section>

      <section className="block tight" style={{ background: 'var(--stone)' }}>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow">If any of this sounds familiar</div>
              <h2>Problems we solve, every week.</h2>
            </div>
            <p>Drainage problems rarely announce themselves. They show up as a mushy spot that never dries, a basement smell after storms, or a patch of dead lawn. If you're recognizing any of these, we should talk.</p>
          </div>
          <div className="problems">
            {PROBLEMS.map((p, i) =>
            <div key={i} className="problem">
                <span className="check">✓</span>
                <p>{p}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="block">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow">How we work</div>
              <h2>Four steps. No surprises.</h2>
            </div>
            <p>Drainage is plumbing you can't see, moving weather you can't predict. Our process exists to take the mystery out of it, for you and for the crew on site.</p>
          </div>
          <div className="process">
            <div className="step">
              <div className="n">01 / Assess</div>
              <h4>Walk the site</h4>
              <p>We walk the property during or just after a rain if we can, talk through history, and look at what the water is actually doing.</p>
            </div>
            <div className="step">
              <div className="n">02 / Diagnose</div>
              <h4>Camera & locate</h4>
              <p>Where existing lines are involved, we run a camera, locate the buried pipe, and find where it's failing.</p>
            </div>
            <div className="step">
              <div className="n">03 / Plan</div>
              <h4>Written scope</h4>
              <p>You get a clear written plan with fixed pricing, what we'll do, what we won't, and what to expect day-of.</p>
            </div>
            <div className="step">
              <div className="n">04 / Install</div>
              <h4>Clean excavation</h4>
              <p>Careful digging, proper bedding, clean restoration. We leave the yard looking like we were barely there.</p>
            </div>
          </div>
        </div>
      </section>

      <CTABand go={go} />
    </div>);

}

function ServicesPage({ go }) {
  return (
    <div className="page">
      <div className="wrap services-hero">
        <div className="copy">
          <div className="eyebrow">Services · Seven practice areas</div>
          <h1 style={{ fontFamily: "'Instrument Serif',serif", fontWeight: 400, fontSize: 'clamp(44px,6vw,76px)', lineHeight: 1, letterSpacing: '-.02em', margin: '12px 0 18px' }}>What we build, fix,<br />and maintain.</h1>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-2)', maxWidth: '52ch', margin: 0 }}>Every drainage project is a chain: figure out what the water is doing, design something that moves it, install it cleanly, keep it running. Here's the full menu, grouped by where it sits in that chain.</p>
          <div className="first-cat">
            <div className="k">01 / 0{CATEGORIES.length}</div>
            <h2>{CATEGORIES[0].title}</h2>
            <p className="desc">{CATEGORIES[0].desc}</p>
          </div>
        </div>
        <div className="img">
          <img src="assets/services.png" alt="Jolie Drain technician running a camera diagnostic" />
        </div>
      </div>

      {CATEGORIES.map((c, i) =>
      <section key={c.key} className={"category" + (i === 0 ? " first-items" : "")}>
          <div className="wrap">
            <div className="head">
              <div>
                <div className="k">0{i + 1} / 0{CATEGORIES.length}</div>
              </div>
              <div>
                <h2>{c.title}</h2>
                <p className="desc">{c.desc}</p>
              </div>
            </div>
            <div className="svc-list">
              {c.items.map((it, j) =>
            <div key={j} className="svc-row">
                  <span className="i">{String(j + 1).padStart(2, "0")}</span>
                  <span>{it}</span>
                </div>
            )}
            </div>
          </div>
        </section>
      )}

      <CTABand go={go} />
    </div>);

}

function ProblemsPage({ go }) {
  return (
    <div className="page">
      <div className="wrap page-head">
        <div className="eyebrow">Problems we solve</div>
        <h1>If water is going<br />somewhere it shouldn't, <br />we can help.</h1>
        <p>Most of our calls start with a single observation: a patch of lawn that never dries, a puddle on the patio, or water creeping toward the foundation. Below is the short list of what usually brings someone to us.</p>
      </div>

      <section className="block" style={{ paddingTop: 0, borderTop: 'none' }}>
        <div className="wrap">
          <div className="problems">
            {PROBLEMS.map((p, i) =>
            <div key={i} className="problem">
                <span className="check">✓</span>
                <p>{p}</p>
              </div>
            )}
          </div>

          <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }} className="two-col">
            <div>
              <div className="eyebrow">When to call us</div>
              <h3 className="serif" style={{ fontSize: 32, letterSpacing: '-.01em', margin: '10px 0 14px', lineHeight: 1.1 }}>Sooner is cheaper than later.</h3>
              <p style={{ color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.65, margin: 0 }}>
                Drainage problems compound. Water that sits near a foundation this spring becomes a cracked wall next spring. A clogged outlet becomes a backed-up yard becomes a dead tree. The earlier we can look, the smaller the fix usually is.
              </p>
            </div>
            <div>
              <div className="eyebrow">What to expect</div>
              <h3 className="serif" style={{ fontSize: 32, letterSpacing: '-.01em', margin: '10px 0 14px', lineHeight: 1.1 }}>A walk, a plan, a price.</h3>
              <p style={{ color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.65, margin: 0 }}>
                We come out, look at the site, and give you a written plan with fixed pricing, not a range, not "time and materials." If we can't diagnose it in one visit, we'll say so, and we'll tell you what a camera or locate will cost before we run one.
              </p>
            </div>
          </div>
        </div>
      </section>

      <CTABand go={go} />
    </div>);

}

function AboutPage({ go }) {
  return (
    <div className="page">
      <div className="wrap about-hero">
        <div>
          <div className="eyebrow" style={{ fontSize: "20px", lineHeight: "2", letterSpacing: "1px" }}>About</div>
          <h1>A drainage company, not a landscaping company.</h1>
          <p>Jolie Drain & Excavation was built around a single stubborn idea: water problems deserve water specialists. Not a lawn crew with a trenching attachment, not a plumber who also digs, a team whose entire day is about where water is going and how to change that.</p>
          <p>We're licensed and insured. We run our own mini-excavators. We own the cameras and locators we use to diagnose, so we're never selling you equipment time we don't actually need. And every job comes with a written scope and a fixed price before we break ground.</p>
          <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
            <a className="btn btn-primary" onClick={() => go("contact")}>Get a free assessment <ArrowRight /></a>
            <a className="btn btn-ghost" href={PHONE_HREF}><PhoneIcon /> {PHONE_DISPLAY}</a>
          </div>
        </div>
        <div className="img">
          <img src="assets/about.png" alt="Jolie Drain truck outside a brick home" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }} />
        </div>
      </div>

      <section className="block tight" style={{ borderTop: '1px solid var(--line)' }}>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow">What we stand on</div>
              <h2>Three things we won't compromise.</h2>
            </div>
            <p>Drainage is mostly hidden work. That's exactly why the standards matter, nobody will ever see what we buried, which means the only person holding the line is us.</p>
          </div>
          <div className="values">
            <div className="value">
              <div className="n">01</div>
              <h3>Diagnose before you dig.</h3>
              <p>Digging is the last step, not the first. We walk the site, run a camera, and locate existing lines. Then we plan. Then we dig.</p>
            </div>
            <div className="value">
              <div className="n">02</div>
              <h3>Fix the cause, not the symptom.</h3>
              <p>Standing water in one spot usually means water is being delivered there from somewhere else. We trace it back and solve it at the source.</p>
            </div>
            <div className="value">
              <div className="n">03</div>
              <h3>Leave the yard better than we found it.</h3>
              <p>Clean trenches, careful restoration, no rutted lawn. The job isn't finished when the drain works, it's finished when the yard looks right.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="block tight">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 72, alignItems: 'center' }} className="stats-grid">
            <div>
              <div className="eyebrow">By the numbers</div>
              <h2 className="serif" style={{ fontSize: 'clamp(32px,4vw,48px)', letterSpacing: '-.015em', lineHeight: 1.05, margin: '10px 0 0' }}>A thousand yards drier.</h2>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 0, borderLeft: '1px solid var(--line)' }}>
              {[
              { k: "1,200+", v: "Drainage systems installed" },
              { k: "18 yrs", v: "Diagnosing & digging" },
              { k: "100%", v: "Written scopes, fixed pricing" }].
              map((s, i) =>
              <div key={i} style={{ padding: '28px 24px', borderRight: '1px solid var(--line)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
                  <div className="serif" style={{ fontSize: 42, letterSpacing: '-.02em', lineHeight: 1 }}>{s.k}</div>
                  <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 10, lineHeight: 1.4 }}>{s.v}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      <CTABand go={go} />
    </div>);

}

function ContactPage({ go }) {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: "", phone: "", email: "", address: "", service: "General drainage assessment", message: "" });
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const submit = (e) => {e.preventDefault();setSent(true);};

  return (
    <div className="page">
      <div className="wrap contact-grid">
        <div>
          <div className="eyebrow">Contact</div>
          <h1>Let's get water<br />moving again.</h1>
          <p className="lede">Call, email, or send us a note below. Most on-site assessments are scheduled within a week; urgent calls we try to reach same-day during the rainy season.</p>

          <div className="contact-item">
            <div className="k">Phone</div>
            <div className="v"><a href={PHONE_HREF}>{PHONE_DISPLAY}</a></div>
          </div>
          <div className="contact-item">
            <div className="k">Email</div>
            <div className="v"><a href={`mailto:${EMAIL}`}>{EMAIL}</a></div>
          </div>
          <div className="contact-item">
            <div className="k">Hours</div>
            <div className="v">{HOURS}</div>
          </div>
          <div className="contact-item">
            <div className="k">Service area</div>
            <div className="v">{SERVICE_AREA}</div>
          </div>
          <div className="contact-item">
            <div className="k">Credentials</div>
            <div className="v">Licensed & insured · State-registered contractor</div>
          </div>
        </div>

        <div>
          {sent ?
          <form className="quote"><div className="sent">
              <div className="eyebrow" style={{ marginBottom: 8 }}>Message sent</div>
              <h3>Thanks, we'll be in touch.</h3>
              <p style={{ color: 'var(--muted)', fontSize: 14, lineHeight: 1.6, margin: '10px 0 0' }}>
                Someone from our team will reach out within one business day to schedule an on-site assessment. If it's urgent, feel free to call us directly at <a href={PHONE_HREF} style={{ color: 'var(--accent)' }}>{PHONE_DISPLAY}</a>.
              </p>
              <button type="button" className="btn btn-ghost" style={{ marginTop: 28 }} onClick={() => {setSent(false);setForm({ name: "", phone: "", email: "", address: "", service: "General drainage assessment", message: "" });}}>Send another</button>
            </div></form> :

          <form className="quote" onSubmit={submit}>
              <h3>Request a free assessment</h3>
              <p className="sub">We'll come out, walk the property, and put a written plan in your hands.</p>
              <div className="row">
                <div className="field"><label>Name</label><input required value={form.name} onChange={set("name")} placeholder="Your name" /></div>
                <div className="field"><label>Phone</label><input required type="tel" value={form.phone} onChange={set("phone")} placeholder="(555) 000-0000" /></div>
              </div>
              <div className="field"><label>Email</label><input required type="email" value={form.email} onChange={set("email")} placeholder="you@example.com" /></div>
              <div className="field"><label>Property address</label><input value={form.address} onChange={set("address")} placeholder="Street, city" /></div>
              <div className="field">
                <label>What's going on?</label>
                <select value={form.service} onChange={set("service")}>
                  <option>General drainage assessment</option>
                  <option>Standing water / soggy yard</option>
                  <option>Foundation / basement water</option>
                  <option>Downspout reroute or burial</option>
                  <option>French or curtain drain</option>
                  <option>Existing system failing</option>
                  <option>Camera diagnostic / locate</option>
                  <option>Maintenance / seasonal check</option>
                  <option>Something else</option>
                </select>
              </div>
              <div className="field"><label>Tell us more (optional)</label><textarea value={form.message} onChange={set("message")} placeholder="When does the water show up? How long has it been happening? Any photos we should see?"></textarea></div>
              <button type="submit" className="btn btn-primary">Send request <ArrowRight /></button>
              <p style={{ fontSize: 12, color: 'var(--muted)', margin: '14px 0 0', lineHeight: 1.5 }}>
                We'll reach out within one business day. Your information is only used to respond to this request.
              </p>
            </form>
          }
        </div>
      </div>
    </div>);

}

// ---------- App ----------
const TweakCtx = React.createContext(TWEAK_DEFAULTS);

function TweaksPanel({ tweaks, setTweak, onClose }) {
  const fields = [
    { k: "sb_character", label: "1. Character (the hero)", hint: "Who your customer is and what they want. (Always your customer, never you.)" },
    { k: "sb_problem",   label: "2. Problem",              hint: "The external + internal problem you solve. Name the villain." },
    { k: "sb_guide",     label: "3. Guide (you)",          hint: "Show empathy + authority. You're Yoda, not Luke." },
    { k: "sb_plan",      label: "4. Plan",                 hint: "The simple 3-step path to work with you." },
    { k: "sb_cta_primary",   label: "5a. Direct CTA", hint: "The main action button." },
    { k: "sb_cta_secondary", label: "5b. Transitional CTA", hint: "Lower-risk action for people not ready to buy." },
    { k: "sb_success",   label: "6. Success",              hint: "What life looks like after they hire you." },
    { k: "sb_failure",   label: "7. Failure",              hint: "What's at stake if they do nothing." },
  ];
  return (
    <div className="tweaks-panel">
      <div className="tweaks-head">
        <div>
          <div className="tweaks-title">Tweaks</div>
          <div className="tweaks-sub">Hero copy · StoryBrand 7-part framework</div>
        </div>
        <button className="tweaks-x" onClick={onClose} aria-label="Close">×</button>
      </div>

      <div className="tweaks-section">
        <label className="tweaks-label">Copy mode</label>
        <div className="tweaks-seg">
          <button className={"seg " + (tweaks.copyMode === "original" ? "on" : "")} onClick={() => setTweak("copyMode", "original")}>Original</button>
          <button className={"seg " + (tweaks.copyMode === "storybrand" ? "on" : "")} onClick={() => setTweak("copyMode", "storybrand")}>StoryBrand</button>
        </div>
        <div className="tweaks-hint">Switch the home hero between the original copy and the StoryBrand version.</div>
      </div>

      {tweaks.copyMode === "storybrand" && (
        <div className="tweaks-body">
          {fields.map(f => (
            <div key={f.k} className="tweaks-field">
              <label className="tweaks-label">{f.label}</label>
              <div className="tweaks-hint">{f.hint}</div>
              <textarea
                value={tweaks[f.k] ?? ""}
                onChange={e => setTweak(f.k, e.target.value)}
                rows={f.k.startsWith("sb_cta") ? 1 : 3}
              />
            </div>
          ))}
        </div>
      )}

      <div className="tweaks-foot">
        <span className="tweaks-hint">Changes persist across reloads.</span>
      </div>
    </div>
  );
}

function App() {
  const [route, setRoute] = useState(() => (window.location.hash || "#home").slice(1));
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [editMode, setEditMode] = useState(false);

  useEffect(() => {
    const onHash = () => setRoute((window.location.hash || "#home").slice(1));
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // ----- Edit mode wiring -----
  useEffect(() => {
    const onMsg = (e) => {
      const d = e?.data;
      if (!d || typeof d !== "object") return;
      if (d.type === "__activate_edit_mode") setEditMode(true);
      else if (d.type === "__deactivate_edit_mode") setEditMode(false);
    };
    window.addEventListener("message", onMsg);
    // Announce availability ONLY after listener is registered
    try { window.parent.postMessage({ type: "__edit_mode_available" }, "*"); } catch(_) {}
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const setTweak = (k, v) => {
    setTweaks(prev => {
      const next = { ...prev, [k]: v };
      try { window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*"); } catch(_) {}
      return next;
    });
  };

  const go = (r) => {
    window.location.hash = "#" + r;
    setRoute(r);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  let Page;
  if (route === "services") Page = <ServicesPage go={go} />;else
  if (route === "problems") Page = <ProblemsPage go={go} />;else
  if (route === "about") Page = <AboutPage go={go} />;else
  if (route === "contact") Page = <ContactPage go={go} />;else
  Page = <Home go={go} />;

  return (
    <TweakCtx.Provider value={tweaks}>
      <PhoneBar />
      <Nav route={route === "" ? "home" : route} go={go} />
      {Page}
      <Footer go={go} />
      {editMode && <TweaksPanel tweaks={tweaks} setTweak={setTweak} onClose={() => { try { window.parent.postMessage({ type: "__edit_mode_toggle_off" }, "*"); } catch(_) {} setEditMode(false); }} />}
    </TweakCtx.Provider>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);