/* Access Lawn & Landscape — main app */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2F6B3D",
  "heroLayout": "split",
  "displayFont": "DM Serif Display",
  "showHeroBadge": true
}/*EDITMODE-END*/;

const DISPLAY_FONTS = {
  "Instrument Serif": "'Instrument Serif', Georgia, serif",
  "Bricolage Grotesque": "'Bricolage Grotesque', system-ui, sans-serif",
  "DM Serif Display": "'DM Serif Display', Georgia, serif",
};

const ACCENT_OPTIONS = ["#2F6B3D", "#1F4A2A", "#3E7C4A", "#4A6B2F"];

function App() {
  const [tweaks, setTweaks] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    document.documentElement.style.setProperty("--display-font", DISPLAY_FONTS[tweaks.displayFont] || DISPLAY_FONTS["DM Serif Display"]);
  }, [tweaks.accent, tweaks.displayFont]);

  return (
    <>
      <TopBar />
      <Hero layout={tweaks.heroLayout} accent={tweaks.accent} showBadge={tweaks.showHeroBadge} />
      <TrustStrip />
      <Services accent={tweaks.accent} />
      <CtaBanner accent={tweaks.accent} />
      <QuoteSection accent={tweaks.accent} />
      <LocalPromise accent={tweaks.accent} />
      <ReviewWidget accent={tweaks.accent} />
      <ImagesWidget accent={tweaks.accent} />
      <LocalPostsWidget accent={tweaks.accent} />
      <Footer />
      <MobileCta accent={tweaks.accent} />

      <TweaksPanel title="Tweaks" initialPosition={{ right: 24, bottom: 24 }}>
        <TweakSection title="Brand">
          <TweakColor
            label="Accent green"
            value={tweaks.accent}
            options={ACCENT_OPTIONS}
            onChange={(v) => setTweaks("accent", v)}
          />
          <TweakSelect
            label="Display font"
            value={tweaks.displayFont}
            options={Object.keys(DISPLAY_FONTS)}
            onChange={(v) => setTweaks("displayFont", v)}
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio
            label="Layout"
            value={tweaks.heroLayout}
            options={[
              { value: "split", label: "Split" },
              { value: "centered", label: "Centered" },
              { value: "stacked", label: "Stacked" },
            ]}
            onChange={(v) => setTweaks("heroLayout", v)}
          />
          <TweakToggle
            label="Show 'serving Wylie since' badge"
            value={tweaks.showHeroBadge}
            onChange={(v) => setTweaks("showHeroBadge", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function TopBar() {
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <a className="brand" href="#top">
          <img src="https://assets.cdn.filesafe.space/fqEZ7fNaVfdF62H2Eieo/media/69f257fee84e52bef4c6f014.png" alt="Access Lawn & Landscape" style={{ height: 72, width: "auto", objectFit: "contain", display: "block" }} />
        </a>
        <nav className="topnav">
          <a href="#services">Services</a>
          <a href="#promise">Why us</a>
          <a href="#contact">Contact</a>
        </nav>
        <div style={{ display: "flex", gap: 10, alignItems: "center", marginLeft: "auto" }}>
          <a href="tel:9725338128" className="cta-pill cta-pill-ghost">
            <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2.5" 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.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.6 1.22h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.69 2.81a2 2 0 0 1-.45 2.11L7.91 8.91a16 16 0 0 0 6.18 6.18l.96-.96a2 2 0 0 1 2.11-.45c.9.33 1.85.56 2.81.69A2 2 0 0 1 22 16.92z"/></svg>
            <span>(972) 533-8128</span>
          </a>
          <a href="#quote" className="cta-pill cta-pill-accent">
            Get a Free Estimate →
          </a>
        </div>
      </div>
    </header>
  );
}

function Hero({ layout, accent, showBadge }) {
  const headline = (
    <>
      A yard you're <em>proud</em><br />
      to pull up to.
    </>
  );
  const sub = (
    <>
      Family-run landscaping, hardscaping, and masonry serving Wylie, Plano, McKinney, and the wider DFW Metroplex.
      We mow, plant, and build the patios you'll actually use.
    </>
  );

  if (layout === "centered") {
    return (
      <section className="hero hero-centered" id="top">
        {showBadge && <Badge accent={accent} />}
        <h1 className="hero-headline">{headline}</h1>
        <p className="hero-sub">{sub}</p>
        <HeroCtas accent={accent} />
        <ProjectImg src="6a03538b9bfd1bb68899a438.png" ratio="16 / 7" className="hero-img-wide" />
      </section>
    );
  }

  if (layout === "stacked") {
    return (
      <section className="hero hero-stacked" id="top">
        <div className="hero-stacked-top">
          {showBadge && <Badge accent={accent} />}
          <h1 className="hero-headline">{headline}</h1>
        </div>
        <div className="hero-stacked-grid">
          <ProjectImg src="6a0353770c09109fd560f2de.png" ratio="4 / 5" />
          <div className="hero-stacked-text">
            <p className="hero-sub">{sub}</p>
            <HeroCtas accent={accent} />
          </div>
          <ProjectImg src="6a0353937f9c717c7cb0dcac.png" ratio="4 / 5" />
        </div>
      </section>
    );
  }

  // split (default)
  return (
    <section className="hero hero-split" id="top">
      <div className="hero-text">
        {showBadge && <Badge accent={accent} />}
        <h1 className="hero-headline">{headline}</h1>
        <p className="hero-sub">{sub}</p>
        <HeroCtas accent={accent} />
        <div className="hero-meta">
          <div>
            <div className="hero-meta-num">10+</div>
            <div className="hero-meta-label">years in business</div>
          </div>
          <div className="hero-meta-div" />
          <div>
            <div className="hero-meta-num">DFW</div>
            <div className="hero-meta-label">Wylie · Plano · McKinney</div>
          </div>
          <div className="hero-meta-div" />
          <div>
            <div className="hero-meta-num">BBB</div>
            <div className="hero-meta-label">Accredited · Licensed & insured</div>
          </div>
        </div>
      </div>
      <div className="hero-img-wrap">
        <div className="img-ph" style={{ aspectRatio: "4 / 5" }}>
          <img src="https://assets.cdn.filesafe.space/fqEZ7fNaVfdF62H2Eieo/media/69fa4335becb53a7350afbc7.png" alt="Access Lawn & Landscape project" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", borderRadius: 16 }} />
        </div>
        <div className="hero-img-tag">
          <span className="hero-img-tag-dot" style={{ background: accent }} />
          New install · Spring '26
        </div>
      </div>
    </section>
  );
}

function Badge({ accent }) {
  return (
    <div className="hero-badge">
      <span className="hero-badge-dot" style={{ background: accent }} />
      Family owned & operated in Wylie for 10+ years
    </div>
  );
}

function HeroCtas({ accent }) {
  return (
    <div className="hero-ctas">
      <a href="#quote" className="btn btn-primary" style={{ background: accent, borderColor: accent }}>
        Get a free estimate
      </a>
      <a href="#services" className="btn btn-ghost">
        See our services →
      </a>
    </div>
  );
}

function TrustStrip() {
  const items = [
    "Licensed & insured",
    "Free on-site estimates",
    "Family owned for 10+ years",
    "Weekly route in 75098",
    "Landscape · Hardscape · Masonry",
  ];
  return (
    <div className="trust-strip">
      <div className="trust-strip-inner">
        {items.map((t, i) => (
          <React.Fragment key={t}>
            <span className="trust-item">{t}</span>
            {i < items.length - 1 && <span className="trust-dot" />}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function Services({ accent }) {
  const big = [
    {
      kicker: "01 · Lawn & Landscape",
      title: "Lawns, beds & plantings.",
      body: "From a weekly mow to a full front-yard redesign. We handle the season — mowing, trimming, mulch, seasonal color, shrub and small-tree care, fertilization, weed control, and aeration.",
      bullets: ["Weekly & bi-weekly mowing", "Hedge & shrub trimming", "Fertilization & weed control", "Aeration & overseed", "Mulch + bed refresh", "Small tree maintenance"],
      img: "6a0352ac82125b98747853a4.png",
    },
    {
      kicker: "02 · Stone work & Masonry",
      title: "Patios, walls & outdoor kitchens.",
      body: "We design and build the stone work that makes a yard feel finished. Flagstone patios, walkways, fire pits, outdoor kitchens, retaining walls, custom mailboxes, light posts, and concrete work — done right the first time.",
      bullets: ["Flagstone patios", "Outdoor kitchens & fire pits", "Retaining walls & borders", "Concrete & walkways", "Brick mailboxes & posts", "French drains & gutters"],
      img: "6a0354324d2085f898be5a86.png",
    },
  ];

  return (
    <section className="section services" id="services">
      <div className="section-head">
        <div className="section-eyebrow"><span className="eyebrow-dash" style={{ background: accent }} />What we do</div>
        <h2 className="section-title">Two crews. One standard.</h2>
        <p className="section-lede">
          We keep our work to two things and do both of them carefully. A landscape crew that knows your yard
          by name, and a stone crew that builds patios meant to outlast the deed to your house.
        </p>
      </div>

      <div className="services-grid">
        {big.map((s) => (
          <article key={s.kicker} className="service-card">
            <ProjectImg src={s.img} ratio="5 / 3" />
            <div className="service-card-body">
              <div className="service-kicker">{s.kicker}</div>
              <h3 className="service-title">{s.title}</h3>
              <p className="service-body">{s.body}</p>
              <ul className="service-bullets">
                {s.bullets.map((b) => (
                  <li key={b}>
                    <span className="bullet-dot" style={{ background: accent }} />
                    {b}
                  </li>
                ))}
              </ul>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function LocalPromise({ accent }) {
  const promises = [
    {
      n: "01",
      t: "We answer the phone.",
      b: "Call before 5 — you'll get a human in Wylie, not a call center. Quotes come back inside one business day.",
    },
    {
      n: "02",
      t: "Same crew, every week.",
      b: "You meet your crew lead at the walk-through and they're the one back on Tuesday. No revolving door.",
    },
    {
      n: "03",
      t: "Built for North Texas.",
      b: "Bermuda and St. Augustine specialists. We pick plants that survive August and stone that handles freeze-thaw.",
    },
    {
      n: "04",
      t: "Honest scope.",
      b: "We'll tell you what doesn't need doing. If a patch of yard just needs water, we'll say so before we sell you sod.",
    },
  ];

  return (
    <section className="section promise" id="promise">
      <div className="promise-grid">
        <div className="promise-intro">
          <div className="section-eyebrow"><span className="eyebrow-dash" style={{ background: accent }} />The local promise</div>
          <h2 className="section-title">
            We live here too.<br />
            <span className="section-title-quiet">So we work like it.</span>
          </h2>
          <p className="section-lede">
            Joe Flores started Access Lawn over a decade ago. We're still based on Meadowbrook Drive,
            still answering our own phone, and still doing the work ourselves.
          </p>
        </div>
        <div className="promise-list">
          {promises.map((p) => (
            <div key={p.n} className="promise-item">
              <div className="promise-n" style={{ color: accent }}>{p.n}</div>
              <div>
                <div className="promise-t">{p.t}</div>
                <div className="promise-b">{p.b}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function QuoteSection({ accent }) {
  return (
    <section className="section quote-section" id="quote">
      <div className="quote-grid">
        <div className="quote-intro">
          <div className="section-eyebrow"><span className="eyebrow-dash" style={{ background: accent }} />Free estimate</div>
          <h2 className="section-title">
            Tell us about your yard.
          </h2>
          <p className="section-lede">
            Fill out the form and we'll come walk the property, talk through options, and send a written
            estimate within one business day. No deposit, no pressure.
          </p>
          <ul className="quote-checks">
            <li><Check accent={accent} />Free on-site walk-through</li>
            <li><Check accent={accent} />Written estimate within 1 business day</li>
            <li><Check accent={accent} />No subcontractors — our crews only</li>
            <li><Check accent={accent} />Licensed & insured in Texas</li>
          </ul>
        </div>
        <div className="quote-form-wrap">
          <iframe
            src="https://go.tevoconnect.com/widget/form/dufXeMecnABmTXFauwbB"
            style={{ width: "100%", height: 615, border: "none", borderRadius: 8 }}
            id="inline-dufXeMecnABmTXFauwbB"
            data-layout='{"id":"INLINE"}'
            data-trigger-type="alwaysShow"
            data-trigger-value=""
            data-activation-type="alwaysActivated"
            data-activation-value=""
            data-deactivation-type="neverDeactivate"
            data-deactivation-value=""
            data-form-name="Basic Contact Form"
            data-height="615"
            data-layout-iframe-id="inline-dufXeMecnABmTXFauwbB"
            data-form-id="dufXeMecnABmTXFauwbB"
            title="Basic Contact Form"
          />
        </div>
      </div>
    </section>
  );
}

function Check({ accent }) {
  return (
    <span className="check-circle" style={{ borderColor: accent, color: accent }}>
      <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
        <polyline points="20 6 9 17 4 12" />
      </svg>
    </span>
  );
}

function Footer() {
  return (
    <footer className="footer" id="contact">
      <div className="footer-inner">
        <div className="footer-brand">
          <img src="https://assets.cdn.filesafe.space/fqEZ7fNaVfdF62H2Eieo/media/69f257fee84e52bef4c6f014.png" alt="Access Lawn & Landscape" style={{ height: 80, width: "auto", objectFit: "contain", display: "block", marginBottom: 12 }} />
          <p className="footer-tag">
            Family owned and operated for 10+ years. Landscape, hardscape, and masonry serving Wylie, Plano, McKinney, and the wider DFW Metroplex.
          </p>
        </div>
        <div className="footer-cols">
          <div>
            <div className="footer-h">Visit</div>
            <p>690 Meadowbrook Dr<br/>Wylie, TX 75098</p>
          </div>
          <div>
            <div className="footer-h">Call</div>
            <p><a href="tel:9725338128">(972) 533-8128</a><br/>Mon–Fri · 8a–5p</p>
          </div>
          <div>
            <div className="footer-h">Email</div>
            <p><a href="mailto:info@accesslawn.com">info@accesslawn.com</a></p>
          </div>
        </div>
      </div>
      <div className="footer-rule" />
      <div className="footer-fine">
        <span>© 2026 Access Lawn & Landscape · Owner: Joe Flores</span>
        <span>BBB Accredited · Licensed & insured in Texas</span>
      </div>
    </footer>
  );
}

const BASE = "https://assets.cdn.filesafe.space/fqEZ7fNaVfdF62H2Eieo/media/";

function ProjectImg({ src, ratio, className }) {
  return (
    <div className={`img-ph ${className || ""}`} style={{ aspectRatio: ratio || "4 / 3" }}>
      <img src={BASE + src} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block", borderRadius: "inherit" }} />
    </div>
  );
}

function ImagePlaceholder({ label, ratio, className }) {
  return (
    <div className={`img-ph ${className || ""}`} style={{ aspectRatio: ratio || "4 / 3" }}>
      <div className="img-ph-stripes" />
      <div className="img-ph-label">{label}</div>
    </div>
  );
}

function CtaBanner({ accent }) {
  return (
    <div className="cta-banner">
      <div className="cta-banner-inner">
        <div className="cta-banner-text">
          <div className="cta-banner-hed">Ready for a yard you're proud of?</div>
          <div className="cta-banner-sub">Free on-site estimate · Written quote in 1 business day · No pressure</div>
        </div>
        <a href="#quote" className="cta-banner-btn">
          Get My Free Estimate →
        </a>
      </div>
    </div>
  );
}

function MobileCta({ accent }) {
  return (
    <div className="mobile-cta">
      <a href="tel:9725338128" className="mobile-cta-call">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.5" 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.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.6 1.22h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.69 2.81a2 2 0 0 1-.45 2.11L7.91 8.91a16 16 0 0 0 6.18 6.18l.96-.96a2 2 0 0 1 2.11-.45c.9.33 1.85.56 2.81.69A2 2 0 0 1 22 16.92z"/></svg>
        Call Now
      </a>
      <a href="#quote" className="mobile-cta-quote" style={{ background: accent }}>
        Get Free Estimate →
      </a>
    </div>
  );
}

function ImagesWidget({ accent }) {
  return (
    <section className="section widget-section">
      <div className="section-head">
        <div className="section-eyebrow"><span className="eyebrow-dash" style={{ background: accent }} />Photos</div>
        <h2 className="section-title">More from our projects.</h2>
      </div>
      <iframe src="https://www.localmarketingmanager.com/api/images/access-lawn-landscape-image-widget" style={{ width: "100%", border: "none", minHeight: 480, borderRadius: 16 }} title="Images Widget" />
    </section>
  );
}

function LocalPostsWidget({ accent }) {
  return (
    <section className="section widget-section">
      <div className="section-head">
        <div className="section-eyebrow"><span className="eyebrow-dash" style={{ background: accent }} />Updates</div>
        <h2 className="section-title">Latest from Access Lawn.</h2>
      </div>
      <iframe src="https://www.localmarketingmanager.com/api/local-posts/access-lawn-landscape-local-posts-widget" style={{ width: "100%", minHeight: 480, border: "none", borderRadius: 16 }} title="Local Posts Widget" />
    </section>
  );
}

function StarRating() {
  return (
    <div style={{ display: "flex", gap: 2, color: "#F59E0B" }}>
      {[1,2,3,4,5].map(i => (
        <svg key={i} width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
      ))}
    </div>
  );
}

const GOOGLE_REVIEWS = [
  {
    name: "Vaughan Williams",
    date: "3 weeks ago",
    text: "We have used Access Lawn and Landscaping for years. They were recommended by our neighbor. Joe is fast to respond and crew provides great service. Lon and Judy",
  },
  {
    name: "Angela Lao",
    date: "3 years ago",
    text: "My husband reached out to Joe because we desperately needed our lawn mowed. Joe or his crew came out the next day and has been consistent ever since. We appreciate you guys.",
  },
  {
    name: "Green-Grounds",
    date: "13 years ago",
    text: "I would recommend this company any time. They did some landscaping for us that was done to perfection. I met them at a retirement home they take care of. The staff likes them so I had to give them a try. Very Good.",
  },
];

function ReviewWidget({ accent }) {
  return (
    <section className="section review-section">
      <div className="section-head">
        <div className="section-eyebrow"><span className="eyebrow-dash" style={{ background: accent }} />Reviews</div>
        <h2 className="section-title">What our customers say.</h2>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 24, marginBottom: 40 }}>
        {GOOGLE_REVIEWS.map((r) => (
          <div key={r.name} style={{ background: "#fff", borderRadius: 12, padding: "28px 28px 24px", boxShadow: "0 1px 4px rgba(0,0,0,0.08)", display: "flex", flexDirection: "column", gap: 14 }}>
            <StarRating />
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: "#374151", flex: 1 }}>"{r.text}"</p>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 4 }}>
              <div style={{ width: 38, height: 38, borderRadius: "50%", background: "#D1FAE5", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 15, color: "#065F46", flexShrink: 0 }}>
                {r.name[0]}
              </div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 14, color: "#111827" }}>{r.name}</div>
                <div style={{ fontSize: 12, color: "#6B7280" }}>{r.date} · Google</div>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ textAlign: "center" }}>
        <a
          href="https://www.google.com/maps/place/Access+Lawn+and+Landscape/@33.056871,-96.5692383,17z"
          target="_blank"
          rel="noopener noreferrer"
          style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "#fff", border: "2px solid #E5E7EB", borderRadius: 8, padding: "12px 24px", fontWeight: 600, fontSize: 15, color: "#111827", textDecoration: "none", transition: "border-color 0.2s" }}
        >
          <svg width="20" height="20" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
            <path fill="#4285F4" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/>
            <path fill="#34A853" d="M6.3 14.7l7 5.1C15 16.1 19.2 13 24 13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 16.3 2 9.7 7.4 6.3 14.7z"/>
            <path fill="#FBBC05" d="M24 46c5.5 0 10.5-1.9 14.3-5l-6.6-5.4C29.8 37 27 38 24 38c-6.1 0-11.3-4.1-13.1-9.7l-7 5.4C7.5 41.8 15.2 46 24 46z"/>
            <path fill="#EA4335" d="M44.5 20H24v8.5h11.8c-.9 2.6-2.6 4.8-4.8 6.1l6.6 5.4C41.5 36.7 45 31 45 24c0-1.3-.2-2.7-.5-4z"/>
          </svg>
          See all reviews on Google
        </a>
      </div>
    </section>
  );
}

window.App = App;