/* Tidewell — full pages (catalog, detail, about, applications, contact) */

const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;

/* ─────────────────────────────────────────────
   CATALOG PAGE — /products
   ───────────────────────────────────────────── */
function CatalogPage({ region }) {
  const [filter, setFilter] = useStateP("All");
  const cats = ["All", ...Array.from(new Set(window.PRODUCTS.map(p => p.category)))];
  const list = filter === "All" ? window.PRODUCTS : window.PRODUCTS.filter(p => p.category === filter);

  return (
    <div data-screen-label="02 Products — Catalog">
      <section className="page-hero">
        <div className="container">
          <div className="crumb">
            <a href="#/">Tidewell</a>
            <span>/</span>
            <span>Products</span>
          </div>
          <h1>The full <em>catalog</em>.</h1>
          <div className="page-hero-grid">
            <p className="page-hero-lead">
              Ten product lines, one ecosystem. Each Tidewell product is engineered to work together — common controller bus, common plumbing dimensions, common warranty desk. Filter by category to narrow in, or browse the whole range.
            </p>
            <div className="page-hero-meta">
              <span>Products</span><span>10 SKU families</span>
              <span>Catalog</span><span>2026 Edition</span>
              <span>Region</span><span>{window.REGION_DATA[region].label}</span>
              <span>Currency</span><span>{window.REGION_DATA[region].currency}</span>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "0 0 80px" }}>
        <div className="container">
          <div className="catalog-filters">
            <span className="label">Filter</span>
            {cats.map(c => (
              <button
                key={c}
                className={"chip" + (filter === c ? " active" : "")}
                onClick={() => setFilter(c)}
              >{c}</button>
            ))}
            <span className="count">Showing {list.length} of {window.PRODUCTS.length}</span>
          </div>

          <div className="product-grid" style={{ marginTop: 0, borderTop: 0 }}>
            {list.map(p => (
              <window.ProductCard key={p.slug} p={p} region={region} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ─────────────────────────────────────────────
   PRODUCT DETAIL — /products/:slug
   ───────────────────────────────────────────── */
function ProductDetailPage({ slug, region }) {
  const p = window.PRODUCTS.find(x => x.slug === slug);
  const [thumb, setThumb] = useStateP(0);

  if (!p) {
    return (
      <section className="page-hero">
        <div className="container">
          <h1 className="display">Not found.</h1>
          <p style={{ marginTop: 24 }}>That product slug doesn't exist. <a href="#/products" style={{ textDecoration: "underline" }}>Back to catalog</a>.</p>
        </div>
      </section>
    );
  }

  const r = window.REGION_DATA[region];
  const related = window.PRODUCTS.filter(x => x.slug !== p.slug && (x.category === p.category || x.featured)).slice(0, 3);

  return (
    <div data-screen-label={`03 Product — ${p.name}`}>
      <section className="pd-top">
        <div className="container">
          <div className="crumb">
            <a href="#/">Tidewell</a>
            <span>/</span>
            <a href="#/products">Products</a>
            <span>/</span>
            <a href={"#/products?cat=" + encodeURIComponent(p.category)}>{p.category}</a>
            <span>/</span>
            <span>{p.name}</span>
          </div>

          <div className="pd-grid">
            <div className="pd-gallery">
              <div className="pd-main-img">
                <img src={p.image} alt={p.name} />
                <span className="tag">{p.n} / 10 · {p.category}</span>
                <div className="caption">Studio photography · {p.short}</div>
              </div>
              <div className="pd-thumbs">
                {[0, 1, 2, 3].map(i => (
                  <div
                    key={i}
                    className={"pd-thumb alt-" + i + (thumb === i ? " active" : "")}
                    onClick={() => setThumb(i)}
                  >
                    <img src={p.image} alt="" />
                  </div>
                ))}
              </div>
            </div>

            <div className="pd-info">
              <div className="eyebrow">{p.n} / 10  ·  {p.category}</div>
              <h1>{p.name}</h1>
              <p className="lead">{p.long || p.desc}</p>

              <div className="pd-price-row">
                <div>
                  <span className="pd-price">
                    <span className="from">From</span>
                    {window.formatPrice(p.priceUSD, region)}
                    <span className="ccy">{r.currency}</span>
                  </span>
                </div>
                <div className="pd-stock">
                  <span className="dot"></span>
                  In stock · Ships in 5 days
                </div>
              </div>

              <div className="pd-actions">
                <a className="btn" href="#/contact">Request a quote<span className="arr"></span></a>
                <a className="btn btn-ghost" href="#/contact">Find an installer</a>
                <a className="btn btn-ghost" href="#/">Download spec sheet</a>
              </div>

              {p.specs && (
                <div className="pd-specs">
                  <h3>Specifications</h3>
                  <dl>
                    {p.specs.map(([k, v]) => (
                      <div className="spec" key={k}>
                        <dt>{k}</dt>
                        <dd>{v}</dd>
                      </div>
                    ))}
                  </dl>
                </div>
              )}

              {p.bom && (
                <div className="pd-bom">
                  <h3>What's in the box</h3>
                  <ul>
                    {p.bom.map(b => <li key={b}>{b}</li>)}
                  </ul>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      <section className="section pd-related">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Also in this ecosystem</div>
              <h2 className="display">Pair it with.</h2>
            </div>
            <p>Tidewell products share a common controller bus and plumbing dimensions. These pair cleanly with {p.name}.</p>
          </div>
          <div className="pd-related-grid">
            {related.map(rp => (
              <window.ProductCard key={rp.slug} p={rp} region={region} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ─────────────────────────────────────────────
   APPLICATIONS — /applications
   ───────────────────────────────────────────── */
function ApplicationsPage() {
  const apps = [
    ...window.APPLICATIONS,
    { name: "Lakeshore Spa Retreat", loc: "Niagara, ON", year: "2024", type: "Indoor 12 m Lap", equipment: "Heat Pump · Salt · Auto Cover" },
    { name: "Bay Area Hillside", loc: "Mill Valley, CA", year: "2025", type: "Custom Infinity", equipment: "Solar · Lights · Robotic" },
    { name: "Texas Hill Country", loc: "Austin, TX", year: "2024", type: "Freeform Gunite", equipment: "VS Pump · Salt · Robotic" }
  ];
  return (
    <div data-screen-label="04 Applications">
      <section className="page-hero">
        <div className="container">
          <div className="crumb">
            <a href="#/">Tidewell</a>
            <span>/</span>
            <span>Applications</span>
          </div>
          <h1>Pools we've <em>shipped</em>.</h1>
          <div className="page-hero-grid">
            <p className="page-hero-lead">
              From Muskoka cottages to Scottsdale rooftops — a working portfolio of Tidewell installations across North America. Every project documents climate, scale, and the equipment loadout that fit it.
            </p>
            <div className="page-hero-meta">
              <span>Installs</span><span>42,180 lifetime</span>
              <span>Climates</span><span>Zone 1 — Zone 10</span>
              <span>Pool types</span><span>Gunite · Vinyl · Fiberglass</span>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ borderTop: 0 }}>
        <div className="container">
          <div className="app-grid">
            {apps.map((a, i) => (
              <article key={a.name} className="app-card">
                <div className={"app-img var-" + ((i % 4) + 1)}>
                  <span className="loc">{a.loc}</span>
                  <span className="ph">Install photo</span>
                </div>
                <h3>{a.name}</h3>
                <div className="meta">
                  <span>{a.year}</span>
                  <span>{a.type}</span>
                </div>
                <div className="meta" style={{ color: "var(--ink-2)" }}>
                  <span>{a.equipment}</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ─────────────────────────────────────────────
   ABOUT — /about
   ───────────────────────────────────────────── */
function AboutPage({ region }) {
  return (
    <div data-screen-label="05 About">
      <section className="page-hero">
        <div className="container">
          <div className="crumb">
            <a href="#/">Tidewell</a>
            <span>/</span>
            <span>About</span>
          </div>
          <h1>Pool equipment,<br /><em>quietly</em> obsessive.</h1>
        </div>
      </section>

      <section className="section" style={{ borderTop: 0 }}>
        <div className="container">

          <div className="story">
            <div>
              <div className="eyebrow">01 / The company</div>
              <h2>A factory <em>and</em><br />a design studio.</h2>
            </div>
            <div className="story-body">
              <p><strong>Tidewell makes pool equipment for the homes of the North American continent.</strong> Founded in 2008 with a single product — a tracked automatic cover engineered for −30 °C winters — we now manufacture ten product lines across covers, heating, sanitation, filtration, lighting, and plumbing.</p>
              <p>Our team works between two studios: industrial design and motor engineering in Toronto, performance testing and warranty support in Phoenix. Every SKU is designed, tested, and shipped from North America. We sell direct to dealers, and dealer-fitted to homeowners — never through anonymous marketplaces.</p>
              <p>What you'll notice is the things you don't. The motor that whines is replaced before it ships. The fitting that loses 0.2 PSI to turbulence is redrawn. The cover that wrinkles at 8 °F gets a different fabric. <strong>The pool equipment you ignore is the equipment that's working.</strong></p>
            </div>
          </div>

          <dl className="stats">
            <div className="stat">
              <dt>Established</dt>
              <dd>2008</dd>
            </div>
            <div className="stat">
              <dt>Product lines</dt>
              <dd>10</dd>
            </div>
            <div className="stat">
              <dt>Pools shipped</dt>
              <dd>42,180</dd>
            </div>
            <div className="stat">
              <dt>Warranty</dt>
              <dd>10<span className="unit">yr</span></dd>
            </div>
          </dl>

          <div className="story">
            <div>
              <div className="eyebrow">02 / How we build</div>
              <h2>Designed for the <em>climate</em><br />you actually have.</h2>
            </div>
            <div className="story-body">
              <p>Pool equipment built for Florida tends to fall apart in Calgary. Pool equipment built for Calgary tends to overheat in Phoenix. Tidewell builds for both — and the seven climate zones in between.</p>
              <p>Every Tidewell SKU carries a climate envelope. Our heat pumps operate down to 40 °F, but freeze-protect down to −40 °F. Our solar collectors are UV-stable in Arizona and snow-load tested for Ontario. Our covers retract reliably at 8 °F.</p>
              <p>And every wired product carries dual <strong>UL and CSA listings</strong>, so the same SKU passes inspection in either country.</p>
            </div>
          </div>

          <div className="story">
            <div>
              <div className="eyebrow">03 / Service</div>
              <h2>One <em>warranty desk</em>.<br />Real people answer.</h2>
            </div>
            <div className="story-body">
              <p>Tidewell publishes its warranty phone number on the back of every SKU label. Call it and a human answers within two rings, Monday through Saturday. We staff it from Phoenix for the US, Mississauga for Canada.</p>
              <p>If something fails inside the warranty window, we ship a replacement before we ask any diagnostic questions. It is, statistically, almost never your fault.</p>
            </div>
          </div>

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

/* ─────────────────────────────────────────────
   CONTACT — /contact
   ───────────────────────────────────────────── */
function ContactPage({ region, setRegion }) {
  const r = window.REGION_DATA[region];
  const [sent, setSent] = useStateP(false);

  return (
    <div data-screen-label="06 Contact">
      <section className="page-hero">
        <div className="container">
          <div className="crumb">
            <a href="#/">Tidewell</a>
            <span>/</span>
            <span>Contact</span>
          </div>
          <h1>Let's <em>build</em> something.</h1>
          <p className="page-hero-lead" style={{ marginTop: 28 }}>
            Tell us about your pool. We'll come back within one business day with a quote in {r.currency}, a recommended equipment loadout for your climate, and the nearest licensed Tidewell installer.
          </p>
        </div>
      </section>

      <section className="section" style={{ borderTop: 0 }}>
        <div className="container">
          <div className="contact-grid">

            <div>
              <div className="contact-card" style={{ marginBottom: 20 }}>
                <h4>{r.flag} {r.label} office</h4>
                <div className="row">
                  <div className="k">Sales</div>
                  <div>{r.phone}<br /><span style={{ color: "var(--ink-3)", fontSize: 12 }}>{r.phoneLabel} · 8 AM – 7 PM local</span></div>
                </div>
                <div className="row">
                  <div className="k">Warranty</div>
                  <div>warranty@tidewell.{region === "CA" ? "ca" : "com"}<br /><span style={{ color: "var(--ink-3)", fontSize: 12 }}>One business day response, guaranteed</span></div>
                </div>
                <div className="row">
                  <div className="k">Address</div>
                  <div>{r.address}</div>
                </div>
                <div className="row">
                  <div className="k">Hours</div>
                  <div>Mon–Sat · 8 AM – 7 PM local</div>
                </div>
              </div>

              <div className="contact-card">
                <h4>Wrong country?</h4>
                <p style={{ margin: "0 0 16px", color: "var(--ink-2)", fontSize: 14 }}>
                  Tidewell ships to both the United States and Canada. Switch regions to see prices in your currency and find your nearest hub.
                </p>
                <div className="region-toggle" style={{ background: "var(--bg)" }}>
                  <button className={region === "US" ? "active" : ""} onClick={() => setRegion("US")}>🇺🇸 United States</button>
                  <button className={region === "CA" ? "active" : ""} onClick={() => setRegion("CA")}>🇨🇦 Canada</button>
                </div>
              </div>
            </div>

            <div>
              {sent ? (
                <div className="contact-card" style={{ textAlign: "center", padding: 56 }}>
                  <div className="eyebrow" style={{ marginBottom: 18 }}>Thank you</div>
                  <h4 style={{ fontSize: 44, lineHeight: 1, marginBottom: 16 }}>
                    Quote requested.
                  </h4>
                  <p style={{ color: "var(--ink-2)", maxWidth: "34ch", margin: "0 auto 28px" }}>
                    A Tidewell sales engineer will reach you within one business day. In the meantime, browse the catalog.
                  </p>
                  <a href="#/products" className="btn">Browse catalog<span className="arr"></span></a>
                </div>
              ) : (
                <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  <div className="row-2">
                    <div className="field">
                      <label>Full name</label>
                      <input type="text" required defaultValue="" placeholder="Alex Morgan" />
                    </div>
                    <div className="field">
                      <label>Email</label>
                      <input type="email" required placeholder="alex@example.com" />
                    </div>
                  </div>
                  <div className="row-2">
                    <div className="field">
                      <label>Phone</label>
                      <input type="tel" placeholder={r.phone} />
                    </div>
                    <div className="field">
                      <label>I am a</label>
                      <select defaultValue="Homeowner">
                        <option>Homeowner</option>
                        <option>Pool builder / dealer</option>
                        <option>Architect / spec writer</option>
                        <option>Property manager</option>
                      </select>
                    </div>
                  </div>
                  <div className="row-2">
                    <div className="field">
                      <label>Region</label>
                      <select value={region} onChange={e => setRegion(e.target.value)}>
                        <option value="US">🇺🇸 United States</option>
                        <option value="CA">🇨🇦 Canada</option>
                      </select>
                    </div>
                    <div className="field">
                      <label>City / ZIP or postal</label>
                      <input type="text" placeholder={region === "CA" ? "Toronto, M5V 3L9" : "Phoenix, 85020"} />
                    </div>
                  </div>
                  <div className="field">
                    <label>Tell us about your pool</label>
                    <textarea placeholder="20 × 40 ft gunite, existing pool, looking to add automatic cover + inverter heat pump…" />
                  </div>
                  <div style={{ marginTop: 12 }}>
                    <button type="submit" className="btn">
                      Send my quote request
                      <span className="arr"></span>
                    </button>
                  </div>
                </form>
              )}
            </div>

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

window.CatalogPage = CatalogPage;
window.ProductDetailPage = ProductDetailPage;
window.ApplicationsPage = ApplicationsPage;
window.AboutPage = AboutPage;
window.ContactPage = ContactPage;