/* ProductPage — the detail page for /products/<slug>.
 * Reads its data from window.getProduct(slug); each /products/<slug>.html
 * passes its own slug via a global `window.__PRODUCT_SLUG__`.
 */

function ProductHero({ p }) {
  const tone = p.color === "ink" ? "ink" : p.color === "accent" ? "accent" : "paper";
  return (
    <section className={`pp-hero pp-tone-${tone}`}>
      <div className="wrap">
        <a href="/products" className="pp-back">
          <span aria-hidden="true">←</span> All products
        </a>
        <div className="pp-hero-grid">
          <div>
            <div className="pp-eyebrow">
              <span className="pp-eyebrow-dot" />
              {p.eyebrow}
            </div>
            <h1 className="pp-title">{p.title}</h1>
            <p className="pp-sub">{p.sub}</p>
            <div className="pp-cta-row">
              <a href="/#contact" className="btn primary">Book a free consultation <Ic.arrow size={14} /></a>
              <a href="#how-it-works" className="btn ghost">How we build it</a>
            </div>
          </div>
          <div className="pp-hero-glyph" aria-hidden="true">
            <div className="pp-hero-glyph-inner">
              {Ic[p.icon] ? Ic[p.icon]({ size: 64 }) : Ic.sparkle({ size: 64 })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProductCapabilities({ p }) {
  return (
    <section className="pp-block">
      <div className="wrap">
        <div className="sec-head">
          <h2>What it does — <span className="serif">in detail</span>.</h2>
          <p>Capabilities that ship in the standard build. Anything custom is a conversation.</p>
        </div>
        <div className="pp-cap-grid">
          {p.capabilities.map((c, i) => (
            <div key={i} className="pp-cap">
              <div className="pp-cap-check"><Ic.check size={14} /></div>
              <div className="pp-cap-title">{c.title}</div>
              <div className="pp-cap-body">{c.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProductHowItWorks({ p }) {
  return (
    <section id="how-it-works" className="pp-block pp-tone-paper-2">
      <div className="wrap">
        <div className="sec-head">
          <h2>How we build it — <span className="serif">in four moves</span>.</h2>
          <p>Same shape every time. We tune the depth to your business.</p>
        </div>
        <div className="pp-steps">
          {p.howItWorks.map((s, i) => (
            <div key={i} className="pp-step">
              <div className="pp-step-num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProductEvidence({ p }) {
  return (
    <section className="pp-block">
      <div className="wrap">
        <div className="pp-evidence">
          <div className="pp-evidence-tag">{p.evidence.label}</div>
          <h3 className="pp-evidence-headline">{p.evidence.headline}</h3>
          <ul className="pp-evidence-points">
            {p.evidence.points.map((pt, i) => (
              <li key={i}>
                <span className="pp-evidence-bullet"><Ic.check size={12} /></span>
                {pt}
              </li>
            ))}
          </ul>
          <div className="pp-tech-row">
            {p.tech.map(t => <span key={t} className="pp-tech-chip">{t}</span>)}
          </div>
        </div>
      </div>
    </section>
  );
}

function ProductRelated({ p }) {
  const related = (p.related || [])
    .map(slug => window.getProduct(slug))
    .filter(Boolean);
  if (related.length === 0) return null;
  return (
    <section className="pp-block pp-tone-paper-2">
      <div className="wrap">
        <div className="sec-head">
          <h2>Pairs well with — <span className="serif">these</span>.</h2>
          <p>The reason it works is the rest of the stack. Most clients run two or three together.</p>
        </div>
        <div className="pp-related">
          {related.map(r => (
            <a key={r.slug} href={`/products/${r.slug}`} className="pp-related-card">
              <div className="pp-related-icon">
                {Ic[r.icon] ? Ic[r.icon]({ size: 22 }) : Ic.sparkle({ size: 22 })}
              </div>
              <div className="pp-related-name">{r.name}</div>
              <div className="pp-related-sub">{r.eyebrow}</div>
              <div className="pp-related-arrow"><Ic.arrow size={14} /></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProductCTA() {
  return (
    <section className="pp-block">
      <div className="wrap">
        <div className="pp-cta-card">
          <div>
            <div className="pp-eyebrow"><span className="pp-eyebrow-dot" /> Let's talk</div>
            <h2 className="pp-cta-title">Want this for your business?</h2>
            <p className="pp-cta-sub">30-minute discovery call. We'll tell you honestly whether this is the right next move.</p>
          </div>
          <div className="pp-cta-actions">
            <a href="/#contact" className="btn primary">Book a free consultation <Ic.arrow size={14} /></a>
            <a href="https://wa.me/918873002702" className="btn ghost" target="_blank" rel="noreferrer">
              <Ic.waLogo size={16} /> WhatsApp us
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProductPage({ slug }) {
  const p = window.getProduct(slug);
  if (!p) {
    return (
      <section className="pp-block">
        <div className="wrap">
          <h1>Product not found</h1>
          <p>That product page doesn't exist. <a href="/products">See all products</a>.</p>
        </div>
      </section>
    );
  }
  return (
    <>
      <ProductHero p={p} />
      <ProductCapabilities p={p} />
      <ProductHowItWorks p={p} />
      <ProductEvidence p={p} />
      <ProductRelated p={p} />
      <ProductCTA />
    </>
  );
}

window.ProductPage = ProductPage;