// pages.jsx — Services, Portfolio, Testimonials, Blog, About, Book, Contact, CaseStudies

// ════════════════════════════════════════════════════════════════════════
// Generic page header
// ════════════════════════════════════════════════════════════════════════
function PageHero({ eyebrow, title, intro, accent = "var(--accent)" }) {
  return (
    <section className="dj-page-hero">
      <div className="dj-container">
        <Reveal><Eyebrow>{eyebrow}</Eyebrow></Reveal>
        <Reveal delay={80}>
          <h1 className="dj-h1 dj-page-hero-h1">{title}</h1>
        </Reveal>
        {intro &&
        <Reveal delay={160}>
            <p className="dj-page-hero-sub">{intro}</p>
          </Reveal>
        }
      </div>
      <div className="dj-page-hero-rule" style={{ background: accent }} />
    </section>);

}

// ════════════════════════════════════════════════════════════════════════
// Services page
// ════════════════════════════════════════════════════════════════════════
function ServicesPage() {
  const [hover, setHover] = useState(null);
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Services · what we operate"
        title={<React.Fragment>Four systems that <em>compound revenue.</em></React.Fragment>}
        intro="We don't sell hours or one-off campaigns. We deploy and operate growth systems built around AI agents, automation, performance media, and content engines — measured weekly, optimized monthly." />
      

      {dj.serviceGroups.map((group, gi) =>
      <section key={group.id} className={`dj-section dj-svc-group ${gi % 2 === 1 ? "dj-section-cream" : ""}`}>
          <div className="dj-container">
            <div className="dj-svc-group-head">
              <Reveal>
                <span className="dj-svc-group-num">0{gi + 1} / 04</span>
              </Reveal>
              <Reveal delay={80}>
                <h2 className="dj-h2 dj-svc-group-h2">{group.label}</h2>
              </Reveal>
              <Reveal delay={160}>
                <p className="dj-svc-group-tag">{group.tagline}</p>
              </Reveal>
            </div>
            <div className="dj-svc-deep-grid">
              {group.items.map((it, ii) =>
            <Reveal key={it.id} delay={ii * 60}>
                  <Link to={`service/${it.id}`}
              className={`dj-svc-deep dj-svc-rich ${hover === it.id ? "is-hover" : ""}`}
              onMouseEnter={() => setHover(it.id)}
              onMouseLeave={() => setHover(null)}>

                    <ServiceVisual id={it.id} />
                    <div className="dj-svc-deep-body">
                      <div className="dj-svc-deep-icon"><Icon name={it.icon} /></div>
                      <h3 className="dj-svc-deep-name">{it.name}</h3>
                      <p className="dj-svc-deep-blurb">{it.blurb}</p>
                      <span className="dj-svc-deep-cta">
                        Explore service <span aria-hidden>→</span>
                      </span>
                    </div>
                  </Link>
                </Reveal>
            )}
            </div>
          </div>
        </section>
      )}

      <section className="dj-section">
        <div className="dj-container">
          <Reveal>
            <div className="dj-cta-band">
              <div>
                <Eyebrow>Not sure where to start?</Eyebrow>
                <h2 className="dj-h2" style={{ marginTop: 12 }}>
                  We'll diagnose your funnel<br /><em>and tell you the truth.</em>
                </h2>
              </div>
              <div className="dj-cta-band-actions">
                <Button to="book" kind="primary" size="lg">Book a free 30-min audit</Button>
                <Button to="case-studies" kind="ghost" size="lg" icon={false}>See proof →</Button>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </React.Fragment>);

}

// ════════════════════════════════════════════════════════════════════════
// Service work — per-service portfolio grid
// ════════════════════════════════════════════════════════════════════════
function ServiceWork({ serviceId, serviceName }) {
  const items = dj.serviceWork[serviceId] || [];
  const [lightbox, setLightbox] = useState(null);
  return (
    <section className="dj-section dj-section-cream">
      <div className="dj-container">
        <SectionHead
          eyebrow={`${serviceName} · selected work`}
          title={<React.Fragment>Work we've <em>shipped.</em></React.Fragment>}
          intro="Real projects, real brands. Every tile below is something we built and operated — click any to see the full case where applicable." />
        
        <div className="dj-sw-grid">
          {items.map((it, i) => {
            const span = ["w", "s", "s", "t", "s", "w", "s", "s"][i % 8];
            if (it.placeholder) {
              return (
                <Reveal key={i} delay={i % 4 * 60} className={`dj-sw-cell dj-sw-${span}`}>
                  <div className="dj-sw-card dj-sw-placeholder" style={{ background: it.color }}>
                    <div className="dj-sw-ph-pattern" aria-hidden />
                    <span className="dj-sw-niche">{it.niche}</span>
                    <h3 className="dj-sw-brand">{it.brand}</h3>
                    {it.metric && <span className="dj-sw-metric">{it.metric}</span>}
                    <span className="dj-sw-ph-tag">Reserved · {serviceName}</span>
                  </div>
                </Reveal>);

            }
            return (
              <Reveal key={i} delay={i % 4 * 60} className={`dj-sw-cell dj-sw-${span}`}>
                <button type="button" className="dj-sw-card" onClick={() => setLightbox(it.image)} aria-label={`${it.brand} — open`}>
                  <img src={it.image} alt={`${it.brand} — ${it.niche}`} loading="lazy" decoding="async" />
                  <div className="dj-sw-meta">
                    <span className="dj-sw-niche">{it.niche}</span>
                    <h3 className="dj-sw-brand">{it.brand}</h3>
                    {it.metric && <span className="dj-sw-metric">{it.metric}</span>}
                  </div>
                  {it.caseId &&
                  <Link to={`case/${it.caseId}`} className="dj-sw-case-link" onClick={(e) => e.stopPropagation()}>
                      Case study →
                    </Link>
                  }
                </button>
              </Reveal>);

          })}
        </div>
      </div>
      {lightbox &&
      <div className="dj-lightbox" onClick={() => setLightbox(null)} role="dialog">
          <button className="dj-lightbox-x" onClick={() => setLightbox(null)} aria-label="Close">×</button>
          <img src={lightbox} alt="" onClick={(e) => e.stopPropagation()} />
        </div>
      }
    </section>);

}

Object.assign(window, { ServiceWork });

// ════════════════════════════════════════════════════════════════════════
// Service detail page
// ════════════════════════════════════════════════════════════════════════
function ServiceDetailPage({ id }) {
  // Find the service across all groups
  let service = null;
  let group = null;
  for (const g of dj.serviceGroups) {
    const found = g.items.find((i) => i.id === id);
    if (found) {service = found;group = g;break;}
  }
  if (!service) {
    service = dj.serviceGroups[0].items[0];
    group = dj.serviceGroups[0];
  }
  const d = dj.serviceDetails && dj.serviceDetails[service.id];

  // Find related services from the same group, excluding current
  const related = group.items.filter((i) => i.id !== service.id).slice(0, 3);

  return (
    <React.Fragment>
      <section className="dj-sd-hero">
        <div className="dj-container">
          <Reveal>
            <Link to="services" className="dj-sd-back">← All services</Link>
          </Reveal>
          <div className="dj-sd-hero-grid">
            <div>
              <Reveal delay={60}>
                <Eyebrow>{group.label} · {group.tagline}</Eyebrow>
              </Reveal>
              <Reveal delay={120}>
                <h1 className="dj-h1 dj-sd-h1">{service.name}</h1>
              </Reveal>
              <Reveal delay={180}>
                <p className="dj-sd-hero-sub">{d ? d.hero : service.blurb}</p>
              </Reveal>
              <Reveal delay={240}>
                <div className="dj-sd-hero-meta">
                  {d && d.timeline && <div><span>Timeline</span><b>{d.timeline}</b></div>}
                  {d && d.stack && <div><span>Stack</span><b>{d.stack.slice(0, 3).join(" · ")}</b></div>}
                </div>
              </Reveal>
              <Reveal delay={300}>
                <div className="dj-sd-hero-ctas">
                  <Button to="book" kind="primary" size="lg">Book a 1-on-1</Button>
                  <Button to="case-studies" kind="ghost" size="lg" icon={false}>See proof →</Button>
                </div>
              </Reveal>
            </div>
            <Reveal delay={200} className="dj-sd-hero-visual">
              <ServiceVisual id={service.id} />
            </Reveal>
          </div>
        </div>
      </section>

      {d &&
      <React.Fragment>
          <section className="dj-section">
            <div className="dj-container">
              <SectionHead
              eyebrow="What you get"
              title={<React.Fragment>Everything <em>included.</em></React.Fragment>}
              intro={`A complete delivery system — the work that happens, the tools we operate, and the rituals that keep it improving.`} />
            
              <div className="dj-sd-incl-grid">
                {d.included.map((item, i) =>
              <Reveal key={i} delay={i % 3 * 80}>
                    <div className="dj-sd-incl">
                      <span className="dj-sd-incl-n">{String(i + 1).padStart(2, "0")}</span>
                      <p>{item}</p>
                    </div>
                  </Reveal>
              )}
              </div>
            </div>
          </section>

          {dj.serviceWork && dj.serviceWork[service.id] &&
        <ServiceWork serviceId={service.id} serviceName={service.name} />
        }

          <section className="dj-section dj-section-cream">
            <div className="dj-container">
              <div className="dj-sd-split">
                <Reveal>
                  <div>
                    <Eyebrow>Outcomes</Eyebrow>
                    <h2 className="dj-h2" style={{ marginTop: 16 }}>What changes in <em>90 days.</em></h2>
                  </div>
                </Reveal>
                <div className="dj-sd-outcomes">
                  {d.outcomes.map((o, i) =>
                <Reveal key={i} delay={i * 80}>
                      <div className="dj-sd-outcome">
                        <span className="dj-sd-outcome-mark">↑</span>
                        <p>{o}</p>
                      </div>
                    </Reveal>
                )}
                </div>
              </div>
            </div>
          </section>

          <section className="dj-section">
            <div className="dj-container">
              <div className="dj-sd-tri">
                <Reveal>
                  <div className="dj-sd-tri-card">
                    <Eyebrow>Ideal for</Eyebrow>
                    <ul className="dj-sd-list">
                      {d.idealFor.map((x, i) => <li key={i}><span className="dj-sd-bullet" />{x}</li>)}
                    </ul>
                  </div>
                </Reveal>
                <Reveal delay={80}>
                  <div className="dj-sd-tri-card">
                    <Eyebrow>Stack we operate</Eyebrow>
                    <ul className="dj-sd-list">
                      {d.stack.map((x, i) => <li key={i}><span className="dj-sd-bullet" />{x}</li>)}
                    </ul>
                  </div>
                </Reveal>
                <Reveal delay={160}>
                  <div className="dj-sd-tri-card">
                    <Eyebrow>Engagement</Eyebrow>
                    <p className="dj-sd-tri-big">{d.timeline}</p>
                    <Link to="book" className="dj-svc-deep-cta">Start the conversation <span aria-hidden>→</span></Link>
                  </div>
                </Reveal>
              </div>
            </div>
          </section>
        </React.Fragment>
      }

      {related.length > 0 &&
      <section className="dj-section dj-section-tight">
          <div className="dj-container">
            <SectionHead
            eyebrow={`Also in ${group.label}`}
            title={<React.Fragment>Pairs well <em>with these.</em></React.Fragment>} />
          
            <div className="dj-sd-related">
              {related.map((r, i) =>
            <Reveal key={r.id} delay={i * 80}>
                  <Link to={`service/${r.id}`} className="dj-sd-rel-card">
                    <div className="dj-sd-rel-visual"><ServiceVisual id={r.id} /></div>
                    <div className="dj-sd-rel-body">
                      <h3>{r.name}</h3>
                      <p>{r.blurb}</p>
                      <span className="dj-svc-deep-cta">Explore <span aria-hidden>→</span></span>
                    </div>
                  </Link>
                </Reveal>
            )}
            </div>
          </div>
        </section>
      }

      <section className="dj-section">
        <div className="dj-container">
          <Reveal>
            <div className="dj-cta-band">
              <div>
                <Eyebrow>Ready to ship</Eyebrow>
                <h2 className="dj-h2" style={{ marginTop: 12 }}>
                  Let's plan your <em>{service.name.toLowerCase()}.</em>
                </h2>
              </div>
              <div className="dj-cta-band-actions">
                <Button to="book" kind="primary" size="lg">Book a free 30-min audit</Button>
                <Button to="services" kind="ghost" size="lg" icon={false}>← All services</Button>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </React.Fragment>);

}

Object.assign(window, { ServiceDetailPage });

// ════════════════════════════════════════════════════════════════════════
// Case Studies — list + modal detail
// ════════════════════════════════════════════════════════════════════════
function CaseStudiesPage() {
  const [filter, setFilter] = useState("All");
  const niches = ["All", ...new Set(dj.caseStudies.map((c) => c.niche))];
  const filtered = filter === "All" ? dj.caseStudies : dj.caseStudies.filter((c) => c.niche === filter);
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Case studies"
        title={<React.Fragment>Systems shipped. <em>Results measured.</em></React.Fragment>}
        intro="Click any case to read the full story — goal, system architecture, what we built, real numbers, and the founder's words." />
      
      <section className="dj-section dj-section-tight">
        <div className="dj-container">
          <Reveal>
            <div className="dj-filter-row">
              {niches.map((n) =>
              <Chip key={n} active={filter === n} onClick={() => setFilter(n)}>{n}</Chip>
              )}
            </div>
          </Reveal>
          <div className="dj-cases-list">
            {filtered.map((c, i) =>
            <Reveal key={c.id} delay={i * 60}>
                <Link to={`case/${c.id}`} className="dj-case-row">
                  <div className="dj-case-row-col dj-case-row-id">
                    <span className="dj-case-row-num">/{String(i + 1).padStart(2, "0")}</span>
                    <span className="dj-case-row-niche">{c.niche}</span>
                  </div>
                  <div className="dj-case-row-col dj-case-row-brand">
                    <span className="dj-case-row-swatch" style={{ background: c.color }} />
                    <span className="dj-case-row-name">{c.brand}</span>
                  </div>
                  <div className="dj-case-row-col dj-case-row-goal">{c.goal}</div>
                  <div className="dj-case-row-col dj-case-row-stats">
                    {c.stats.map((s) =>
                  <span key={s.k} className="dj-case-row-stat"><b>{s.v}</b> {s.k}</span>
                  )}
                  </div>
                  <span className="dj-case-row-arrow" aria-hidden>→</span>
                </Link>
              </Reveal>
            )}
          </div>
        </div>
      </section>
    </React.Fragment>);

}

// Case detail (full page)
function CaseDetailPage({ id }) {
  const c = dj.caseStudies.find((x) => x.id === id) || dj.caseStudies[0];
  const hasGallery = c.banners && c.banners.length > 0;
  const hasListings = c.listings && c.listings.length > 0;
  const [lightbox, setLightbox] = useState(null);

  return (
    <React.Fragment>
      <section className="dj-case-hero" style={{ ...{ background: c.color }, background: "rgb(0, 27, 7)" }}>
        {c.hero && <div className={`dj-case-hero-bg ${c.heroLogo ? "is-logo" : ""}`} style={{ backgroundImage: `url(${c.hero})` }} />}
        <div className="dj-container">
          <Reveal>
            <Link to="case-studies" className="dj-case-back">← Back to case studies</Link>
          </Reveal>
          <div className="dj-case-hero-top">
            <Reveal delay={80}>
              <span className="dj-case-hero-niche">{c.niche}{c.region ? ` · ${c.region}` : ""}</span>
            </Reveal>
            {c.logo &&
            <Reveal delay={100}>
                <img src={c.logo} alt={`${c.brand} logo`} className="dj-case-hero-logo" decoding="async" style={{ objectFit: "fill", width: "72px", height: "64px" }} />
              </Reveal>
            }
          </div>
          <Reveal delay={120}>
            <h1 className="dj-h1 dj-case-hero-brand">{c.brand}</h1>
          </Reveal>
          <Reveal delay={180}>
            <p className="dj-case-hero-goal">{c.goal}</p>
          </Reveal>
          {(c.website || c.instagram) &&
          <Reveal delay={220}>
              <div className="dj-case-hero-links">
                {c.website && <a href={c.website} target="_blank" rel="noopener" className="dj-case-hero-link"><span>Website</span> {c.website.replace(/^https?:\/\//, "").replace(/\/$/, "")} <span aria-hidden>↗</span></a>}
                {c.instagram && <a href={c.instagram} target="_blank" rel="noopener" className="dj-case-hero-link"><span>Instagram</span> @{c.instagram.split("/").filter(Boolean).pop()} <span aria-hidden>↗</span></a>}
                {c.tagline && <span className="dj-case-hero-tagline">"{c.tagline}"</span>}
              </div>
            </Reveal>
          }
          {!c.logo &&
          <Reveal delay={240}>
              <div className="dj-case-hero-mark">{c.brand.split(" ").map((w) => w[0]).join("")}</div>
            </Reveal>
          }
        </div>
      </section>

      <section className="dj-section">
        <div className="dj-container">
          {c.logo &&
          <Reveal>
              <div className={`dj-case-logo-plate ${c.logoInvert ? "is-invert" : ""}`} style={{ ...(c.color ? { borderColor: "transparent", background: c.color } : null), background: "rgb(0, 27, 2)" }}>
                <img src={c.logo} alt={`${c.brand} brand logo`} decoding="async" />
              </div>
            </Reveal>
          }
        </div>
      </section>

      <section className="dj-section">
        <div className="dj-container dj-case-detail-grid">
          <div className="dj-case-detail-side">
            <Reveal>
              <Eyebrow>Engagement</Eyebrow>
              <ul className="dj-case-meta-list">
                <li><span>Niche</span><b>{c.niche}</b></li>
                <li><span>Region</span><b>{c.region || "India + global"}</b></li>
                <li><span>Brand color</span><b><span className="dj-case-row-swatch" style={{ background: c.color }} /> {c.color}</b></li>
                <li><span>Stage</span><b>Live · operating</b></li>
              </ul>
            </Reveal>
          </div>
          <div className="dj-case-detail-main">
            <Reveal>
              <h2 className="dj-h3">The system we built</h2>
              <ul className="dj-case-did-list">
                {c.did.map((d, i) =>
                <li key={i}><span className="dj-case-did-n">{String(i + 1).padStart(2, "0")}</span><span>{d}</span></li>
                )}
              </ul>
            </Reveal>
            <Reveal delay={120}>
              <h2 className="dj-h3" style={{ marginTop: 64 }}>Results</h2>
              <div className="dj-case-result-grid">
                {c.stats.map((s) =>
                <div key={s.k} className="dj-case-result">
                    <span className="dj-case-result-v">{s.v}</span>
                    <span className="dj-case-result-k">{s.k}</span>
                  </div>
                )}
              </div>
            </Reveal>
            <Reveal delay={180}>
              <figure className="dj-case-quote">
                <p>"{c.quote}"</p>
                <figcaption>— {c.who}</figcaption>
              </figure>
            </Reveal>
            {c.reviewImage &&
            <Reveal delay={240}>
                <div className="dj-case-proof" style={{ textAlign: "left", padding: "28px" }}>
                  <Eyebrow>Verified review · Freelancer.com</Eyebrow>
                  <a href={c.reviewImage} target="_blank" rel="noopener" className="dj-case-proof-img">
                    <img src={c.reviewImage} alt={`Freelancer.com review from ${c.who}`} loading="lazy" decoding="async" />
                  </a>
                </div>
              </Reveal>
            }
          </div>
        </div>
      </section>

      {c.brandGuide &&
      <section className="dj-section dj-section-cream">
          <div className="dj-container">
            <SectionHead
            eyebrow="Brand guide"
            title={<React.Fragment>The system we built <em>before we sold anything.</em></React.Fragment>}
            intro={`We started with the brand. Tagline, palette, typography — the rules that make every creative feel like ${c.brand}.`} />
          
            <div className="dj-bg-grid">
              <Reveal>
                <div className="dj-bg-card">
                  <Eyebrow>Tagline</Eyebrow>
                  <p className="dj-bg-tagline">"{c.brandGuide.tagline}"</p>
                </div>
              </Reveal>
              <Reveal delay={80}>
                <div className="dj-bg-card">
                  <Eyebrow>Typography</Eyebrow>
                  <ul className="dj-bg-type">
                    {c.brandGuide.typography.map((t, i) => <li key={i}>{t}</li>)}
                  </ul>
                </div>
              </Reveal>
              <Reveal delay={160} className="dj-bg-palette-wrap">
                <div className="dj-bg-card dj-bg-palette-card">
                  <Eyebrow>Color palette</Eyebrow>
                  <div className="dj-bg-palette">
                    {c.brandGuide.palette.map((p) =>
                  <div key={p.hex} className="dj-bg-swatch">
                        <div className="dj-bg-swatch-color" style={{ background: p.hex }} />
                        <div className="dj-bg-swatch-meta">
                          <span className="dj-bg-swatch-name">{p.name}</span>
                          <span className="dj-bg-swatch-hex">{p.hex.toUpperCase()}</span>
                          <span className="dj-bg-swatch-role">{p.role}</span>
                        </div>
                      </div>
                  )}
                  </div>
                </div>
              </Reveal>
              {c.brandGuide.principles &&
            <Reveal delay={220} className="dj-bg-principles-wrap">
                  <div className="dj-bg-card">
                    <Eyebrow>Brand principles</Eyebrow>
                    <ul className="dj-bg-principles">
                      {c.brandGuide.principles.map((p, i) =>
                  <li key={i}><span className="dj-bg-principles-n">{String(i + 1).padStart(2, "0")}</span><span>{p}</span></li>
                  )}
                    </ul>
                  </div>
                </Reveal>
            }
            </div>
          </div>
        </section>
      }

      {c.analytics &&
      <section className="dj-section">
          <div className="dj-container">
            <SectionHead
            eyebrow="Ads analytics"
            title={<React.Fragment>The numbers behind <em>the engine.</em></React.Fragment>}
            intro={`A snapshot of ${c.analytics.platform} performance across the engagement — what we spent, what we generated, and where the funnel held.`} />
          
            <Reveal>
              <div className="dj-analytics-head">
                <div className="dj-analytics-meta">
                  <div className="dj-analytics-meta-item"><span>Platform</span><b>{c.analytics.platform}</b></div>
                  <div className="dj-analytics-meta-item"><span>Completed</span><b>{c.analytics.duration}</b></div>
                  <div className="dj-analytics-meta-item"><span>Brand</span><b>{c.brand}</b></div>
                </div>
                <span className="dj-eyebrow"><span className="dj-eyebrow-dot" /> 18 months</span>
              </div>
            </Reveal>

            <div className="dj-analytics-cards">
              {c.analytics.cards.map((card, i) =>
            <Reveal key={card.label} delay={i * 80}>
                  <div className="dj-analytics-card">
                    <span className="dj-ac-lbl">{card.label}</span>
                    <span className="dj-ac-val">{card.value}</span>
                    {card.note && <span className="dj-ac-note">{card.note}</span>}
                  </div>
                </Reveal>
            )}
            </div>

            {c.analytics.bars && (() => {
            const max = Math.max(...c.analytics.bars.map((b) => b.leads));
            return (
              <Reveal>
                  <div className="dj-chart">
                    <div className="dj-chart-head">
                      <div className="dj-chart-title">Monthly lead generation</div>
                      <div className="dj-chart-axis">Y · leads / month  ·  Σ {c.analytics.bars.reduce((s, b) => s + b.leads, 0).toLocaleString()}+ over 12 months</div>
                    </div>
                    <div className="dj-chart-grid">
                      {c.analytics.bars.map((b, i) =>
                    <div key={b.month} className="dj-chart-bar"
                    data-v={b.leads}
                    style={{ height: `${b.leads / max * 100}%`, animationDelay: `${i * 60}ms` }} />
                    )}
                    </div>
                    <div className="dj-chart-labels">
                      {c.analytics.bars.map((b) => <span key={b.month}>{b.month}</span>)}
                    </div>
                  </div>
                </Reveal>);

          })()}

            {c.analytics.funnel &&
          <Reveal delay={120}>
                <div className="dj-chart">
                  <div className="dj-chart-head">
                    <div className="dj-chart-title">Funnel breakdown</div>
                    <div className="dj-chart-axis">Top → bottom · ads → leads</div>
                  </div>
                  <div className="dj-funnel">
                    {c.analytics.funnel.map((s) =>
                <div key={s.stage} className="dj-funnel-row">
                        <span className="dj-funnel-stage">{s.stage}</span>
                        <span className="dj-funnel-bar" />
                        <span className="dj-funnel-val">{s.value}</span>
                      </div>
                )}
                  </div>
                </div>
              </Reveal>
          }
          </div>
        </section>
      }

      {c.galleries && c.galleries.map((g, gi) =>
      <section key={gi} className={`dj-section ${gi % 2 === 0 ? "dj-section-dark" : ""}`}>
          <div className="dj-container">
            <SectionHead
            eyebrow={g.eyebrow}
            title={g.title}
            intro={g.intro} />
          
            <div className="dj-gallery-masonry">
              {g.images.map((src, i) =>
            <Reveal key={i} delay={i % 4 * 40}>
                  <button type="button" className="dj-gallery-tile" onClick={() => setLightbox(src)} aria-label={`Open ${g.eyebrow} image ${i + 1}`}>
                    <img src={src} alt={`${c.brand} — ${g.eyebrow} ${i + 1}`} loading="lazy" decoding="async" />
                  </button>
                </Reveal>
            )}
            </div>
          </div>
        </section>
      )}

      {hasGallery &&
      <section className="dj-section dj-section-dark">
          <div className="dj-container">
            <SectionHead
            eyebrow="A+ Content Banners"
            title={<React.Fragment>Eight modules. <em>One brand voice.</em></React.Fragment>}
            intro="A+ Content built for the Amazon detail page — lifestyle, comparisons, and feature benefits, all engineered to lift conversion." />
          
            <div className="dj-gallery-banners">
              {c.banners.map((src, i) =>
            <Reveal key={i} delay={i % 3 * 80}>
                  <button className="dj-gallery-tile dj-gallery-tile-wide" onClick={() => setLightbox(src)}>
                    <img src={src} alt={`${c.brand} A+ banner ${i + 1}`} loading="lazy" decoding="async" />
                  </button>
                </Reveal>
            )}
            </div>
          </div>
        </section>
      }

      {hasListings &&
      <section className="dj-section">
          <div className="dj-container">
            <SectionHead
            eyebrow="Listing Creatives"
            title={<React.Fragment>Hero, lifestyle, comparison, <em>and the rest.</em></React.Fragment>}
            intro="The full set of Amazon listing images — every angle a shopper needs to convert." />
          
            <div className="dj-gallery-square">
              {c.listings.map((src, i) =>
            <Reveal key={i} delay={i % 4 * 60}>
                  <button className="dj-gallery-tile" onClick={() => setLightbox(src)}>
                    <img src={src} alt={`${c.brand} listing ${i + 1}`} loading="lazy" decoding="async" />
                  </button>
                </Reveal>
            )}
            </div>
          </div>
        </section>
      }

      <section className="dj-section dj-section-cream">
        <div className="dj-container">
          <Reveal>
            <div className="dj-case-cta-row dj-case-cta-row-center">
              <Button to="book" kind="primary" size="lg">Build a system like this</Button>
              <Button to="case-studies" kind="ghost" size="lg" icon={false}>Next case study →</Button>
            </div>
          </Reveal>
        </div>
      </section>

      {lightbox &&
      <div className="dj-lightbox" onClick={() => setLightbox(null)} role="dialog">
          <button className="dj-lightbox-x" onClick={() => setLightbox(null)} aria-label="Close">×</button>
          <img src={lightbox} alt="" onClick={(e) => e.stopPropagation()} />
        </div>
      }
    </React.Fragment>);

}

// ════════════════════════════════════════════════════════════════════════
// Portfolio
// ════════════════════════════════════════════════════════════════════════
function PortfolioPage() {
  const [filter, setFilter] = useState("All");
  const niches = ["All", ...dj.niches.filter((n) => dj.portfolio.some((p) => p.niche === n))];
  const filtered = filter === "All" ? dj.portfolio : dj.portfolio.filter((p) => p.niche === filter);

  return (
    <React.Fragment>
      <PageHero
        eyebrow="Live portfolio"
        title={<React.Fragment>Brands we've built<br /><em>with our own hands.</em></React.Fragment>}
        intro="A living grid of projects across 20+ niches. Filter by industry to see how the system adapts to each model." />
      
      <section className="dj-section dj-section-tight">
        <div className="dj-container">
          <Reveal>
            <div className="dj-filter-row dj-filter-row-wrap">
              {niches.map((n) =>
              <Chip key={n} active={filter === n} onClick={() => setFilter(n)}>{n}</Chip>
              )}
            </div>
          </Reveal>
          <div className="dj-bento-grid dj-bento-grid-full">
            {filtered.map((p, i) => {
              const pattern = ["w", "s", "s", "t", "s", "w", "s", "s"];
              const span = pattern[i % pattern.length];
              const target = p.caseId ? `case/${p.caseId}` : null;
              const inner =
              <React.Fragment>
                  {p.logo ?
                <img src={p.logo} alt={p.brand} className="dj-bento-art" loading="lazy" decoding="async" /> :

                <span className="dj-bento-mark">{p.brand.split(" ").map((w) => w[0]).slice(0, 2).join("")}</span>
                }
                  <div className="dj-bento-meta">
                    <span className="dj-bento-niche">{p.niche}{p.tag ? " · " + p.tag.split("·")[0].trim() : ""}</span>
                    <h3 className="dj-bento-brand">{p.brand}</h3>
                  </div>
                  <span className="dj-bento-arrow" aria-hidden>
                    <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 7h7M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </span>
                </React.Fragment>;

              return (
                <Reveal key={`${p.brand}-${i}`} delay={i % 6 * 50} className={`dj-bento-cell dj-bento-${span}`}>
                  {target ?
                  <Link to={target} className="dj-bento-card" style={{ background: p.color }}>{inner}</Link> :

                  <div className="dj-bento-card" style={{ background: p.color }}>{inner}</div>
                  }
                </Reveal>);

            })}
          </div>
          {filtered.length === 0 &&
          <p style={{ textAlign: "center", color: "var(--muted)", padding: 64 }}>No projects yet in this niche — yours could be the first.</p>
          }
        </div>
      </section>
    </React.Fragment>);

}

// ════════════════════════════════════════════════════════════════════════
// Testimonials
// ════════════════════════════════════════════════════════════════════════
function TestimonialsPage() {
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Feedback · in their words"
        title={<React.Fragment>What founders say<br /><em>after the system ships.</em></React.Fragment>}
        intro="Written notes, video reels, and quiet wins. The best signal we can offer is the people we've worked with." />
      

      <section className="dj-section">
        <div className="dj-container">
          <SectionHead eyebrow="Video reels" title={<React.Fragment>Founders, <em>on camera.</em></React.Fragment>} />
          <div className="dj-reels-grid">
            {dj.testimonials.filter((t) => t.reel).map((t, i) =>
            <Reveal key={i} delay={i * 80}>
                <div className="dj-reel">
                  <MediaSlot label={`reel · ${t.niche}`} ratio="9 / 16" color={`hsl(${i * 90} 10% 14%)`}>
                    <span className="dj-reel-play">▶</span>
                  </MediaSlot>
                  <p className="dj-reel-quote">"{t.quote}"</p>
                  <p className="dj-reel-who">{t.who}</p>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      <section className="dj-section dj-section-cream">
        <div className="dj-container">
          <SectionHead eyebrow="Written notes" title={<React.Fragment>Quiet wins, <em>in their words.</em></React.Fragment>} />
          <div className="dj-quotes-grid">
            {dj.testimonials.map((t, i) =>
            <Reveal key={i} delay={i % 4 * 60}>
                <figure className="dj-quote-card">
                  <p className="dj-quote-mark">"</p>
                  <blockquote>{t.quote}</blockquote>
                  <figcaption>
                    <span className="dj-quote-who">{t.who}</span>
                    <span className="dj-quote-niche">{t.niche}</span>
                  </figcaption>
                </figure>
              </Reveal>
            )}
          </div>
        </div>
      </section>
    </React.Fragment>);

}

// ════════════════════════════════════════════════════════════════════════
// Blog
// ════════════════════════════════════════════════════════════════════════
function BlogPage() {
  const [filter, setFilter] = useState("All");
  const cats = ["All", ...new Set(dj.blog.map((b) => b.category))];
  const filtered = filter === "All" ? dj.blog : dj.blog.filter((b) => b.category === filter);
  return (
    <React.Fragment>
      <PageHero
        eyebrow="The Field Notes"
        title={<React.Fragment>What we learn,<br /><em>operating the system.</em></React.Fragment>}
        intro="Tactical writing on AI marketing, automation, performance media, and the new search era — from the team building it daily." />
      

      <section className="dj-section dj-section-tight">
        <div className="dj-container">
          <Reveal>
            <div className="dj-filter-row">
              {cats.map((c) =>
              <Chip key={c} active={filter === c} onClick={() => setFilter(c)}>{c}</Chip>
              )}
            </div>
          </Reveal>
          <ul className="dj-blog-list">
            {filtered.map((b, i) =>
            <Reveal key={b.id} delay={i * 60} as="li">
                <a className="dj-blog-row" href="#">
                  <div className="dj-blog-row-meta">
                    <span className="dj-blog-cat">{b.category}</span>
                    <span className="dj-blog-date">{b.date} · {b.read}</span>
                  </div>
                  <h3 className="dj-blog-title">{b.title}</h3>
                  <p className="dj-blog-excerpt">{b.excerpt}</p>
                  <span className="dj-blog-cta">Read article →</span>
                </a>
              </Reveal>
            )}
          </ul>
        </div>
      </section>
    </React.Fragment>);

}

// ════════════════════════════════════════════════════════════════════════
// About / Team
// ════════════════════════════════════════════════════════════════════════
function AboutPage() {
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Who we are"
        title={<React.Fragment>A small team building<br /><em>India's AI-first growth company.</em></React.Fragment>}
        intro="Digital Jaao was started in Jaipur with one belief — that the next decade of marketing belongs to founders who build systems, not those who buy media. We design and operate that system, end to end, for ambitious brands." />
      

      <section className="dj-section">
        <div className="dj-container">
          <SectionHead
            eyebrow="The story"
            title={<React.Fragment>Built from the funnel, <em>not the brochure.</em></React.Fragment>} />
          
          <div className="dj-story-grid">
            <Reveal>
              <p className="dj-story-p">
                We started Digital Jaao after years of operating inside D2C and SaaS brands — watching the gap widen between agencies that ran campaigns and the businesses that needed systems. Every founder we met was paying for activity, not architecture.
              </p>
            </Reveal>
            <Reveal delay={100}>
              <p className="dj-story-p">
                So we built the other thing. A growth company designed around AI agents, automation, performance media, and content — engineered like a product team and operated with a weekly cadence. Today we run that system for 240+ brands across 20 niches.
              </p>
            </Reveal>
            <Reveal delay={200}>
              <p className="dj-story-p">
                <em>The mission is simple.</em> Make growth predictable. Make the work visible. Make AI a teammate, not a marketing slogan.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="dj-section dj-section-cream">
        <div className="dj-container">
          <SectionHead
            eyebrow="The founders"
            title={<React.Fragment>Operators first. <em>Builders second.</em></React.Fragment>} />
          
          <div className="dj-team-grid">
            {dj.founders.map((f, i) =>
            <Reveal key={f.name} delay={i * 120}>
                <article className="dj-team-card">
                  <MediaSlot label={`portrait · ${f.name.split(" ")[0].toLowerCase()}`} ratio="4 / 5" color="#1a1a1a" />
                  <div className="dj-team-body">
                    <span className="dj-team-role">{f.role} · since {f.since}</span>
                    <h3 className="dj-team-name">{f.name}</h3>
                    <p className="dj-team-bio">{f.bio}</p>
                    <ul className="dj-team-focus">
                      {f.focus.map((x) => <li key={x}>{x}</li>)}
                    </ul>
                    <div className="dj-team-links">
                      <a href={f.linkedin} className="dj-team-link">LinkedIn ↗</a>
                      <a href={`mailto:${dj.brand.email}`} className="dj-team-link">Email ↗</a>
                    </div>
                  </div>
                </article>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      <section className="dj-section">
        <div className="dj-container">
          <SectionHead eyebrow="What we believe" title={<React.Fragment>Six things we operate by.</React.Fragment>} />
          <div className="dj-values-grid">
            {[
            ["Systems beat campaigns", "Engines compound. Campaigns expire."],
            ["AI is a teammate", "Not a buzzword. Not a replacement."],
            ["Founder voice wins", "Faceless brands lost the trust race."],
            ["Show the numbers", "Live dashboards. No vanity slides."],
            ["Ship in weeks", "Speed is a strategic moat."],
            ["Brand is the moat", "Performance dies without it."]].
            map(([h, b], i) =>
            <Reveal key={i} delay={i % 3 * 80}>
                <div className="dj-value-card">
                  <span className="dj-value-n">{String(i + 1).padStart(2, "0")}</span>
                  <h3 className="dj-value-h">{h}</h3>
                  <p className="dj-value-b">{b}</p>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </section>
    </React.Fragment>);

}

// ════════════════════════════════════════════════════════════════════════
// Book a demo / 1-on-1
// ════════════════════════════════════════════════════════════════════════
function BookPage() {
  const [form, setForm] = useState({ name: "", email: "", phone: "", brand: "", niche: "", goal: "", budget: "₹50k–1L / mo" });
  const [step, setStep] = useState(1);
  const [submitted, setSubmitted] = useState(false);

  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const valid1 = form.name && form.email;
  const valid2 = form.brand && form.niche;

  return (
    <React.Fragment>
      <PageHero
        eyebrow="Book a 1-on-1 consultation"
        title={<React.Fragment>30 minutes.<br /><em>Honest answers.</em></React.Fragment>}
        intro="A direct call with a senior member of the team. We'll audit your current funnel, identify the bottleneck, and tell you whether we can help — even if the answer is no." />
      

      <section className="dj-section">
        <div className="dj-container dj-book-grid">
          <div className="dj-book-side">
            <Reveal>
              <h3 className="dj-h3">What you'll get</h3>
              <ul className="dj-book-list">
                <li><span className="dj-svc-dot" /> A live audit of your current funnel and ad accounts</li>
                <li><span className="dj-svc-dot" /> The one bottleneck that's costing you the most revenue</li>
                <li><span className="dj-svc-dot" /> A blueprint of the AI system we'd build for you</li>
                <li><span className="dj-svc-dot" /> An honest yes/no — no follow-up pressure</li>
              </ul>
            </Reveal>
            <Reveal delay={120}>
              <div className="dj-book-quote">
                <p>"We replaced three vendors with one AI-first team. Numbers speak."</p>
                <span>— Sales Director · Saaras Estates</span>
              </div>
            </Reveal>
            <Reveal delay={180}>
              <div className="dj-book-meta">
                <div><span>Email</span><b>{dj.brand.email}</b></div>
                <div><span>Phone</span><b>{dj.brand.phone}</b></div>
                <div><span>Location</span><b>{dj.brand.location}</b></div>
              </div>
            </Reveal>
          </div>

          <Reveal delay={120} className="dj-book-form-wrap">
            {!submitted ?
            <form className="dj-form" onSubmit={(e) => {e.preventDefault();setSubmitted(true);}}>
                <div className="dj-form-steps">
                  {[1, 2, 3].map((n) =>
                <span key={n} className={`dj-form-step ${step >= n ? "is-on" : ""}`}>
                      <span>{String(n).padStart(2, "0")}</span>
                      {n === 1 ? "About you" : n === 2 ? "About your brand" : "Pick a time"}
                    </span>
                )}
                </div>

                {step === 1 &&
              <div className="dj-form-fields">
                    <label className="dj-field">
                      <span>Full name *</span>
                      <input type="text" value={form.name} onChange={upd("name")} placeholder="Your name" />
                    </label>
                    <label className="dj-field">
                      <span>Work email *</span>
                      <input type="email" value={form.email} onChange={upd("email")} placeholder="you@brand.com" />
                    </label>
                    <label className="dj-field">
                      <span>Phone / WhatsApp</span>
                      <input type="tel" value={form.phone} onChange={upd("phone")} placeholder="+91 …" />
                    </label>
                    <div className="dj-form-actions">
                      <Button kind="primary" onClick={(e) => {e.preventDefault();if (valid1) setStep(2);}}>Continue</Button>
                    </div>
                  </div>
              }

                {step === 2 &&
              <div className="dj-form-fields">
                    <label className="dj-field">
                      <span>Brand name *</span>
                      <input type="text" value={form.brand} onChange={upd("brand")} placeholder="Your company" />
                    </label>
                    <label className="dj-field">
                      <span>Niche *</span>
                      <select value={form.niche} onChange={upd("niche")}>
                        <option value="">Select your industry…</option>
                        {dj.niches.map((n) => <option key={n} value={n}>{n}</option>)}
                      </select>
                    </label>
                    <label className="dj-field">
                      <span>Monthly marketing budget</span>
                      <select value={form.budget} onChange={upd("budget")}>
                        <option>Under ₹50k / mo</option>
                        <option>₹50k–1L / mo</option>
                        <option>₹1L–3L / mo</option>
                        <option>₹3L–10L / mo</option>
                        <option>₹10L+ / mo</option>
                      </select>
                    </label>
                    <label className="dj-field">
                      <span>What's the goal of this call?</span>
                      <textarea rows="3" value={form.goal} onChange={upd("goal")} placeholder="One sentence is fine." />
                    </label>
                    <div className="dj-form-actions">
                      <button type="button" className="dj-form-back" onClick={() => setStep(1)}>← Back</button>
                      <Button kind="primary" onClick={(e) => {e.preventDefault();if (valid2) setStep(3);}}>Continue</Button>
                    </div>
                  </div>
              }

                {step === 3 &&
              <div className="dj-form-fields">
                    <p className="dj-form-note">Pick a slot — we'll confirm via email within 2 business hours.</p>
                    <div className="dj-slots-grid">
                      {["Tue · 10:00", "Tue · 15:30", "Wed · 11:00", "Wed · 17:00", "Thu · 09:30", "Thu · 14:00", "Fri · 11:30", "Fri · 16:00"].map((s) =>
                  <button key={s} type="button" className="dj-slot">{s}</button>
                  )}
                    </div>
                    <div className="dj-form-actions">
                      <button type="button" className="dj-form-back" onClick={() => setStep(2)}>← Back</button>
                      <Button kind="primary">Request the consult</Button>
                    </div>
                  </div>
              }
              </form> :

            <div className="dj-form-thanks">
                <Eyebrow>You're in.</Eyebrow>
                <h2 className="dj-h2" style={{ marginTop: 16 }}>
                  Thanks, {form.name.split(" ")[0]}.<br /><em>We'll confirm by email.</em>
                </h2>
                <p className="dj-page-hero-sub">A senior team member will reach out from <b>{dj.brand.email}</b> within 2 business hours. Talk soon.</p>
                <Button to="case-studies" kind="ghost" size="lg">While you wait, see case studies →</Button>
              </div>
            }
          </Reveal>
        </div>
      </section>
    </React.Fragment>);

}

// ════════════════════════════════════════════════════════════════════════
// Contact
// ════════════════════════════════════════════════════════════════════════
function ContactPage() {
  const [form, setForm] = useState({ name: "", email: "", message: "" });
  const [sent, setSent] = useState(false);
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Contact · say hello"
        title={<React.Fragment>Two ways to reach us.<br /><em>Both real humans.</em></React.Fragment>} />
      
      <section className="dj-section">
        <div className="dj-container dj-contact-grid">
          <Reveal>
            <div className="dj-contact-side">
              <div className="dj-contact-block">
                <Eyebrow>Email</Eyebrow>
                <a href={`mailto:${dj.brand.email}`} className="dj-contact-big">{dj.brand.email}</a>
              </div>
              <div className="dj-contact-block">
                <Eyebrow>Phone / WhatsApp</Eyebrow>
                <a href={`tel:${dj.brand.phone.replace(/\s/g, "")}`} className="dj-contact-big">{dj.brand.phone}</a>
              </div>
              <div className="dj-contact-block">
                <Eyebrow>Studio</Eyebrow>
                <p className="dj-contact-loc">{dj.brand.location}</p>
              </div>
              <div className="dj-contact-block">
                <Eyebrow>Channels</Eyebrow>
                <div className="dj-contact-socials">
                  {dj.brand.socials.map((s) => <a key={s.label} href={s.href}>{s.label} ↗</a>)}
                </div>
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <form className="dj-form dj-form-contact" onSubmit={(e) => {e.preventDefault();setSent(true);}}>
              {!sent ?
              <React.Fragment>
                  <h2 className="dj-h3">Send a message</h2>
                  <label className="dj-field"><span>Name</span><input value={form.name} onChange={upd("name")} required /></label>
                  <label className="dj-field"><span>Email</span><input type="email" value={form.email} onChange={upd("email")} required /></label>
                  <label className="dj-field"><span>Message</span><textarea rows="5" value={form.message} onChange={upd("message")} required /></label>
                  <Button kind="primary" size="lg">Send message</Button>
                </React.Fragment> :

              <div className="dj-form-thanks">
                  <Eyebrow>Sent.</Eyebrow>
                  <h2 className="dj-h2" style={{ marginTop: 16 }}>Thanks, {form.name.split(" ")[0] || "friend"}. <em>We'll reply soon.</em></h2>
                </div>
              }
            </form>
          </Reveal>
        </div>
      </section>
    </React.Fragment>);

}

Object.assign(window, {
  ServicesPage, CaseStudiesPage, CaseDetailPage,
  PortfolioPage, TestimonialsPage, BlogPage, AboutPage,
  BookPage, ContactPage, PageHero
});