// app.jsx — 941 Home Repair Help homepage

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#0B1B3A", "#F26B1F"],
  "heroLayout": "card",
  "stickyCta": true,
  "showTestimonials": true,
  "headline": "Need Home Repair Help in Bradenton or Sarasota? Text Photos. Get Help Fast.",
  "subheadline": "Bradenton, Sarasota, Lakewood Ranch & Manatee County homeowners — send a photo of your repair and a vetted local crew will text you back. Small jobs welcome. Same-day reply, neighborhood prices, no quote portals."
}/*EDITMODE-END*/;

const PHONE = "941-315-5920";

// Apply palette to CSS variables
function applyPalette(palette) {
  const [navy, orange] = palette;
  const root = document.documentElement;
  root.style.setProperty("--navy", navy);
  root.style.setProperty("--orange", orange);
  // derive a deeper navy and orange
  root.style.setProperty("--navy-deep", shade(navy, -16));
  root.style.setProperty("--navy-soft", shade(navy, 12));
  root.style.setProperty("--orange-deep", shade(orange, -14));
  root.style.setProperty("--orange-tint", mix(orange, "#ffffff", 0.78));
}
function hexToRgb(hex){ const h = hex.replace("#",""); const n = parseInt(h,16); return [(n>>16)&255, (n>>8)&255, n&255]; }
function rgbToHex(r,g,b){ return "#" + [r,g,b].map(v => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2,"0")).join(""); }
function shade(hex, delta){ const [r,g,b] = hexToRgb(hex); const f = delta < 0 ? (1 + delta/100) : 1; const t = delta < 0 ? 0 : 255; const a = Math.abs(delta)/100; return rgbToHex(r*f + (delta>0?t*a:0), g*f + (delta>0?t*a:0), b*f + (delta>0?t*a:0)); }
function mix(a,b,t){ const A=hexToRgb(a), B=hexToRgb(b); return rgbToHex(A[0]*(1-t)+B[0]*t, A[1]*(1-t)+B[1]*t, A[2]*(1-t)+B[2]*t); }

// ── Hero ────────────────────────────────────────────────────────────────────
function Hero({ headline, subheadline, layout }) {
  const tel = PHONE.replace(/\D/g, "");
  const sms = `sms:${tel}?&body=${encodeURIComponent("Hi — sending a photo of a repair, can you help?")}`;

  // Split the headline into a quieter framing line ("Need Home Repair Help ...?")
  // and the dominant statement ("Text Photos. Get Help Fast.")
  // If user-edited copy doesn't contain those phrases, fall back to a single block.
  const renderHeadline = () => {
    const m = headline.match(/^(.*?)(Text Photos\.?\s*Get Help Fast\.?)(.*)$/i);
    if (m) {
      const [, pre, hit, post] = m;
      const [p1, p2] = hit.split(/(?<=\.)\s+/); // "Text Photos." / "Get Help Fast."
      return (
        <>
          {pre.trim() && <span className="hero-framing">{pre.trim()}</span>}
          <span className="hero-shout">
            <span className="hero-shout-l1">{p1 || "Text Photos."}</span>
            <span className="hero-shout-l2">{p2 || "Get Help Fast."}</span>
          </span>
          {post.trim() && <span className="hero-framing-post">{post.trim()}</span>}
        </>
      );
    }
    return <span className="hero-shout"><span className="hero-shout-l1">{headline}</span></span>;
  };

  return (
    <section id="top" className={"hero layout-" + layout} data-screen-label="Hero">
      <div className="wrap">
        <div className="hero-grid">
          <div className="hero-text">
            <div className="hero-eyebrow">
              <span className="dot"></span>
              Bradenton · Sarasota · Manatee Co.
            </div>
            <h1 className="display">{renderHeadline()}</h1>
            <p className="lead">{subheadline}</p>
            <div className="hero-ctas">
              <a className="btn btn-primary" href={sms}>
                <Icon.Msg /> Text Photos Now
              </a>
              <a className={"btn " + (layout === "split" ? "btn-ghost-navy" : "btn-secondary")} href="#how">
                <Icon.Check /> Get a Free Estimate
              </a>
            </div>
            <div className="hero-microtrust">
              <div className="mt-item"><span className="stars">★★★★★</span> Neighborhood-rated</div>
              <div className="mt-item"><Icon.Shield /> Insured local crews</div>
              <div className="mt-item"><Icon.Bolt /> Same-day reply</div>
            </div>
          </div>

          <div className="hero-visual">
            <HeroCard />
            <HeroPhone />
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroCard() {
  return (
    <div className="hero-card hero-card-ba">
      <div className="hero-card-frame">
        <CompareSlider
          before="assets/ba2-drywall-before.jpg"
          after="assets/ba2-drywall-after.jpg"
        />
      </div>
      <div className="hero-card-meta">
        <div className="hero-card-meta-l">
          <div className="hero-verified">
            <span className="vchk"><Icon.Check /></span>
            Verified local job
          </div>
          <div className="hero-card-title">Drywall &amp; texture repair · 34209 Bradenton</div>
        </div>
        <div className="hero-card-meta-r">
          <div className="hero-card-crew">
            <div className="ava">M</div>
            <div>
              <b>Marco's crew</b>
              <span>Same-day fix</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function HeroPhone() {
  return (
    <div className="hero-phone" aria-hidden="true">
      <div className="screen">
        <div className="phone-bar">
          <span>9:41</span>
          <span>941 Home Repair</span>
          <span>5G</span>
        </div>
        <div className="phone-thread">
          <div className="bubble me">Hey — got a hole in my drywall from a doorknob, can you help?</div>
          <div className="bubble me img">
            <div style={{ background: "url('assets/ba2-drywall-before.jpg') center/cover" }}></div>
          </div>
          <div className="bubble them">Hi! Yes — that's a quick patch. We're in your area today, can swing by 2pm. $145 flat.</div>
          <div className="bubble me">Perfect 🙏</div>
          <div className="bubble them">Sending Marco — texts when he's 10 min out.</div>
        </div>
      </div>
    </div>
  );
}

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

  React.useEffect(() => { applyPalette(t.palette); }, [t.palette]);

  const palettes = [
    ["#0B1B3A", "#F26B1F"], // classic navy + crisp orange
    ["#102C5C", "#FF8A2B"], // coastal — softer navy, sunlit orange
    ["#03132E", "#FF6A00"], // bold — near-black navy, bright safety orange
    ["#1F2942", "#C75A1A"], // premium — muted slate-navy, burnt orange
  ];

  return (
    <>
      <Header phone={PHONE} />
      <Hero headline={t.headline} subheadline={t.subheadline} layout={t.heroLayout} />
      <TrustStrip />
      <HowItWorks />
      <ServicesGrid />
      <BeforeAfterGallery />
      <ServiceAreas />
      <Testimonials show={t.showTestimonials} />
      <FAQ />
      <FinalCTA phone={PHONE} />
      <Footer phone={PHONE} />
      <StickyCTA phone={PHONE} enabled={t.stickyCta} />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio
          label="Hero layout"
          value={t.heroLayout}
          options={["card", "stacked", "split"]}
          onChange={(v) => setTweak("heroLayout", v)}
        />
        <TweakText
          label="Headline"
          value={t.headline}
          rows={3}
          onChange={(v) => setTweak("headline", v)}
        />
        <TweakText
          label="Subheadline"
          value={t.subheadline}
          rows={3}
          onChange={(v) => setTweak("subheadline", v)}
        />

        <TweakSection label="Brand Color" />
        <TweakColor
          label="Navy + Orange"
          value={t.palette}
          options={palettes}
          onChange={(v) => setTweak("palette", v)}
        />

        <TweakSection label="Layout" />
        <TweakToggle
          label="Sticky mobile CTA"
          value={t.stickyCta}
          onChange={(v) => setTweak("stickyCta", v)}
        />
        <TweakToggle
          label="Show testimonials"
          value={t.showTestimonials}
          onChange={(v) => setTweak("showTestimonials", v)}
        />
      </TweaksPanel>
    </>
  );
}

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