/* global React, Icon, Button, Eyebrow, SectionHead, BAFrame, nav, ProofCard, SAMPLE_PROOF, Pricing */
/* Patch Me Up — Circumstance landing page template + content map */
const { useState: useStateL } = React;

const LANDING_CONTENT = {
  "post-trade": {
    eyebrow: "Post‑trade wall repair",
    h1: "Wall opened during a repair? We close the loop.",
    lede: "Plumbing, HVAC, and electrical work often leaves customers with one last problem: the wall. Patch Me Up helps homeowners and trade partners finish the job with fast, clean, documented wall and ceiling repair.",
    who: ["Homeowners after access work", "Plumbers · HVAC · Electricians", "Property managers managing trade visits"],
    cause: ["Supply‑line or shutoff replacement", "Whole‑house repipe access cuts", "HVAC return / line‑set repair", "Outlet, panel, or in‑wall wiring"],
    repairs: ["Drywall patches up to ~24 in.", "Texture matching (knockdown, orange peel, smooth)", "Primer + color‑matched paint blend", "Site cleanup + furniture reset"],
    photoTips: ["A wide shot of the room", "A close‑up of the damage with something for scale", "A photo of the surrounding texture and paint"],
    timing: "Most post‑trade repairs are scoped same‑day and finished within 2–4 business days.",
    priceLine: "$750 – $2,500 — depending on cut size, texture difficulty, and paint blend area.",
    primaryCta: "Send Photos for an Estimate",
    secondaryCta: "Refer a Customer",
    secondaryRoute: "/partners",
    proofTag: "post-trade",
    faqs: [
      { q: "Do you work with my plumber directly?", a: "Yes. About 40% of our work comes from trade referrals. We can coordinate scheduling, share photos both directions, and send the proof report to your plumber too." },
      { q: "Is there a minimum charge?", a: "Our small‑repair service minimum is $395 — that covers one patch with sand and a small touch of paint, all materials, and a proof report." },
      { q: "Can you match the existing texture?", a: "Yes. Knockdown, orange peel, smooth, and hand‑trowel are routine for us. Heavier specialty textures (skip‑trowel, Santa Fe) take a small test panel first." },
      { q: "What if you find something the photos didn't show?", a: "We text you first with a photo and a re‑scope before we change the price. No surprise invoices." },
    ],
    related: [
      { slug: "ceiling", title: "Ceiling repair after a leak" },
      { slug: "failed-diy", title: "Failed DIY patch rescue" },
    ],
  },
  "pre-listing": {
    eyebrow: "Pre‑listing wall repair",
    h1: "Wall repair before photos, showings, or inspection.",
    lede: "Small wall damage can make a listing feel less maintained. Patch Me Up handles drywall, texture, ceiling, and paint‑blend repairs before photos, showings, inspections, or final walkthroughs — on your deadline, not ours.",
    who: ["Listing agents managing a Phoenix‑metro property", "Sellers preparing for photo day", "Stagers needing finish‑level fixes"],
    cause: ["Nail / TV‑mount holes from previous owner", "Door knob dents", "Dings from furniture removal", "Patches left behind from prior repairs"],
    repairs: ["Multi‑area patching across rooms", "Texture matching to existing walls", "Color‑matched paint blends (not full repaint)", "One technician, one trip when possible"],
    photoTips: ["A photo of each room with damage", "Close‑ups of each patch", "Photo of paint can / chip if available"],
    timing: "Bundled multi‑area visits typically finish in a single day. Tell us your shoot or showing date.",
    priceLine: "$1,500 – $5,000 for typical multi‑area pre‑listing packages.",
    primaryCta: "Book Before Photos",
    secondaryCta: "Talk to a coordinator",
    secondaryRoute: "/send-photos",
    proofTag: "pre-listing",
    faqs: [
      { q: "How soon before the shoot do you need to work?", a: "We aim to finish at least 16 hours before your photo shoot. That lets paint flash fully and gives you time to walk through it." },
      { q: "Do you repaint full walls?", a: "Only if needed. Most listings only need a color‑matched blend at the repair — we keep scope (and price) tight. Full repaints aren't our service." },
      { q: "Can you use a lockbox?", a: "Yes. We coordinate access with the listing agent and document the lockbox code use in the proof report." },
    ],
    related: [
      { slug: "rental-turn", title: "Rental / unit turn repair" },
      { slug: "ceiling", title: "Ceiling repair before listing" },
    ],
  },
  "rental-turn": {
    eyebrow: "Rental turn repair",
    h1: "Rent‑ready wall repair with documentation.",
    lede: "From tenant damage to move‑out repairs, Patch Me Up helps property managers and landlords turn wall damage into a documented, ready‑to‑rent repair — with the photos a security‑deposit dispute needs.",
    who: ["Property managers turning units", "Landlords with 1–10 doors", "Short‑term rental operators between guests"],
    cause: ["Door‑knob holes", "Anchor holes from removed shelves and TVs", "Guest impact damage", "Cleaning damage from heavy scrubbing"],
    repairs: ["Per‑area documentation (for deposit deductions)", "Patch + texture + paint blend", "Multi‑unit packages and recurring turn schedules", "Coordination with cleaners and inspectors"],
    photoTips: ["Photo of each damaged area", "Tape measure or ruler in the close‑up", "Photo of paint can or unit color sheet"],
    timing: "Most rental turns are scoped in under an hour and finished within the 24–72 hour window between guests or tenants.",
    priceLine: "$395 minimum visit · $750–$1,250 typical · $1,500–$3,500 multi‑area.",
    primaryCta: "Request Turnover Repair",
    secondaryCta: "Talk to property manager team",
    secondaryRoute: "/partners",
    proofTag: "rental-turn",
    faqs: [
      { q: "Do you handle multiple units on one visit?", a: "Yes — and we'll bundle the scope to reduce trip charges. Send us the unit list and what's broken." },
      { q: "Can the documentation be used for deposit deductions?", a: "Yes. We document each area as its own line in the proof report with timestamp and tech name. Many PMs include it in the move‑out package." },
      { q: "Do you work for short‑term rentals between guests?", a: "Frequently. Quick‑turn repairs between check‑ins are one of our most common job types." },
    ],
    related: [
      { slug: "pre-listing", title: "Pre‑listing wall repair" },
      { slug: "failed-diy", title: "Failed DIY patch rescue" },
    ],
  },
  "ceiling": {
    eyebrow: "Ceiling repair",
    h1: "Ceiling repair, blended back into the room.",
    lede: "Access cuts, post‑leak patches, and water‑stain rescues. We match the existing ceiling texture so the repair disappears from 18 inches away.",
    who: ["Homeowners after a plumbing leak", "Trade partners after HVAC or supply‑line access", "Realtors needing a clean ceiling before photos"],
    cause: ["Plumbing access cuts from above or below", "Brown ring / soft spot from a leak", "Popcorn or knockdown texture damage", "Recessed light or fan retrofit holes"],
    repairs: ["Patch (with backing) or full drywall section replacement", "Texture matching (knockdown, popcorn, smooth)", "Primer + stain‑blocking + paint blend", "Containment + dust control"],
    photoTips: ["A wide photo of the ceiling", "A close‑up under angled light to show texture", "A note about what's above / below the area"],
    timing: "Most ceiling repairs are done in a single visit (2–4 hours on‑site).",
    priceLine: "$1,000 – $2,500 typical ceiling package.",
    primaryCta: "Send Photos for an Estimate",
    secondaryCta: "Talk to ceiling specialist",
    secondaryRoute: "/send-photos",
    proofTag: "ceiling",
    faqs: [
      { q: "Can you match popcorn ceiling?", a: "Yes, including blending into existing popcorn that contains asbestos‑era materials (we test if you're unsure)." },
      { q: "What about the water stain?", a: "We use stain‑blocking primer before any topcoat. The yellow ring stays gone." },
    ],
    related: [
      { slug: "post-trade", title: "Post‑trade wall repair" },
      { slug: "failed-diy", title: "Failed DIY patch rescue" },
    ],
  },
  "failed-diy": {
    eyebrow: "Failed DIY rescue",
    h1: "Fix a bad drywall patch.",
    lede: "DIY patches usually fail in three places: the mesh ring shows, the texture doesn't match, and the paint blend halos around the patch. We cut it out, redo it, and make it disappear.",
    who: ["Homeowners who tried a kit", "Realtors who inherited a bad patch on a listing", "Property managers fixing prior turns"],
    cause: ["Self‑adhesive mesh kits that flexed and cracked", "Wrong texture from a spray can", "Roller paint over patch creating a visible halo", "Lumpy mud from too many coats"],
    repairs: ["Cut out the failed patch cleanly", "Re‑mud with hot mud + topping", "Re‑texture to match existing wall", "Color‑matched blend (not a roller patch)"],
    photoTips: ["Photo with raking light", "Close‑up showing the failed edge", "Photo of the surrounding wall texture"],
    timing: "Most failed‑DIY rescues are single‑visit (1.5–3 hours on‑site).",
    priceLine: "$500 – $1,250 typical rescue.",
    primaryCta: "Send Photos for an Estimate",
    secondaryCta: "See more rescue examples",
    secondaryRoute: "/proof",
    proofTag: "failed-diy",
    faqs: [
      { q: "Should I try to peel the old patch first?", a: "Please don't — it usually pulls the paper layer off the surrounding drywall. Photo it as‑is and we'll handle it." },
      { q: "Can you re‑texture without re‑texturing the whole wall?", a: "Yes. We feather the texture and the paint so the patch blends, not the whole room." },
    ],
    related: [
      { slug: "post-trade", title: "Post‑trade wall repair" },
      { slug: "rental-turn", title: "Rental / unit turn repair" },
    ],
  },
};

/* ─────────── Landing Hero ─────────── */
function LandingHero({ c, slug }) {
  return (
    <section className="landing-hero">
      <div className="container">
        <div className="crumbs" style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--fg-muted)", marginBottom: 16 }}>
          <a onClick={(e) => { e.preventDefault(); nav("/"); }} href="#/" style={{ color: "var(--pmu-teal)" }}>Home</a>
          &nbsp;/&nbsp;
          <a onClick={(e) => { e.preventDefault(); nav("/services"); }} href="#/services" style={{ color: "var(--pmu-teal)" }}>Services</a>
          &nbsp;/&nbsp; {c.eyebrow}
        </div>
        <div className="landing-hero-grid">
          <div>
            <Eyebrow icon="loop">{c.eyebrow}</Eyebrow>
            <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(40px, 4.6vw, 60px)", lineHeight: 1, letterSpacing: "-0.025em", color: "var(--pmu-graphite)", margin: "16px 0", textWrap: "balance" }}>
              {c.h1}
            </h1>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: "var(--fg-muted)", maxWidth: 540 }}>{c.lede}</p>
            <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
              <Button kind="action" size="lg" to="/send-photos">
                <Icon name="camera" size={18} />
                {c.primaryCta}
              </Button>
              <Button kind="secondary" size="lg" to={c.secondaryRoute}>
                {c.secondaryCta}
              </Button>
            </div>
            <div className="hero-trust" style={{ marginTop: 20 }}>
              <span><Icon name="check-circle" size={14} />Phoenix Metro</span>
              <span><Icon name="check-circle" size={14} />Photo proof</span>
              <span><Icon name="check-circle" size={14} />One‑visit when possible</span>
            </div>
          </div>
          <div className="landing-photo-stack">
            <div className="ba-frame before">
              <span className="ba-tag">Before</span>
              <img src="ds/photo-before.svg" alt="" />
            </div>
            <div className="ba-frame after">
              <span className="ba-tag after">After</span>
              <img src="ds/photo-after.svg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Who this is for + cause ─────────── */
function WhoAndCause({ c }) {
  return (
    <section className="section">
      <div className="container">
        <div className="scope-grid">
          <div className="scope-list">
            <h4>
              <span style={{ color: "var(--pmu-teal)", display: "inline-flex" }}><Icon name="home" size={20} /></span>
              Who this is for
            </h4>
            <ul>
              {c.who.map(item => (
                <li key={item}>
                  <span className="ico" style={{ color: "var(--pmu-teal)" }}><Icon name="check-circle" size={18} /></span>
                  {item}
                </li>
              ))}
            </ul>
          </div>
          <div className="scope-list">
            <h4>
              <span style={{ color: "var(--pmu-clay)", display: "inline-flex" }}><Icon name="sparkle" size={20} /></span>
              What caused the damage
            </h4>
            <ul>
              {c.cause.map(item => (
                <li key={item}>
                  <span className="ico" style={{ color: "var(--pmu-clay)" }}><Icon name="chevron-right" size={18} /></span>
                  {item}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Scope (does / doesn't) ─────────── */
function ScopeBlock({ c }) {
  return (
    <section className="section section--plaster">
      <div className="container">
        <SectionHead
          eyebrow="What we repair"
          title="A focused scope. That's the point."
          sub="We stay in our lane on purpose — so we get fast, clean, and consistent at exactly this kind of small repair."
        />
        <div className="scope-grid">
          <div className="scope-list is-does">
            <h4><span className="ico"><Icon name="check-circle" size={20} /></span>What we do</h4>
            <ul>
              {c.repairs.map(item => (
                <li key={item}>
                  <span className="ico"><Icon name="check-circle" size={18} /></span>
                  {item}
                </li>
              ))}
            </ul>
          </div>
          <div className="scope-list is-doesnt">
            <h4><span className="ico"><Icon name="x" size={20} /></span>What we don't</h4>
            <ul>
              {["Full‑house painting", "Large drywall installation (new construction)", "Commercial drywall at scale", "General handyman work"].map(item => (
                <li key={item}>
                  <span className="ico"><Icon name="x" size={18} /></span>
                  {item}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Photo tips ─────────── */
function PhotoTips({ c }) {
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="What to send"
          eyebrowIcon="camera"
          title="Three photos. One estimate."
          sub="A scoped estimate usually comes back within an hour of receiving these."
        />
        <div className="landing-process">
          {c.photoTips.map((tip, i) => (
            <div key={i} className="step">
              <span className="num">{i + 1}</span>
              <div className="ba-frame" style={{ aspectRatio: "4 / 3", borderRadius: "var(--radius-md)", marginBottom: 14, marginTop: 4 }}>
                <span className="ba-tag">Sample</span>
                <img src={i === 1 ? "ds/photo-after.svg" : "ds/photo-before.svg"} alt="" />
              </div>
              <h4 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, margin: "4px 0 6px" }}>{tip}</h4>
            </div>
          ))}
        </div>

        <div className="card-patch" style={{ marginTop: 28, display: "grid", gridTemplateColumns: "1fr auto", gap: 18, alignItems: "center" }}>
          <div>
            <div className="t-proof">Timing</div>
            <p style={{ fontSize: 15, marginTop: 6, color: "var(--fg)" }}>{c.timing}</p>
            <div className="t-proof" style={{ marginTop: 14 }}>Pricing range</div>
            <p style={{ fontSize: 15, marginTop: 6, color: "var(--fg)" }}>{c.priceLine}</p>
          </div>
          <Button kind="action" size="lg" to="/send-photos">
            <Icon name="camera" size={18} />
            {c.primaryCta}
          </Button>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Proof strip filtered by tag ─────────── */
function LandingProof({ c }) {
  const cases = SAMPLE_PROOF.filter(p => p.category === c.proofTag).slice(0, 3);
  const fill = cases.length < 3 ? SAMPLE_PROOF.slice(0, 3 - cases.length) : [];
  const display = [...cases, ...fill];
  return (
    <section className="section section--sand">
      <div className="container">
        <SectionHead
          eyebrow="Before / after proof"
          eyebrowIcon="proof"
          title="Real Phoenix repairs we closed the loop on."
          sub="Each one ended with the same proof report we'd send you."
        />
        <div className="proof-grid">
          {display.map(p => <ProofCard key={p.jobId} data={p} />)}
        </div>
        <div style={{ textAlign: "center", marginTop: 28 }}>
          <Button kind="secondary" to="/proof">See the full proof gallery <Icon name="arrow-right" size={16} /></Button>
        </div>
      </div>
    </section>
  );
}

/* ─────────── FAQ ─────────── */
function Faqs({ c }) {
  const [open, setOpen] = useStateL(0);
  return (
    <section className="section">
      <div className="container-narrow" style={{ maxWidth: 820 }}>
        <SectionHead
          eyebrow="Common questions"
          title="What homeowners and partners ask."
        />
        <div className="faq-list">
          {c.faqs.map((f, i) => (
            <div key={f.q} className="faq-item">
              <button
                className="faq-q"
                style={{ background: "none", border: 0, width: "100%", padding: 0, cursor: "pointer", textAlign: "left" }}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <span>{f.q}</span>
                <span className="plus">{open === i ? "−" : "+"}</span>
              </button>
              {open === i && <div className="faq-a">{f.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── Related links ─────────── */
function Related({ c }) {
  return (
    <section className="section section--plaster">
      <div className="container">
        <SectionHead
          eyebrow="Related repairs"
          title="People who needed this often need these too."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 16, maxWidth: 800, margin: "0 auto" }}>
          {c.related.map(r => (
            <a
              key={r.slug}
              onClick={(e) => { e.preventDefault(); nav("/repair/" + r.slug); }}
              href={"#/repair/" + r.slug}
              className="situation-tile"
              style={{ minHeight: 110 }}
            >
              <h4>{r.title}</h4>
              <div className="meta">See details <Icon name="arrow-right" size={12} /></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── Final CTA (landing variant) ─────────── */
function LandingFinalCta({ c }) {
  return (
    <section className="section final-cta">
      <div className="container">
        <Eyebrow icon="loop" dark>Close the loop</Eyebrow>
        <h2 style={{ marginTop: 14 }}>{c.h1.replace(/\.$/, "")}.</h2>
        <p>Send the photos. We'll text you back with a clear next step — usually within the hour.</p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <Button kind="action" size="lg" to="/send-photos">
            <Icon name="camera" size={18} />
            {c.primaryCta}
          </Button>
          <Button kind="on-dark" size="lg" href="tel:6025550148">
            <Icon name="phone" size={16} />
            (602) 555‑0148
          </Button>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Page ─────────── */
function LandingPage({ slug }) {
  const c = LANDING_CONTENT[slug] || LANDING_CONTENT["post-trade"];
  return (
    <div data-screen-label={"Landing · " + c.eyebrow}>
      <LandingHero c={c} slug={slug} />
      <WhoAndCause c={c} />
      <ScopeBlock c={c} />
      <PhotoTips c={c} />
      <LandingProof c={c} />
      <Faqs c={c} />
      <Related c={c} />
      <LandingFinalCta c={c} />
    </div>
  );
}

Object.assign(window, { LandingPage, LANDING_CONTENT });
