/* global React, BeforeAfter */
const { useState } = React;

/* ---------- Differentiators (per-photo + instant) ---------- */
function Differentiators() {
  return (
    <section className="diff">
      <div className="diff-inner">
        <div className="diff-head diff-head-center">
          <div className="eyebrow">What makes us different</div>
          <h2 className="h2">Two things every other service gets wrong.</h2>
        </div>
        <div className="diff-grid">
          <PricingVisualCard />
          <SpeedVisualCard />
        </div>
      </div>
    </section>
  );
}

function PricingVisualCard() {
  return (
    <article className="diff-card diff-card-viz">
      <div className="diff-viz diff-viz-receipt">
        <div className="receipt receipt-them">
          <div className="receipt-head">
            <span className="receipt-brand">Acme Photo Pkg.</span>
            <span className="receipt-num">#4421</span>
          </div>
          <div className="receipt-lines">
            <div className="receipt-line"><span>Listing package · 30 photos</span><span>$149</span></div>
            <div className="receipt-line strike"><span>Photos used</span><span>8 / 30</span></div>
            <div className="receipt-line strike"><span>Photos wasted</span><span>22</span></div>
          </div>
          <div className="receipt-total"><span>You paid</span><span>$149</span></div>
          <div className="receipt-stamp">OVER-PAID</div>
        </div>
        <div className="receipt receipt-us">
          <div className="receipt-head">
            <span className="receipt-brand">PixFixCo</span>
            <span className="receipt-num">· per photo</span>
          </div>
          <div className="receipt-lines">
            <div className="receipt-line"><span>Kitchen</span><span>$7</span></div>
            <div className="receipt-line"><span>Living room</span><span>$7</span></div>
            <div className="receipt-line"><span>Bath</span><span>$7</span></div>
            <div className="receipt-line receipt-line-dim"><span>…</span><span></span></div>
            <div className="receipt-line"><span>8 photos</span><span>$56</span></div>
          </div>
          <div className="receipt-total receipt-total-us"><span>You paid</span><span>$56</span></div>
        </div>
      </div>
      <div className="diff-body">
        <div className="diff-unit">Per photo · not per package</div>
        <h3 className="diff-t">Pay for the photos you need fixed.</h3>
        <p className="diff-d">
          Everyone else sells “listing packages” priced for 30 photos you don’t all need. We charge a flat $7 a photo, batch as many as you want, and you keep what you don’t spend.
        </p>
      </div>
    </article>
  );
}

function SpeedVisualCard() {
  return (
    <article className="diff-card diff-card-viz">
      <div className="diff-viz diff-viz-time">
        <div className="time-row time-row-them">
          <div className="time-lbl">
            <span className="time-lbl-name">Typical service</span>
            <span className="time-lbl-val">24–48 hours</span>
          </div>
          <div className="time-bar time-bar-them">
            <div className="time-bar-fill" />
            <div className="time-ticks">
              <span>Mon 9am</span>
              <span>Tue</span>
              <span>Wed 9am</span>
            </div>
          </div>
          <div className="time-note">⚠ open house Wed</div>
        </div>
        <div className="time-row time-row-us">
          <div className="time-lbl">
            <span className="time-lbl-name">PixFixCo</span>
            <span className="time-lbl-val">~22 seconds</span>
          </div>
          <div className="time-bar time-bar-us">
            <div className="time-dot" />
            <div className="time-dot-label">22s</div>
          </div>
          <div className="time-note time-note-us">✓ done before coffee</div>
        </div>
      </div>
      <div className="diff-body">
        <div className="diff-unit">Instant · no editor queue</div>
        <h3 className="diff-t">Back before you finish your coffee.</h3>
        <p className="diff-d">
          Everyone else routes your photos through a human retoucher in another time zone. You upload Monday and pray they’re back before Wednesday’s open house. Ours come back in about 22 seconds.
        </p>
      </div>
    </article>
  );
}

/* ---------- How it works ---------- */
function HowItWorks() {
  const steps = [
    { n: "01", t: "Snap it rough", d: "Phone photos are fine. Dim, wide, crooked — we've seen worse.", icon: IconCamera },
    { n: "02", t: "We fix it", d: "Lighting balanced, colors trued, clutter softened, windows un-blown.", icon: IconSparkle },
    { n: "03", t: "List it proud", d: "Download listing-ready JPGs. MLS-sized, no watermarks, yours forever.", icon: IconHome },
  ];
  return (
    <section id="how" className="section">
      <div className="section-head">
        <div className="eyebrow">How it works</div>
        <h2 className="h2">Three steps. About the time it takes to make coffee.</h2>
        <a className="section-more" href="how-it-works.html">See the full breakdown <span aria-hidden="true">→</span></a>
      </div>
      <div className="how-grid">
        {steps.map((s) => (
          <div key={s.n} className="how-card">
            <div className="how-n">{s.n}</div>
            <div className="how-icon"><s.icon/></div>
            <h3 className="how-t">{s.t}</h3>
            <p className="how-d">{s.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- Sample gallery ---------- */
function Gallery() {
  const items = [
    { label: "Kitchen", note: "Yellow cast → daylight white balance" },
    { label: "Living room", note: "Blown windows recovered" },
    { label: "Primary bedroom", note: "Dim corners lifted" },
    { label: "Bath", note: "Color + clarity" },
    { label: "Twilight exterior", note: "Sky swap + glow" },
    { label: "Backyard", note: "Grass + sky rebalanced" },
  ];
  const [active, setActive] = useState(0);
  return (
    <section id="gallery" className="section">
      <div className="section-head section-head-split">
        <div>
          <div className="eyebrow">Sample gallery</div>
          <h2 className="h2">Real rooms. Real pixels. Drag to compare.</h2>
          <a className="section-more" href="gallery.html">See the full gallery <span aria-hidden="true">→</span></a>
        </div>
        <p className="section-lede">Every photo here started as something an agent would quietly ask you to reshoot. We fixed them in about 20 seconds each.</p>
      </div>

      <div className="gal-tabs" role="tablist" aria-label="Sample rooms">
        {items.map((it, i) => (
          <button
            key={i}
            role="tab"
            aria-selected={active === i}
            className={`gal-tab ${active === i ? "is-active" : ""}`}
            onClick={() => setActive(i)}
          >
            <span className="gal-tab-n">{String(i + 1).padStart(2, "0")}</span>
            <span className="gal-tab-label">{it.label}</span>
          </button>
        ))}
      </div>

      <div className="gal-featured">
        <BeforeAfter
          beforeLabel="BEFORE"
          afterLabel="PIXFIXCO"
          beforeNote={items[active].label + " · raw phone photo"}
          afterNote={items[active].note}
          aspect="16 / 9"
        />
        <div className="gal-caption">
          <span className="mono">Now viewing →</span>
          <strong>{items[active].label}</strong>
          <span className="gal-caption-note">{items[active].note}</span>
        </div>
      </div>
    </section>
  );
}

/* ---------- Pricing ---------- */
function Pricing({ onAgentClick }) {
  return (
    <section id="pricing" className="section">
      <div className="section-head">
        <div className="eyebrow">Pricing</div>
        <h2 className="h2">Per photo. No packages. No waiting for an editor.</h2>
        <p className="section-lede" style={{ marginTop: 8 }}>
          Other services charge you for a "listing package" you won't fully use and take 24–48 hours. We charge $7 a photo and return it in about 22 seconds.
        </p>
        <a className="section-more" href="pricing.html">Full pricing details <span aria-hidden="true">→</span></a>
      </div>
      <div className="price-solo">
        <div className="price-card is-hl">
          <div className="price-head">
            <div className="price-name">Per photo</div>
            <div className="price-tag">Most pick this</div>
          </div>
          <div className="price-amt">
            <span className="price-n">$7</span>
            <span className="price-u">/ photo</span>
          </div>
          <ul className="price-feats">
            <li><span className="price-check" aria-hidden="true">✓</span>No packages, no minimums</li>
            <li><span className="price-check" aria-hidden="true">✓</span>Batch upload a whole listing</li>
            <li><span className="price-check" aria-hidden="true">✓</span>Delivered in ~22 seconds</li>
            <li><span className="price-check" aria-hidden="true">✓</span>No watermark, MLS-sized JPG</li>
            <li><span className="price-check" aria-hidden="true">✓</span>Try one photo free, then commit to a batch</li>
          </ul>
          <a className="btn btn-primary price-cta" href="#try">Fix a photo</a>
        </div>
      </div>
    </section>
  );
}

/* ---------- Agent / reseller block ---------- */
function AgentBlock({ onAgentClick }) {
  return (
    <section id="agents" className="agent-block">
      <div className="agent-inner">
        <div className="agent-copy">
          <div className="eyebrow">For flat-fee MLS & discount brokerages</div>
          <h2 className="h2 agent-h">Add instant photo editing to every listing package.</h2>
          <p className="agent-p">
            Your clients shoot with their phones. You hand back listing-ready photos under your brand — no editor to hire, no turnaround to manage.
          </p>
          <ul className="agent-feats">
            <li><span className="agent-bullet">01</span><div><b>White-label.</b> Your logo, your domain, your workflow.</div></li>
            <li><span className="agent-bullet">02</span><div><b>Client dashboard.</b> Invite sellers, track usage, bill once.</div></li>
            <li><span className="agent-bullet">03</span><div><b>Co-marketing kit.</b> Listing flyers, social templates, MLS copy.</div></li>
            <li><span className="agent-bullet">04</span><div><b>We stay invisible.</b> No PixFixCo email, no PixFixCo watermark.</div></li>
          </ul>
          <div className="agent-ctas">
            <button className="btn btn-primary btn-lg" onClick={onAgentClick}>Become a reseller</button>
            <a className="btn btn-ghost btn-lg" href="mailto:support@pixfixco.com">support@pixfixco.com</a>
          </div>
        </div>
        <aside className="agent-card">
          <div className="agent-card-head">
            <span className="mono">YOURBRAND.com / photos</span>
            <span className="agent-card-pill">Powered by PixFixCo</span>
          </div>
          <div className="agent-card-body">
            <div className="wl-row">
              <div className="wl-thumb wl-thumb-1"><span className="wl-thumb-tag">BEFORE</span></div>
              <div className="wl-arrow">→</div>
              <div className="wl-thumb wl-thumb-1 wl-thumb-after"><span className="wl-thumb-tag wl-thumb-tag-after">YOURBRAND</span></div>
            </div>
            <div className="wl-row">
              <div className="wl-thumb wl-thumb-2"><span className="wl-thumb-tag">BEFORE</span></div>
              <div className="wl-arrow">→</div>
              <div className="wl-thumb wl-thumb-2 wl-thumb-after"><span className="wl-thumb-tag wl-thumb-tag-after">YOURBRAND</span></div>
            </div>
            <div className="wl-row">
              <div className="wl-thumb wl-thumb-3"><span className="wl-thumb-tag">BEFORE</span></div>
              <div className="wl-arrow">→</div>
              <div className="wl-thumb wl-thumb-3 wl-thumb-after"><span className="wl-thumb-tag wl-thumb-tag-after">YOURBRAND</span></div>
            </div>
            <div className="agent-card-foot">
              Your brand on every delivery. Your client dashboard. Our infrastructure quietly doing the work behind the scenes.
            </div>
          </div>
        </aside>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const qs = [
    { q: "How long does it actually take?", a: "About 22 seconds per photo — no human editor in the loop. A full 30-photo listing finishes before you're done uploading the next one. No queue, no turnaround email the next morning." },,
    { q: "Why per-photo and not a package?", a: "Because you shouldn't pay for 30 photos when you only need 8 fixed. Other services force you into $50–$150 listing packages. We charge $7 a photo — fix one, fix thirty, pay for what you use." },,
    { q: "Will it make my house look fake?", a: "No. We tune lighting, color, and clarity — the stuff a pro photographer would get right with better gear. No adding pools, no removing the neighbor's car. (Though we can do sky swaps on twilight exteriors if you want.)" },,
    { q: "Does it work on phone photos?", a: "That's the whole point. Shoot with your phone, hold it level-ish, and we do the rest." },
    { q: "Can I see it work before I pay?", a: "Yes. The free single-photo demo at the top of this page returns a watermarked preview on your actual photo. If the model handles your style, batch the rest. If not, you've spent nothing." },
    { q: "Can my agent offer this to clients?", a: "Yes. Flat-fee MLS and discount-brokerage agents resell PixFixCo under their own brand. Your clients upload, you look like a hero, we stay in the back." },
    { q: "Do you store my photos?", a: "Originals are never stored — they pass through our pipeline and aren't kept. Enhanced versions auto-delete after 14 days. We don't use your photos to train anything." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="section">
      <div className="section-head section-head-center">
        <div className="eyebrow">FAQ</div>
        <h2 className="h2">Fair questions. Honest answers.</h2>
        <a className="section-more" href="faq.html">See every question we get <span aria-hidden="true">→</span></a>
      </div>
      <div className="faq-list">
        {qs.map((item, i) => (
          <div key={i} className={`faq-item ${open === i ? "is-open" : ""}`}>
            <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
              <span>{item.q}</span>
              <span className="faq-plus" aria-hidden="true">{open === i ? "–" : "+"}</span>
            </button>
            <div className="faq-a-wrap">
              <p className="faq-a">{item.a}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- Footer CTA ---------- */
function FooterCTA({ onAgentClick }) {
  return (
    <section id="footer-cta" className="section footer-cta">
      <div className="fcta-inner">
        <div className="eyebrow eyebrow-inv">Ready when you are</div>
        <h2 className="h1 fcta-h">
          Make the photo match the price.
        </h2>
        <div className="fcta-actions">
          <a className="btn btn-primary btn-lg" href="#try">Fix a photo free</a>
          <button className="btn btn-ghost-inv btn-lg" onClick={onAgentClick}>I'm an agent →</button>
        </div>
      </div>
      <footer className="foot">
        <div className="foot-l">
          <LogoMark/>
          <span>© 2026 PixFixCo</span>
        </div>
        <nav className="foot-nav">
          <a href="#how">How it works</a>
          <a href="#gallery">Gallery</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
        </nav>
        <div className="foot-r"><span className="mono">v1.0 · made for FSBO</span></div>
      </footer>
    </section>
  );
}

/* ---------- Paywall modal ---------- */
function PaywallModal({ open, onClose }) {
  if (!open) return null;
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <button className="modal-x" onClick={onClose} aria-label="Close">×</button>
        <div className="eyebrow">Batch upload · Pro</div>
        <h3 className="modal-h">Fix a whole listing at once.</h3>
        <p className="modal-p">Upload up to 30 photos, get them all back listing-ready — no watermarks, MLS-sized, your presets remembered. $49 per listing, or free when your agent's included it.</p>
        <div className="modal-feats">
          <div className="mf"><span className="price-check">✓</span> 30 photos / listing</div>
          <div className="mf"><span className="price-check">✓</span> No watermark</div>
          <div className="mf"><span className="price-check">✓</span> Twilight exterior</div>
          <div className="mf"><span className="price-check">✓</span> 48-hr support</div>
        </div>
        <div className="modal-actions">
          <button className="btn btn-ghost" onClick={onClose}>Not now</button>
          <button className="btn btn-primary">Unlock batch · $49</button>
        </div>
        <p className="modal-foot">Using a flat-fee MLS agent? Ask if they've included PixFixCo — half already do.</p>
      </div>
    </div>
  );
}

/* ---------- Icons ---------- */
function IconCamera() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      <path d="M4 8H7L9 5H15L17 8H20C20.5523 8 21 8.44772 21 9V18C21 18.5523 20.5523 19 20 19H4C3.44772 19 3 18.5523 3 18V9C3 8.44772 3.44772 8 4 8Z" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="12" cy="13" r="3.5" stroke="currentColor" strokeWidth="1.4"/>
    </svg>
  );
}
function IconSparkle() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      <path d="M12 3V9M12 15V21M3 12H9M15 12H21M5.5 5.5L8 8M16 16L18.5 18.5M5.5 18.5L8 16M16 8L18.5 5.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  );
}
function IconHome() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      <path d="M3 11L12 4L21 11V20C21 20.5523 20.5523 21 20 21H15V14H9V21H4C3.44772 21 3 20.5523 3 20V11Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
    </svg>
  );
}

function LogoMark() {
  return (
    <span className="logo">
      <span className="logo-mark" aria-hidden="true">
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
          <rect x="1.5" y="1.5" width="19" height="19" rx="5" stroke="currentColor" strokeWidth="1.3"/>
          <path d="M6 14L9.5 10L12 12.5L16 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          <circle cx="15" cy="7" r="1.4" fill="currentColor"/>
        </svg>
      </span>
      <span className="logo-word">PixFix<span className="logo-word-dim">Co</span></span>
    </span>
  );
}

Object.assign(window, { Differentiators, HowItWorks, Gallery, Pricing, FAQ, FooterCTA, AgentBlock, PaywallModal, LogoMark });