/* global React, Icon, Button, Eyebrow, SectionHead, nav, BAFrame */
/* Patch Perfect — Trade Partner page */
const { useState: useStateP } = React;

function PartnerHero() {
  return (
    <section className="partner-hero">
      <div className="container">
        <div className="crumbs">
          <a onClick={(e) => { e.preventDefault(); nav("/"); }} href="#/">Home</a>
          &nbsp;/&nbsp; Trade partners
        </div>
        <Eyebrow icon="partner" dark>Plumbers · HVAC · Electrical · Realtors · Property managers</Eyebrow>
        <h1 style={{ marginTop: 14 }}>The first call after the wall gets opened.</h1>
        <p className="lede" style={{ marginTop: 12 }}>
          Send your customer to Patch Perfect the moment access work creates wall or
          ceiling damage. We close the loop with fast scheduling, clean repair, before/after
          photo report. Your relationship stays protected.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
          <Button kind="action" size="lg" onClick={() => document.getElementById("refer")?.scrollIntoView({ behavior: "smooth", block: "start" })}>
            <Icon name="partner" size={18} />
            Refer a Customer
          </Button>
          <Button kind="on-dark" size="lg">
            <Icon name="doc" size={18} />
            Download the one‑sheet
          </Button>
        </div>
      </div>
    </section>
  );
}

const WHY_PARTNERS = [
  { icon: "clock",        t: "We text within 5 minutes", d: "Your customer hears from us before the dust settles." },
  { icon: "proof",        t: "Before/after on every job", d: "You and your customer get the proof report, same day." },
  { icon: "loop",         t: "Partner‑safe handoff",      d: "We close the loop without competing for the original job." },
  { icon: "schedule",     t: "Deadline scheduling",       d: "Photos. Move‑in. Inspection. We build backward from your date." },
  { icon: "wall-repair",  t: "Stays in our lane",         d: "Small drywall, ceiling, texture, paint blend. That's it." },
  { icon: "chat",         t: "Status updates to you",     d: "Received → scoped → scheduled → closed. No chasing for status." },
];

function WhyPartner() {
  return (
    <section className="section section--sand">
      <div className="container">
        <SectionHead
          eyebrow="Why partners refer Patch Perfect"
          title="A specialist closer for the small repair after the big job."
          sub="Most trade and real‑estate businesses don't want to staff drywall repair, but their customers still expect the wall to look right when the work is done. That's where we come in."
        />
        <div className="partner-feature-cards" style={{ gridTemplateColumns: "repeat(3, 1fr)", display: "grid", gap: 12 }}>
          {WHY_PARTNERS.map(p => (
            <div key={p.t} className="partner-feature-card">
              <div className="ico"><Icon name={p.icon} size={20} /></div>
              <h4>{p.t}</h4>
              <p>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const HANDOFF_STEPS = [
  { num: "1", t: "Snap or text photos", d: "From the job site. Your customer's name + phone + ZIP. That's all we need." },
  { num: "2", t: "We text your customer", d: "Within 5 minutes. We confirm scope, deadline, and price range." },
  { num: "3", t: "We schedule and repair", d: "Drop‑cloth on. Dust controlled. One trip when possible." },
  { num: "4", t: "Proof goes to both of you", d: "Before/after photos, technician notes, completion timestamp." },
];

function Handoff() {
  return (
    <section className="section section--plaster">
      <div className="container">
        <SectionHead
          eyebrow="The handoff"
          title="A 60‑second referral that protects your relationship."
          sub="No partner portal to log into, no forms to teach your team. Text photos to the partner line, or use the form below. Both work."
        />
        <figure className="photo-band" style={{ aspectRatio: "21 / 9", marginBottom: 24 }}>
          <image-slot id="partner-handoff" shape="rect" fit="cover" src="photos/optional-technician-at-door.jpg" placeholder="Technician at the customer's door"></image-slot>
          <figcaption className="photo-band-cap">Your customer meets us, not a subcontractor chain.</figcaption>
        </figure>

        <div className="landing-process">
          {HANDOFF_STEPS.map(s => (
            <div key={s.num} className="step">
              <span className="num">{s.num}</span>
              <h4 style={{ fontFamily: "var(--font-display)", fontWeight: 400, textTransform: "uppercase", letterSpacing: "var(--tracking-display)", fontSize: 21, lineHeight: 1.05, margin: "6px 0 6px" }}>{s.t}</h4>
              <p style={{ fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.5 }}>{s.d}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 32, padding: 22, background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", display: "flex", gap: 18, alignItems: "center", flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, flex: 1, minWidth: 240 }}>
            <div style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--pp-blue-100)", color: "var(--pp-blue)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="chat" size={22} />
            </div>
            <div>
              <div className="t-proof">Partner text line</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 29, lineHeight: 1, color: "var(--pp-navy)", letterSpacing: "var(--tracking-display)" }}>(602) 555‑PRTN</div>
            </div>
          </div>
          <Button kind="action" href="sms:6025557786">
            <Icon name="chat" size={16} />
            Text photos now
          </Button>
        </div>
      </div>
    </section>
  );
}

function ReferralForm() {
  const [sent, setSent] = useStateP(false);
  const [form, setForm] = useStateP({
    partnerName: "", company: "", trade: "plumbing",
    customerName: "", customerPhone: "", customerZip: "",
    notes: "", deadline: "",
  });
  const set = (k, v) => setForm(s => ({ ...s, [k]: v }));
  const valid = form.partnerName && form.customerName && form.customerPhone && form.customerZip;

  if (sent) {
    return (
      <section id="refer" className="section">
        <div className="container-narrow">
          <div className="estimate-shell" style={{ textAlign: "center" }}>
            <div className="confirm-check" style={{ margin: "0 auto 16px" }}><Icon name="check" size={32} /></div>
            <h2 style={{ marginBottom: 8 }}>Referral received.</h2>
            <p style={{ color: "var(--fg-muted)", maxWidth: 460, margin: "0 auto 24px" }}>
              We'll text <b>{form.customerName}</b> within 5 minutes and update you when the loop is closed.
            </p>
            <Button kind="primary" onClick={() => setSent(false)}>Refer another customer</Button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="refer" className="section">
      <div className="container">
        <SectionHead
          eyebrow="Refer a customer"
          eyebrowIcon="partner"
          title="60‑second referral form."
          sub="Send the details, we'll handle the rest and keep you in the loop."
        />
        <div className="partner-grid">
          <div className="estimate-shell" style={{ margin: 0 }}>
            <div className="referral-form">
              <div className="full">
                <label className="field-label">Your name</label>
                <input className="input" value={form.partnerName} onChange={(e) => set("partnerName", e.target.value)} placeholder="Marcus Hall" />
              </div>
              <div>
                <label className="field-label">Company</label>
                <input className="input" value={form.company} onChange={(e) => set("company", e.target.value)} placeholder="Hall Plumbing" />
              </div>
              <div>
                <label className="field-label">Trade</label>
                <select className="select" value={form.trade} onChange={(e) => set("trade", e.target.value)}>
                  <option value="plumbing">Plumbing</option>
                  <option value="hvac">HVAC</option>
                  <option value="electrical">Electrical</option>
                  <option value="realtor">Realtor / agent</option>
                  <option value="pm">Property manager</option>
                  <option value="gc">General contractor</option>
                  <option value="other">Other</option>
                </select>
              </div>
              <div className="full" style={{ paddingTop: 6, borderTop: "1px dashed var(--border)", marginTop: 4 }}>
                <div className="t-proof" style={{ marginBottom: 6 }}>Your customer</div>
              </div>
              <div>
                <label className="field-label">Customer name</label>
                <input className="input" value={form.customerName} onChange={(e) => set("customerName", e.target.value)} placeholder="Sarah K." />
              </div>
              <div>
                <label className="field-label">Mobile</label>
                <input className="input" value={form.customerPhone} onChange={(e) => set("customerPhone", e.target.value)} placeholder="(602) 555‑0188" inputMode="tel" />
              </div>
              <div>
                <label className="field-label">ZIP code</label>
                <input className="input" value={form.customerZip} onChange={(e) => set("customerZip", e.target.value)} placeholder="85016" maxLength={5} inputMode="numeric" />
              </div>
              <div>
                <label className="field-label">Deadline <span style={{ color: "var(--fg-subtle)" }}>(optional)</span></label>
                <input className="input" value={form.deadline} onChange={(e) => set("deadline", e.target.value)} placeholder="e.g., Fri 5/30 9am" />
              </div>
              <div className="full">
                <label className="field-label">Repair notes</label>
                <textarea
                  className="textarea"
                  rows="3"
                  value={form.notes}
                  onChange={(e) => set("notes", e.target.value)}
                  placeholder="e.g., 'Cut 12-inch ceiling hole over kitchen sink to replace supply line. Knockdown texture, ivory paint.'"
                />
              </div>
            </div>

            <div className="tip-callout" style={{ marginTop: 18 }}>
              <span className="ico"><Icon name="proof" size={18} /></span>
              <span>
                <b>You'll get a proof report too.</b> Same photos. Same timestamps. Same closed‑loop confirmation.
              </span>
            </div>

            <div className="estimate-actions">
              <div className="left t-proof">We text your customer within 5 minutes</div>
              <Button kind="action" size="lg" onClick={() => valid && setSent(true)} disabled={!valid}>
                <Icon name="arrow-right" size={18} />
                Send referral
              </Button>
            </div>
          </div>

          <PartnerSafePromise />
        </div>
      </div>
    </section>
  );
}

function PartnerSafePromise() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div className="card-patch surface-blue" style={{ color: "var(--pp-wall)" }}>
        <Eyebrow icon="loop" dark>Partner‑safe promise</Eyebrow>
        <h3 style={{ color: "var(--pp-wall)", marginTop: 12, fontSize: 22 }}>We close the loop. We don't compete for your work.</h3>
        <ul className="pmu-checks" style={{ marginTop: 14, color: "var(--pp-wall)" }}>
          <li><Icon name="check-circle" size={18} style={{ color: "var(--pp-finish)" }} />We only repair small wall &amp; ceiling damage.</li>
          <li><Icon name="check-circle" size={18} style={{ color: "var(--pp-finish)" }} />We never pitch plumbing, HVAC, electrical, real estate, or PM services.</li>
          <li><Icon name="check-circle" size={18} style={{ color: "var(--pp-finish)" }} />We text you when the job is closed.</li>
          <li><Icon name="check-circle" size={18} style={{ color: "var(--pp-finish)" }} />Your customer keeps your name on the original work.</li>
        </ul>
      </div>

      <div className="card-patch">
        <div className="t-proof">Partner kit includes</div>
        <ul className="pmu-checks" style={{ marginTop: 8 }}>
          <li><Icon name="doc" size={18} />Printed one‑sheet for the truck</li>
          <li><Icon name="chat" size={18} />SMS template + partner text line</li>
          <li><Icon name="proof" size={18} />Sample proof report</li>
          <li><Icon name="estimate" size={18} />Co‑branded handoff card</li>
        </ul>
      </div>

      <div className="card-patch" style={{ background: "var(--surface-sunk)" }}>
        <div className="t-proof">Quick contact</div>
        <p style={{ fontSize: 14, color: "var(--fg-muted)", marginTop: 8, lineHeight: 1.55 }}>
          Marcus Hall, partner team<br/>
          <b style={{ color: "var(--pp-blue)" }}>partners@patchperfect.co</b><br/>
          (602) 555‑PRTN · Mon–Fri · 7a–6p
        </p>
      </div>
    </div>
  );
}

/* ─────────── Page ─────────── */
function PartnersPage() {
  return (
    <div>
      <PartnerHero />
      <WhyPartner />
      <Handoff />
      <ReferralForm />
    </div>
  );
}

Object.assign(window, { PartnersPage });