/* global React, TextReveal, Ph, Img, PHOTOS, SectionHead, Counter */

const { useState: useStateC, useEffect: useEffectC } = React;

/* ============================================================
   CAREERS
============================================================ */
function Careers({ setRoute }) {
  const [team, setTeam] = useStateC("all");
  const [loc, setLoc] = useStateC("all");
  const [activeJob, setActiveJob] = useStateC(null);
  const [applyFor, setApplyFor] = useStateC(null);

  const jobs = [
    { id: 1, title: "Operations Executive", team: "ops", loc: "Etawah, UP", type: "Full-time", desc: "Run day-to-day press operations at our Etawah facility. Coordinate jobs, dispatch, and quality checks across the production floor." },
    { id: 2, title: "Delivery Manager", team: "ops", loc: "Etawah, UP", type: "Full-time", desc: "Own end-to-end delivery — from press dispatch to customer doorstep. Manage logistics partners and on-time SLA performance." },
    { id: 3, title: "QC Inspector", team: "ops", loc: "Etawah, UP", type: "Full-time", desc: "Inspect press output before dispatch. Print-trade background preferred. Run two QC checks on every job — colour accuracy, registration, cut, finish." },
    { id: 4, title: "Graphic Designer", team: "design", loc: "Etawah, UP", type: "Full-time", desc: "Polish customer artwork for press. Prepress checks, colour profiles, dieline corrections. Also support PrintBala's marketing visuals." },
    { id: 5, title: "Junior Prepress Designer", team: "design", loc: "Etawah, UP", type: "Full-time", desc: "Entry-level prepress role. Handle imposition, bleeds, colour separation, and final-art handoff. Adobe Suite mandatory." },
    { id: 6, title: "Software Developer", team: "tech", loc: "Etawah, UP / Remote", type: "Full-time", desc: "Build and maintain the PrintBala order and partner platform. Full-stack — Angular on the front, .NET / MS SQL Server on the back." },
    { id: 7, title: "Frontend Developer (Angular)", team: "tech", loc: "Remote", type: "Full-time", desc: "Own customer-facing flows in Angular. Strong on TypeScript, RxJS, and reactive forms. You'll ship the order experience used by 12,000+ businesses." },
    { id: 8, title: "Backend Developer (.NET)", team: "tech", loc: "Etawah, UP / Remote", type: "Full-time", desc: "Build the order routing, billing, and partner-portal APIs. C#, .NET 8, MS SQL Server, Azure. Familiarity with SignalR / queues a plus." },
    { id: 9, title: "Operations Intern", team: "ops", loc: "Etawah, UP", type: "Internship", desc: "2-6-month internship on the production floor. Learn press operations, QA, and dispatch hands-on. Full-time conversion path." },
    { id: 10, title: "Developer Intern", team: "tech", loc: "Etawah, UP / Remote", type: "Internship", desc: "2-6-month internship with the engineering team. Ship real features in Angular + .NET and MS SQL Server. Full-time conversion path." },
    { id: 11, title: "Design Intern", team: "design", loc: "Etawah, UP / Remote", type: "Internship", desc: "2-6-month internship with the design team. Work on real customer artwork, prepress, and marketing collateral. Adobe Suite required." },
    { id: 12, title: "Marketing Intern", team: "ops", loc: "Etawah, UP / Remote", type: "Internship", desc: "2-6-month internship supporting brand, content, and B2B outreach. Strong writing, comfortable on LinkedIn + Instagram." },
  ];

  const teams = [
    { id: "all", label: "All teams" },
    { id: "ops", label: "Operations" },
    { id: "tech", label: "Engineering" },
    { id: "design", label: "Design" },
  ];
  const locs = [
    { id: "all", label: "All locations" },
    { id: "Etawah, UP", label: "Etawah" },
    { id: "Etawah, UP / Remote", label: "Remote" },
  ];

  const filtered = jobs.filter(
    (j) => (team === "all" || j.team === team) && (loc === "all" || j.loc === loc)
  );

  return (
    <main>
      <header className="page-header">
        <div className="container">
          <div className="crumbs reveal">Home / Careers</div>
          <TextReveal as="h1">Help us print India's future.</TextReveal>
          <p className="lede reveal" data-delay="3">
            We're hiring across operations, engineering, and design — for our HQ in Etawah, with select roles open to remote.
          </p>
          <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }} className="reveal" data-delay="4">
            <a href="#open" className="btn btn-primary">
              See open roles
              <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
            <a href="#culture" className="btn btn-ghost">Our culture</a>
          </div>
        </div>
      </header>

      {/* Culture strip */}
      <section className="section" id="culture">
        <div className="container">
          <SectionHead
            eyebrow="Culture"
            title="A company built by press operators, not consultants."
            sub="We started on the press floor and we still walk it every week. That shapes how we hire, how we ship, and how we treat each other."
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 16 }}>
            {[
              { span: 7, h: "Make + ship", b: "We're builders. Every team — including marketing and people — ships measurable work every week. Talkers don't last.", img: "https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?w=1400&q=85&auto=format&fit=crop", hs: 320 },
              { span: 5, h: "Press-first", b: "If you can't explain it to a press operator, you don't understand it.", img: "https://images.unsplash.com/photo-1601225612051-9c08ea3a87bf?w=1400&q=85&auto=format&fit=crop", hs: 320 },
              { span: 5, h: "Learn the craft", b: "Hands-on access to offset, digital, finishing, dispatch. You leave a stronger generalist than you came in.", img: "https://images.unsplash.com/photo-1572044162444-ad60f128bdea?w=1400&q=85&auto=format&fit=crop", hs: 280 },
              { span: 7, h: "Slow growth, deep roots", b: "We hire carefully. We invest deeply in your growth. Most of our senior team has been here 4+ years.", img: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1400&q=85&auto=format&fit=crop", hs: 280 },
            ].map((c, i) => (
              <div key={i} className="reveal" data-delay={(i % 2) + 1} style={{ gridColumn: `span ${c.span}`, background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", overflow: "hidden", display: "flex", flexDirection: "column" }}>
                <div style={{ height: c.hs, overflow: "hidden" }}><Img src={c.img} alt={c.h} /></div>
                <div style={{ padding: 28 }}>
                  <h3 style={{ fontSize: 22, color: "var(--ink)", marginBottom: 8 }}>{c.h}</h3>
                  <p style={{ color: "var(--ink-3)", fontSize: 15 }}>{c.b}</p>
                </div>
              </div>
            ))}
          </div>

          <style>{`
            @media (max-width: 900px) { #culture .reveal { grid-column: span 12 !important; } }
          `}</style>
        </div>
      </section>

      {/* Perks */}
      <section className="section" style={{ background: "var(--bg-soft)" }}>
        <div className="container">
          <SectionHead
            eyebrow="Benefits"
            title="What you get."
            sub=""
          />
          <div className="perks">
            {[
              { i: "✦", h: "Mission-driven work", b: "You'll help digitise India's print supply chain. Real impact on real businesses, every single day." },
              { i: "◇", h: "Strong culture", b: "Press operators, designers, and engineers — sharing one floor in Etawah. No silos, no politics." },
              { i: "↗", h: "Learn on the job", b: "Hands-on access to the full print stack: offset, digital, finishing, dispatch. Mentorship from people who've shipped at scale." },
              { i: "✸", h: "Ownership from day one", b: "Small team, big surface area. Your decisions ship. Your voice counts in roadmap discussions." },
              { i: "✶", h: "Stability + growth", b: "An established, profitable business with a long runway. The average tenure of our senior team is 4+ years." },
              { i: "⌂", h: "Etawah-first, remote-friendly", b: "Engineering and design roles open to remote. Operations and dispatch roles are on the floor in Etawah." },
            ].map((p, i) => (
              <div key={p.h} className="perk reveal" data-delay={(i % 3) + 1}>
                <div className="ic" style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 20 }}>{p.i}</div>
                <h4>{p.h}</h4>
                <p>{p.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Open roles */}
      <section className="section" id="open">
        <div className="container">
          <SectionHead
            eyebrow="Open roles"
            title="12 roles open right now."
            sub="Filter by team or location."
          />

          <div className="career-filters reveal">
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 8 }}>
              {teams.map((t) => (
                <button key={t.id} className={`chip ${team === t.id ? "active" : ""}`} onClick={() => setTeam(t.id)}>{t.label}</button>
              ))}
            </div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {locs.map((l) => (
                <button key={l.id} className={`chip ${loc === l.id ? "active" : ""}`} onClick={() => setLoc(l.id)} style={{ background: loc === l.id ? "var(--accent)" : undefined, borderColor: loc === l.id ? "var(--accent)" : undefined, color: loc === l.id ? "var(--accent-ink)" : undefined }}>{l.label}</button>
              ))}
            </div>
          </div>

          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)", marginBottom: 16 }}>
            {filtered.length} role{filtered.length !== 1 ? "s" : ""} matching filters
          </div>

          <div className="job-list reveal">
            {filtered.length === 0 && (
              <div style={{ padding: 40, textAlign: "center", color: "var(--ink-3)" }}>No roles match those filters. Try another team or location.</div>
            )}
            {filtered.map((j) => (
              <React.Fragment key={j.id}>
                <div className="job" onClick={() => setActiveJob(activeJob === j.id ? null : j.id)}>
                  <h3>{j.title}</h3>
                  <div className="meta-cell">{j.loc}</div>
                  <div className="meta-cell">{j.type}</div>
                  <div className="arrow-cell">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                  </div>
                </div>
                {activeJob === j.id && (
                  <div style={{ padding: "0 32px 32px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
                    <p style={{ color: "var(--ink-2)", maxWidth: 720, marginBottom: 20 }}>{j.desc}</p>
                    <div style={{ display: "flex", gap: 10 }}>
                      <button className="btn btn-primary" onClick={(e) => { e.stopPropagation(); setApplyFor(j); }}>Apply for this role</button>
                      <button className="btn btn-ghost" onClick={(e) => { e.stopPropagation(); setActiveJob(null); }}>Close</button>
                    </div>
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>

          <div style={{ marginTop: 40, textAlign: "center" }} className="reveal">
            <p style={{ color: "var(--ink-3)", marginBottom: 12 }}>Don't see your role? We'd still love to hear from you.</p>
            <button className="btn btn-ghost" onClick={() => setApplyFor({ id: 0, title: "Open application", team: "—", loc: "—", type: "Open" })}>Send an open application →</button>
          </div>
        </div>
      </section>

      {applyFor && <ApplyModal job={applyFor} onClose={() => setApplyFor(null)} />}
    </main>
  );
}

/* ============================================================
   APPLY MODAL — separate career application form
============================================================ */
function ApplyModal({ job, onClose }) {
  const [data, setData] = useStateC({
    name: "", email: "", phone: "", linkedin: "",
    experience: "", noticePeriod: "", cover: "",
    resumeFileName: "",
  });
  const [sent, setSent] = useStateC(false);
  const [step, setStep] = useStateC(1);

  // Lock scroll while modal open + escape closes
  useEffectC(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener("keydown", onKey);
    };
  }, [onClose]);

  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const next = (e) => { e.preventDefault(); setStep(2); };
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-label="Apply for this role"
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 200,
        background: "rgba(10,10,10,0.62)",
        backdropFilter: "blur(6px)",
        WebkitBackdropFilter: "blur(6px)",
        display: "flex", alignItems: "flex-start", justifyContent: "center",
        padding: "60px 16px 32px",
        overflowY: "auto",
        animation: "applyFade 0.3s var(--ease-out)",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: "min(680px, 100%)",
          background: "var(--bg)",
          borderRadius: "var(--radius-lg)",
          border: "1px solid var(--line)",
          boxShadow: "var(--shadow-3)",
          overflow: "hidden",
          animation: "applyRise 0.4s var(--ease-spring)",
        }}
      >
        {/* Header */}
        <div style={{ padding: "28px clamp(24px, 4vw, 40px) 24px", borderBottom: "1px solid var(--line)", position: "sticky", top: 0, background: "var(--bg)", zIndex: 2 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16 }}>
            <div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--accent)", marginBottom: 8 }}>APPLY · {job.team !== "—" ? job.type.toUpperCase() : "OPEN APPLICATION"}</div>
              <h3 style={{ fontSize: "clamp(24px, 3vw, 32px)", color: "var(--ink)", letterSpacing: "-0.02em", marginBottom: 6 }}>{job.title}</h3>
              {job.team !== "—" && (
                <div className="mono" style={{ fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.1em" }}>{job.loc} · {job.type}</div>
              )}
            </div>
            <button
              type="button"
              onClick={onClose}
              aria-label="Close"
              style={{ width: 38, height: 38, borderRadius: "50%", border: "1px solid var(--line)", background: "var(--bg-soft)", color: "var(--ink)", display: "grid", placeItems: "center", cursor: "pointer", flexShrink: 0 }}
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
            </button>
          </div>

          {!sent && (
            <div style={{ display: "flex", gap: 8, marginTop: 22 }}>
              <div style={{ flex: 1, height: 3, borderRadius: 2, background: step >= 1 ? "var(--accent)" : "var(--line)" }} />
              <div style={{ flex: 1, height: 3, borderRadius: 2, background: step >= 2 ? "var(--accent)" : "var(--line)" }} />
            </div>
          )}
        </div>

        {/* Body */}
        <div style={{ padding: "28px clamp(24px, 4vw, 40px) 32px" }}>
          {sent ? (
            <div style={{ paddingBlock: 12 }}>
              <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center", marginBottom: 20 }}>
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
              </div>
              <h4 style={{ fontSize: 28, color: "var(--ink)", letterSpacing: "-0.02em", marginBottom: 10 }}>Application received.</h4>
              <p style={{ color: "var(--ink-3)", marginBottom: 8 }}>Thanks {data.name?.split(" ")[0] || "—"}. We've logged your application for <strong style={{ color: "var(--ink)" }}>{job.title}</strong>.</p>
              <p style={{ color: "var(--ink-3)", marginBottom: 24, fontSize: 14 }}>
                Our talent team reviews every application. If there's a fit, we'll reach out on <strong style={{ color: "var(--ink)" }}>{data.email || "your email"}</strong> within 5 working days.
              </p>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                <button className="btn btn-primary" onClick={onClose}>Close</button>
                <button className="btn btn-ghost" onClick={() => { setSent(false); setStep(1); setData({ name: "", email: "", phone: "", linkedin: "", experience: "", noticePeriod: "", cover: "", resumeFileName: "" }); }}>Submit another</button>
              </div>
            </div>
          ) : step === 1 ? (
            <form onSubmit={next} style={{ display: "grid", gap: 16 }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="apply-row">
                <div className="form-field">
                  <label>Full name *</label>
                  <input type="text" value={data.name} onChange={(e) => set("name", e.target.value)} placeholder="Anika Rao" required autoFocus />
                </div>
                <div className="form-field">
                  <label>Phone *</label>
                  <input type="tel" value={data.phone} onChange={(e) => set("phone", e.target.value)} placeholder="+91 98xxx xxxxx" required />
                </div>
              </div>
              <div className="form-field">
                <label>Email *</label>
                <input type="email" value={data.email} onChange={(e) => set("email", e.target.value)} placeholder="you@example.com" required />
              </div>
              <div className="form-field">
                <label>LinkedIn / Portfolio (optional)</label>
                <input type="url" value={data.linkedin} onChange={(e) => set("linkedin", e.target.value)} placeholder="https://linkedin.com/in/yourname" />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="apply-row">
                <div className="form-field">
                  <label>Years of experience</label>
                  <select value={data.experience} onChange={(e) => set("experience", e.target.value)}>
                    <option value="">Select</option>
                    <option>Fresher</option>
                    <option>0–1 years</option>
                    <option>1–3 years</option>
                    <option>3–5 years</option>
                    <option>5+ years</option>
                  </select>
                </div>
                <div className="form-field">
                  <label>Notice period</label>
                  <select value={data.noticePeriod} onChange={(e) => set("noticePeriod", e.target.value)}>
                    <option value="">Select</option>
                    <option>Immediate</option>
                    <option>15 days</option>
                    <option>30 days</option>
                    <option>60 days</option>
                    <option>90 days</option>
                  </select>
                </div>
              </div>
              <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 8 }}>
                <button type="submit" className="btn btn-primary">
                  Continue
                  <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </button>
              </div>
            </form>
          ) : (
            <form onSubmit={submit} style={{ display: "grid", gap: 16 }}>
              <div className="form-field">
                <label>Resume / CV (PDF, DOC) *</label>
                <label
                  htmlFor="apply-resume"
                  style={{
                    border: "2px dashed var(--line-strong)",
                    borderRadius: "var(--radius-md)",
                    padding: 20,
                    cursor: "pointer",
                    display: "flex",
                    alignItems: "center",
                    gap: 14,
                    background: "var(--bg-soft)",
                    transition: "border-color 0.2s, background 0.2s",
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--ink)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line-strong)"; }}
                >
                  <div style={{ width: 44, height: 44, borderRadius: 10, background: data.resumeFileName ? "var(--accent-soft)" : "var(--bg)", color: data.resumeFileName ? "var(--accent)" : "var(--ink-3)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 17V5M5 12l7-7 7 7M5 21h14"/></svg>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 500, color: "var(--ink)", fontSize: 14, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                      {data.resumeFileName || "Click to upload your resume"}
                    </div>
                    <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 2 }}>
                      PDF · DOC · DOCX · up to 5 MB
                    </div>
                  </div>
                  {data.resumeFileName && (
                    <button
                      type="button"
                      onClick={(e) => { e.preventDefault(); set("resumeFileName", ""); }}
                      style={{ background: "transparent", border: "none", color: "var(--ink-3)", cursor: "pointer", padding: 6 }}
                      aria-label="Remove resume"
                    >
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
                    </button>
                  )}
                  <input
                    id="apply-resume"
                    type="file"
                    accept=".pdf,.doc,.docx"
                    style={{ display: "none" }}
                    onChange={(e) => {
                      const f = e.target.files?.[0];
                      if (f) set("resumeFileName", f.name);
                    }}
                  />
                </label>
              </div>

              <div className="form-field">
                <label>Cover note (optional)</label>
                <textarea
                  value={data.cover}
                  onChange={(e) => set("cover", e.target.value)}
                  placeholder={`A quick note on why ${job.title} at PrintBala is right for you…`}
                  style={{ minHeight: 120 }}
                />
              </div>

              <div style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 13, color: "var(--ink-3)", padding: "8px 0" }}>
                <input type="checkbox" required style={{ width: 18, height: 18, accentColor: "var(--accent)" }} id="apply-consent" />
                <label htmlFor="apply-consent" style={{ fontFamily: "var(--font-body)", letterSpacing: 0, textTransform: "none", color: "var(--ink-3)", fontSize: 13 }}>
                  I agree PrintBala may contact me about this and similar roles.
                </label>
              </div>

              <div style={{ display: "flex", justifyContent: "space-between", gap: 10, marginTop: 4, flexWrap: "wrap" }}>
                <button type="button" className="btn btn-ghost" onClick={() => setStep(1)}>← Back</button>
                <button type="submit" className="btn btn-primary" disabled={!data.resumeFileName} style={{ opacity: data.resumeFileName ? 1 : 0.5, cursor: data.resumeFileName ? "pointer" : "not-allowed" }}>
                  Submit application
                  <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </button>
              </div>
            </form>
          )}
        </div>
      </div>

      <style>{`
        @keyframes applyFade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes applyRise {
          from { opacity: 0; transform: translateY(24px) scale(0.97); }
          to { opacity: 1; transform: none; }
        }
        @media (max-width: 600px) {
          .apply-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

/* ============================================================
   CONTACT
============================================================ */
function Contact() {
  const [sent, setSent] = useStateC(false);

  return (
    <main>
      <header className="page-header">
        <div className="container">
          <div className="crumbs reveal">Home / Contact</div>
          <TextReveal as="h1">Let's talk print.</TextReveal>
          <p className="lede reveal" data-delay="3">
            Callback request, partnership query, press onboarding, careers — pick your lane and we'll get back within 24 hours.
          </p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <div className="contact-grid">
            <div className="reveal">
              <div className="eyebrow" style={{ marginBottom: 24 }}>Reach us</div>
              <h2 style={{ fontSize: 44, marginBottom: 32, letterSpacing: "-0.03em" }}>Drop us a line.</h2>

              <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
                <ContactBlock
                  label="HQ — Etawah"
                  body={<>Mitrapuram Shastri Colony<br/>Bharthana Road<br/>Etawah, Uttar Pradesh 206001</>}
                />
                <ContactBlock
                  label="Email"
                  body={<a href="mailto:contact@printbala.com" style={{ color: "var(--ink)", borderBottom: "1px solid var(--line)" }}>contact@printbala.com</a>}
                />
                <ContactBlock
                  label="Phone"
                  body={<a href="tel:+918077996040" style={{ color: "var(--ink)", borderBottom: "1px solid var(--line)" }}>+91 80779 96040</a>}
                />
                <ContactBlock
                  label="Hours"
                  body={<>Mon – Sat · 9:30 am – 7:00 pm IST<br/>Closed on Sundays and public holidays</>}
                />
              </div>
            </div>

            <div className="reveal" data-delay="2">
              <div style={{ background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", padding: "clamp(28px, 4vw, 48px)" }}>
                {!sent ? (
                  <>
                    <h3 style={{ fontSize: 28, color: "var(--ink)", marginBottom: 8, letterSpacing: "-0.02em" }}>Send a message</h3>
                    <p style={{ color: "var(--ink-3)", marginBottom: 28, fontSize: 15 }}>We respond within one business day.</p>

                    <form className="form-row" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                        <div className="form-field">
                          <label>Your name</label>
                          <input type="text" placeholder="Anika Rao" required />
                        </div>
                        <div className="form-field">
                          <label>Company</label>
                          <input type="text" placeholder="Acme Inc." />
                        </div>
                      </div>
                      <div className="form-field">
                        <label>Email</label>
                        <input type="email" placeholder="you@company.com" required />
                      </div>
                      <div className="form-field">
                        <label>I'm interested in</label>
                        <select>
                          <option>Request a callback</option>
                          <option>Becoming a press partner</option>
                          <option>Bulk B2B onboarding</option>
                          <option>Press / media</option>
                          <option>Careers</option>
                          <option>Something else</option>
                        </select>
                      </div>
                      <div className="form-field">
                        <label>Message</label>
                        <textarea placeholder="A quick note about your project, volume, and timeline…"></textarea>
                      </div>
                      <button type="submit" className="btn btn-primary" style={{ marginTop: 8, justifySelf: "start" }}>
                        Send message
                        <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                      </button>
                    </form>
                  </>
                ) : (
                  <div style={{ padding: "40px 0" }}>
                    <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center", marginBottom: 24 }}>
                      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                    </div>
                    <h3 style={{ fontSize: 32, color: "var(--ink)", letterSpacing: "-0.02em", marginBottom: 8 }}>Message sent.</h3>
                    <p style={{ color: "var(--ink-3)", marginBottom: 28 }}>Thanks — someone from our team will get back to you within one business day.</p>
                    <button className="btn btn-ghost" onClick={() => setSent(false)}>Send another</button>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="reveal" style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--line)", aspectRatio: "16/9", position: "relative", background: "var(--bg-soft)" }}>
            <iframe
              title="PrintBala HQ — Etawah"
              src="https://www.openstreetmap.org/export/embed.html?bbox=79.000%2C26.760%2C79.060%2C26.795&layer=mapnik&marker=26.7770%2C79.0250"
              width="100%"
              height="100%"
              style={{ border: 0, display: "block", position: "absolute", inset: 0 }}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
            <div style={{ position: "absolute", top: 16, left: 16, background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: "var(--radius-md)", padding: "12px 16px", maxWidth: 280, boxShadow: "var(--shadow-2)" }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--accent)", marginBottom: 4 }}>● PRINTBALA HQ</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, color: "var(--ink)", fontSize: 15, lineHeight: 1.3 }}>Mitrapuram Shastri Colony</div>
              <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>Bharthana Road, Etawah · UP 206001</div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 12, marginTop: 16, flexWrap: "wrap" }} className="reveal">
            <a
              href="https://www.google.com/maps/search/?api=1&query=Mitrapuram+Shastri+Colony+Bharthana+Road+Etawah+206001"
              target="_blank"
              rel="noopener"
              className="btn btn-ghost"
            >
              Open in Google Maps
              <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
            </a>
            <a
              href="https://www.openstreetmap.org/?mlat=26.7770&mlon=79.0250#map=15/26.7770/79.0250"
              target="_blank"
              rel="noopener"
              className="btn btn-ghost"
            >
              View on OpenStreetMap
            </a>
            <a href="tel:+918077996040" className="btn btn-ghost">Call us · +91 80779 96040</a>
          </div>
        </div>
      </section>
    </main>
  );
}

function ContactBlock({ label, body }) {
  return (
    <div style={{ borderTop: "1px solid var(--line)", paddingTop: 18 }}>
      <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 6 }}>{label}</div>
      <div style={{ color: "var(--ink)", fontSize: 17, lineHeight: 1.5 }}>{body}</div>
    </div>
  );
}

/* ============================================================
   FAQ
============================================================ */
function FAQ() {
  const groups = [
    {
      g: "Orders",
      items: [
        { q: "What's the minimum order quantity?", a: "There's no minimum on most products — order a single card or 50,000 cards. We accept both single B2C orders and bulk B2B runs." },
        { q: "How long does delivery take?", a: "Same-day for metros if confirmed before 11am. 48 hours for Tier-1 cities. 72 hours pan-India. Bulk runs are scheduled on a per-job basis after a callback." },
        { q: "Can I see a proof before printing?", a: "Yes. Digital proofs are free on every order. Physical hard proofs are available on bulk runs." },
        { q: "What file formats do you accept?", a: "PDF (preferred), AI, PSD, TIFF, and high-res PNG. We'll run prepress checks automatically and flag any issues before going to print." },
      ],
    },
    {
      g: "Ordering & quotes",
      items: [
        { q: "How do I get a quote?", a: "All quotes are given over a quick call. Use the 'Request a callback' flow on the Services page or send us your number on the Contact page — we'll call back within an hour during office hours." },
        { q: "Do you serve individuals (B2C) or only businesses?", a: "Both. B2B orders are handled by our sales team. B2C orders are taken by phone — same number, same speed. Tell us what you need on the callback form." },
        { q: "Do you offer GST invoicing?", a: "Yes. We're registered for GST and provide tax-compliant invoices for all B2B orders." },
      ],
    },
    {
      g: "Press partners",
      items: [
        { q: "How do I list my press on PrintBala?", a: "Visit our Partners page or email join@printbala.com. We verify equipment, finishing capability, and references before listing." },
        { q: "How are partner presses paid?", a: "Payment within 7 days of job completion and QC sign-off. Direct bank transfer." },
        { q: "What kinds of presses do you onboard?", a: "Offset (1, 2, 4, 5, 6 colour), HP Indigo digital, large-format inkjet, packaging (flexo, gravure), and finishing (UV, foil, die-cut, binding)." },
      ],
    },
    {
      g: "Quality & SLA",
      items: [
        { q: "What happens if my order has defects?", a: "We reprint at our cost, no questions asked, within 7 days of dispatch. Our defect rate is under 0.4% — we take this seriously." },
        { q: "Can I get a same-day rush job?", a: "Yes, for metros (Mumbai, Delhi NCR, Bengaluru, Chennai). Same-day rush adds 30% to the standard rate." },
      ],
    },
  ];

  return (
    <main>
      <header className="page-header">
        <div className="container">
          <div className="crumbs reveal">Home / FAQ</div>
          <TextReveal as="h1">Questions, answered.</TextReveal>
          <p className="lede reveal" data-delay="3">
            If you don't find what you need here, our team is one email away.
          </p>
        </div>
      </header>

      <section className="section">
        <div className="container" style={{ maxWidth: 980 }}>
          {groups.map((group, gi) => (
            <div key={group.g} style={{ marginBottom: 64 }}>
              <h2 className="reveal" style={{ fontSize: 32, color: "var(--ink)", marginBottom: 8, letterSpacing: "-0.02em" }}>{group.g}</h2>
              <div className="faq">
                {group.items.map((item, i) => (
                  <FAQItem key={i} q={item.q} a={item.a} delay={(i % 3) + 1} />
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

function FAQItem({ q, a, delay }) {
  const [open, setOpen] = useStateC(false);
  return (
    <div className="reveal" data-delay={delay}>
      <div className={`faq-item ${open ? "open" : ""}`} onClick={() => setOpen(!open)}>
        <div className="faq-q">
          <span>{q}</span>
          <span className="toggle">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 5v14M5 12h14"/></svg>
          </span>
        </div>
        <div className="faq-a"><p style={{ marginTop: 0 }}>{a}</p></div>
      </div>
    </div>
  );
}

/* ============================================================
   PARTNERS / PRESS KIT
============================================================ */
function Partners({ setRoute }) {
  const kits = [
    { t: "Brand guidelines", s: "PDF · 8.4 MB", img: "assets/products/digitalpaper.png" },
    { t: "Logo pack (SVG, PNG)", s: "ZIP · 1.2 MB", img: "assets/products/canopy.png" },
    { t: "Press photography", s: "ZIP · 124 MB", img: "assets/products/sample.jpg" },
    { t: "Fact sheet 2026", s: "PDF · 1.6 MB", img: "assets/features-1.png" },
    { t: "Founder bios", s: "PDF · 0.9 MB", img: "assets/team/PratapSingh.png" },
    { t: "Product imagery", s: "ZIP · 86 MB", img: "assets/products/pen.png" },
  ];
  const coverage = [
    { p: "YourStory", q: "Etawah's print revolution: how PrintBala turned a small-town press into a pan-India platform.", d: "Mar 2026" },
    { p: "ET Tech", q: "PrintBala raises ₹140Cr Series B to scale its press-partner network.", d: "Feb 2026" },
    { p: "Mint", q: "Why every printer in India wants to be on PrintBala's marketplace.", d: "Nov 2025" },
    { p: "Forbes India", q: "30 Under 30: PrintBala's founder on building infrastructure from a Tier-3 town.", d: "Sep 2025" },
    { p: "Inc42", q: "Print-on-demand SaaS PrintBala crosses 1,000 press partners across 28 states.", d: "Jun 2025" },
  ];

  return (
    <main>
      <header className="page-header">
        <div className="container">
          <div className="crumbs reveal">Home / Partners & Press</div>
          <TextReveal as="h1">Press kit & partner programmes.</TextReveal>
          <p className="lede reveal" data-delay="3">
            Resources for journalists, partners, investors — and anyone writing about the print industry in India.
          </p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <SectionHead eyebrow="Become a partner" title="Two ways to join the engine." sub="" />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="partner-grid">
            {[
              { e: "01", t: "Press partner", b: "List your press on the PrintBala marketplace. Get nationwide order flow on day one, paid in 7 days, no platform fees during your first 90 days.", cta: "Apply to onboard" },
              { e: "02", t: "Reseller partner", b: "Agencies, marketing teams, and event firms — re-sell PrintBala services to your clients with white-label dispatch.", cta: "Talk to partnerships" },
            ].map((c, i) => (
              <div key={c.t} className="reveal" data-delay={i + 1} style={{ background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", padding: "clamp(32px, 4vw, 56px)", display: "flex", flexDirection: "column", gap: 20, minHeight: 320 }}>
                <div className="mono" style={{ fontSize: 12, color: "var(--accent)", letterSpacing: "0.2em" }}>{c.e} / 02</div>
                <h3 style={{ fontSize: 32, color: "var(--ink)", letterSpacing: "-0.02em" }}>{c.t}</h3>
                <p style={{ color: "var(--ink-3)", flex: 1 }}>{c.b}</p>
                <button className="btn btn-primary" style={{ alignSelf: "flex-start" }} onClick={() => { setRoute("contact"); window.scrollTo(0, 0); }}>
                  {c.cta}
                  <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </button>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 800px) { .partner-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-soft)" }}>
        <div className="container">
          <SectionHead eyebrow="Press kit" title="Downloads for journalists." sub="Logos, photography, brand guidelines, and the latest fact sheet. Updated quarterly." />
          <div className="kit-grid">
            {kits.map((k, i) => (
              <div key={k.t} className="kit reveal" data-delay={(i % 3) + 1}>
                <div className="img" style={{ overflow: "hidden" }}><Img src={k.img} alt={k.t} /></div>
                <div className="body">
                  <div>
                    <h4>{k.t}</h4>
                    <div className="size">{k.s}</div>
                  </div>
                  <button className="btn btn-ghost" style={{ padding: "8px 16px", fontSize: 13 }}>Download ↓</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead eyebrow="In the press" title="Recent coverage." sub="" />
          <div className="press-list">
            {coverage.map((c, i) => (
              <div key={i} className="press-row reveal" data-delay={(i % 3) + 1}>
                <div className="pub">{c.p}</div>
                <div className="quote">"{c.q}"</div>
                <div className="date">{c.d}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 40 }} className="reveal">
            <p style={{ color: "var(--ink-3)" }}>Media enquiries: <a href="mailto:press@printbala.com" style={{ color: "var(--ink)", borderBottom: "1px solid var(--line)" }}>press@printbala.com</a></p>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Careers, Contact, FAQ, Partners });