// Valicen — interior pages: Services, About, Case studies, Contact

// ============================================================
// SERVICES
// ============================================================
function ServicesPage({ go }) {
  useReveal();
  React.useEffect(() => {window.lucide && lucide.createIcons();});
  const svcs = [
  { icon: "shield-check", title: "Cybersecurity", art: "security", body: "Always-on protection built around your business. We monitor for threats, respond fast, and put the right controls in place so you're secure by default — not after something goes wrong.",
    points: ["24/7 threat monitoring & automated response", "Endpoint detection & response (EDR)", "Email security & phishing defense", "Security awareness training"] },
  { icon: "network", title: "Networking", art: "network", body: "The backbone everything else runs on. We design, install, and manage fast, secure networks — structured cabling, fiber, switching, firewalls, and wireless — so your sites stay connected and protected, on-site and across the globe.",
    points: ["Structured cabling — copper & fiber", "Switching, routing & firewalls", "Secure Wi-Fi & wireless coverage", "Multi-site & global connectivity"] },
  { icon: "server", title: "Data center & servers", art: "infra", body: "Resilient, performant infrastructure designed, run, and monitored by us. Uptime stops being your problem — and performance stops being a guessing game.",
    points: ["Server & virtualization", "Storage & data architecture", "Proactive monitoring & alerting", "Capacity & performance planning"] },
  { icon: "monitor-smartphone", title: "Managed workstations", art: "devices", body: "Every device your team uses — patched, protected, and supported. We handle setup, updates, and the day-to-day so your people stay productive and you stop fielding IT questions.",
    points: ["Device provisioning & onboarding", "Automated patching & updates", "Help desk your team actually likes", "Asset & license management"] },
  { icon: "cloud", title: "Cloud services", art: "cloud", body: "From migration to day-two operations, we right-size your cloud — Microsoft 365, Azure, and the tools you run on — then bring practical AI and automation into your workflows to remove busywork.",
    points: ["Microsoft 365 & Azure management", "Cloud migration & modernization", "AI-augmented workflows & automation", "Secure AI tooling & guardrails"] },
  { icon: "database-backup", title: "Data protection", art: "backup", body: "Backup, recovery, and continuity planning so your data survives anything — hardware failure, ransomware, or human error — and so does your business.",
    points: ["Automated backup & verification", "Disaster recovery planning", "Business continuity testing", "Ransomware recovery readiness"] }];

  return (
    <main className="page-enter">
      <section className="phero">
        <div className="wrap">
          <div className="eyebrow reveal">Services</div>
          <h1 className="reveal">One team for the technology your business runs on.</h1>
          <p className="reveal">From workstations to data center to cloud — comprehensive IT and cybersecurity, secured at every layer. Here's how we keep you protected, efficient, and ready for what's next.</p>
        </div>
      </section>
      <section className="section" style={{ paddingTop: 40 }}>
        <div className="wrap">
          {svcs.map((s) =>
          <div className="svc-row reveal" key={s.title}>
              <div>
                <div className="ico"><i data-lucide={s.icon}></i></div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
                <ul className="svc-list">
                  {s.points.map((p) => <li key={p}><i data-lucide="check"></i>{p}</li>)}
                </ul>
                <a className="svc-seeall" href="#" onClick={(e) => { e.preventDefault(); go("samples"); }}>See it all in practice<i data-lucide="arrow-right"></i></a>
              </div>
              <div className="svc-art netart">
                <ServiceArt kind={s.art} />
              </div>
            </div>
          )}
        </div>
      </section>
      <CTA go={go} />
    </main>);

}

// ============================================================
// ABOUT
// ============================================================
function AboutPage({ go }) {
  useReveal();
  React.useEffect(() => {window.lucide && lucide.createIcons();});
  const values = [
  { icon: "eye", title: "Transparent", body: "No jargon dumps, no surprises. We explain the why in plain language and show our work." },
  { icon: "shield", title: "Secure by default", body: "Protection isn't an add-on. It's built into everything we design and run for you." },
  { icon: "heart-handshake", title: "On your side", body: "We measure success by your peace of mind — not by tickets closed or hours billed." }];

  const team = [
  { n: "David S.", r: "Founder & Engineer", i: "DS", img: "assets/team-david-saunders.jpg" },
  { n: "Priya A.", r: "Head of Security", i: "PA" },
  { n: "Marcus L.", r: "Director of Client Success", i: "ML" },
  { n: "Elena S.", r: "Cloud & Infrastructure Lead", i: "ES" }];

  return (
    <main className="page-enter">
      <section className="phero">
        <div className="wrap">
          <div className="eyebrow reveal">About Valicen™</div>
          <h1 className="reveal">The invisible security blanket for businesses in the region.</h1>
          <p className="reveal">We started Valicen™ because small businesses deserve the same calm, expert IT that big enterprises take for granted — without the complexity, the fear-based sales, or the surprise invoices.</p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 56 }}>
        <div className="wrap">
          <div className="about-lead">
            <div className="body reveal">
              <p>For too many businesses, technology is a source of stress — something that breaks at the worst time and speaks a language nobody on the team understands. We think that's backwards.</p>
              <p>Valicen™ is a managed services provider, cybersecurity-infused, built to be the partner who has already handled the thing you're worried about. We monitor quietly in the background, harden every layer, and pick up the phone when you need us — so technology becomes a sustainable advantage instead of a liability.</p>
              <p>We're local, we're senior, and we're in it for the long run. That's why 97% of our clients are still with us year over year.</p>
            </div>
            <div className="about-stats reveal">
              <div className="about-stat"><div className="num"><CountUp value={200} suffix="+" /></div><div className="lab">organizations served</div></div>
              <div className="about-stat"><div className="num"><CountUp value={97} suffix="%" /></div><div className="lab">client retention</div></div>
              <div className="about-stat"><div className="num"><CountUp value={1} prefix="<" suffix=" hour" /></div><div className="lab">guaranteed response</div></div>
              <div className="about-stat"><div className="num"><CountUp value={15} suffix="yr" /></div><div className="lab">in business</div></div>
            </div>
          </div>
        </div>
      </section>

      <section className="section alt">
        <div className="wrap">
          <div className="sec-head reveal">
            <div className="eyebrow">What we stand for</div>
            <h2>Calm, expert, and on your side.</h2>
          </div>
          <div className="values-grid">
            {values.map((v) =>
            <div className="value reveal" key={v.title}>
                <div className="ico"><i data-lucide={v.icon}></i></div>
                <h4>{v.title}</h4>
                <p>{v.body}</p>
              </div>
            )}
          </div>
          <div className="about-pledge reveal">
            <div>
              <h4>We put it in writing.</h4>
              <p>Ten commitments — on ownership, sales incentives, pricing, your right to leave, and more — published for anyone to read.</p>
            </div>
            <button className="btn btn-dark" onClick={() => go("commitments")}>How we do business <i data-lucide="arrow-right"></i></button>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="sec-head reveal" style={{ maxWidth: "none" }}>
            <div className="eyebrow">The team</div>
            <h2>Senior engineers, not a call center.</h2>
            <p>When you contact Valicen™, you reach someone who knows your environment by name. Meet our tower leads:</p>
          </div>
          <div className="team-grid">
            {team.map((m) =>
            <div className="member reveal" key={m.n}>
                <div className="photo"><div className="grid-lines"></div>{m.img ? <img src={m.img} alt={m.n} /> : m.i}</div>
                <b>{m.n}</b>
                <span>{m.r}</span>
              </div>
            )}
          </div>
        </div>
      </section>
      <CTA go={go} />
    </main>);

}

// ============================================================
// CASE STUDIES
// ============================================================
function WorkPage({ go }) {
  useReveal();
  React.useEffect(() => {window.lucide && lucide.createIcons();});
  const cases = [
  { tag: "Cybersecurity", grad: "var(--gradient-brand)", img: "cs-ransomware", imgSrc: "assets/cs-ransomware.jpg", title: "Stopping ransomware before it started",
    body: "An automotive industry company needed to ensure 0% downtime and 100% EDI transmission success rate to Ford, GM, and Chrysler — regardless of risk source. We protected them through a thoughtful combination of business continuity planning, hardened infrastructure, and cybersecurity tools.",
    metrics: [["0%", "downtime"], ["100%", "endpoints secured"], ["0", "breaches"]] },
  { tag: "Cloud migration", grad: "var(--gradient-brand-soft)", img: "cs-cloud", imgSrc: "assets/cs-cloud.jpg", credit: "Actual client craftsmanship", title: "A remodeling company moves to the cloud — quietly",
    body: "Two states, zero downtime. We migrated a fifty-year-old building and remodeling organization to Microsoft 365 and Azure without interrupting a single job, employee, or customer.",
    metrics: [["2", "states migrated"], ["0 bytes", "data lost"], ["31%", "lower IT spend"]] },
  { tag: "Managed services", grad: "linear-gradient(135deg,#0B2A50,#01ADB4)", img: "cs-fastener", imgSrc: "assets/cs-fastener.jpg", credit: "Actual client photo", title: "Modernizing a fastener manufacturer",
    body: "An expanding fastener company needed help with updated networking. We installed an entirely new fiber optic network at their 900,000 sqft facility, refreshed plant floor workstations, and ushered in a new ERP.",
    metrics: [["900k", "sq ft connected"], ["100%", "new network topology"], ["8", "new fiber runs"]] },
  { tag: "Infrastructure", grad: "linear-gradient(135deg,#013C40,#2DC4CA)", img: "cs-china", imgSrc: "assets/cs-china.jpg", credit: "Actual client building", title: "Expanding to China",
    body: "When a Midwestern hardware manufacturer opened a greenfield facility near Shanghai, they needed it running from day one. We stood up everything — workstations, network, security cameras, and global connectivity — so they could compete in a new market without missing a beat.",
    metrics: [["1", "greenfield facility"], ["2", "continents connected"], ["100%", "operational IT in two weeks"]] }];

  return (
    <main className="page-enter">
      <section className="phero">
        <div className="wrap">
          <div className="eyebrow reveal">Case studies</div>
          <h1 className="reveal">Real businesses, quickly improved; quietly protected.</h1>
          <p className="reveal">We don't talk about most of our work — that's the point. Here are a few stories our clients were happy for us to share.</p>
        </div>
      </section>
      <section className="section" style={{ paddingTop: 48 }}>
        <div className="wrap">
          <div className="cs-grid">
            {cases.map((c) => <article className="cs reveal" key={c.title}>
                <div className={"top netart" + (c.img ? " has-photo" : "")} style={{ background: c.grad }}>
                  {c.img ?
                  <React.Fragment>
                      <image-slot id={c.img} shape="rect" fit="cover" src={c.imgSrc}
                    placeholder="Drop an onsite photo"
                    style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}></image-slot>
                      <span className="scrim"></span>
                      <span className="photo-credit"><i data-lucide="camera"></i>{c.credit || "Actual client project"}</span>
                    </React.Fragment> :

                  <React.Fragment>
                      <div className="grid-lines"></div>
                      <span className="node" style={{ top: "30%", left: "78%" }}></span>
                    </React.Fragment>
                  }
                  <span className="tag">{c.tag}</span>
                </div>
                <div className="body">
                  <h3>{c.title}</h3>
                  <p>{c.body}</p>
                  <div className="metrics">
                    {c.metrics.map(([v, k]) =>
                    <div className="m" key={k}><div className="v">{v}</div><div className="k">{k}</div></div>
                    )}
                  </div>
                </div>
              </article>
            )}
          </div>
        </div>
      </section>
      <CTA go={go} />
    </main>);

}

// ============================================================
// CONTACT (working form with validation)
// ============================================================
function ContactPage() {
  useReveal();
  React.useEffect(() => {window.lucide && lucide.createIcons();});
  const interests = ["Cybersecurity", "Managed IT", "Cloud", "Data protection", "Not sure yet"];
  const [form, setForm] = React.useState({ name: "", email: "", company: "", interest: "Managed IT", message: "" });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [sendErr, setSendErr] = React.useState(false);
  const set = (k, v) => {setForm((f) => ({ ...f, [k]: v }));setErrors((e) => ({ ...e, [k]: null }));};
  const submit = async (e) => {
    e.preventDefault();
    const err = {};
    if (!form.name.trim()) err.name = "Please tell us your name.";
    if (!form.email.trim()) err.email = "We need an email to reach you.";else
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) err.email = "That email doesn't look right.";
    if (!form.message.trim()) err.message = "A quick note helps us prepare.";
    setErrors(err);
    if (Object.keys(err).length !== 0) return;
    // Deliver to hello@valicen.com via FormSubmit (no backend needed on a
    // static host). If the network call fails, fall back to the user's own
    // mail client with everything pre-filled.
    setSending(true);
    setSendErr(false);
    try {
      const res = await fetch("https://formsubmit.co/ajax/hello@valicen.com", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({
          name: form.name, email: form.email, company: form.company,
          interest: form.interest, message: form.message,
          _subject: "Website inquiry \u2014 " + form.name
        })
      });
      if (!res.ok) throw new Error("send failed");
      setSent(true);
    } catch (_) {
      setSendErr(true);
    } finally {
      setSending(false);
    }
  };
  const mailtoFallback = "mailto:hello@valicen.com?subject=" + encodeURIComponent("Website inquiry \u2014 " + form.name) +
    "&body=" + encodeURIComponent(form.message + "\n\n\u2014 " + form.name + (form.company ? ", " + form.company : "") + "\n" + form.email);
  return (
    <main className="page-enter">
      <section className="phero">
        <div className="wrap">
          <div className="eyebrow reveal">Contact</div>
          <h1 className="reveal">Let's talk about what's keeping you up at night.</h1>
        </div>
      </section>
      <section className="section" style={{ paddingTop: 48 }}>
        <div className="wrap">
          <div className="contact-grid">
            <div className="contact-info reveal">
              <p className="lead">Tell us a little about your business. We'll spend an hour on it with you — no pitch, no obligation, just a clear, honest next step.</p>
              <div className="contact-item">
                <div className="ic"><i data-lucide="phone"></i></div>
                <div><b>Talk to an engineer</b><span>(555) 014-2200 · Mon–Fri, 8am–6pm</span></div>
              </div>
              <div className="contact-item">
                <div className="ic"><i data-lucide="mail"></i></div>
                <div><b>Email us</b><span>hello@valicen.com</span></div>
              </div>
              <div className="contact-item">
                <div className="ic"><i data-lucide="life-buoy"></i></div>
                <div><b>Existing client?</b><span>24/7 support line: (555) 014-2255</span></div>
              </div>
              <div className="contact-item">
                <div className="ic"><i data-lucide="map-pin"></i></div>
                <div><b>Visit</b><span>1400 Harbor View Dr, Suite 210</span></div>
              </div>
            </div>

            <div className="form-card reveal">
              {sent ?
              <div className="form-success">
                  <div className="badge"><i data-lucide="check"></i></div>
                  <h3>Thanks, {form.name.split(" ")[0] || "there"}.</h3>
                  <p>We've got your note and an engineer will reach out within one business day. Talk soon.</p>
                </div> :

              <form onSubmit={submit} noValidate>
                  <div className="field row2">
                    <div>
                      <label className="lab">Name</label>
                      <input className={"inp" + (errors.name ? " err" : "")} value={form.name}
                    onChange={(e) => set("name", e.target.value)} placeholder="Jordan Avery" />
                      {errors.name && <div className="err-msg"><i data-lucide="alert-circle"></i>{errors.name}</div>}
                    </div>
                    <div>
                      <label className="lab">Work email</label>
                      <input className={"inp" + (errors.email ? " err" : "")} value={form.email}
                    onChange={(e) => set("email", e.target.value)} placeholder="you@company.com" />
                      {errors.email && <div className="err-msg"><i data-lucide="alert-circle"></i>{errors.email}</div>}
                    </div>
                  </div>
                  <div className="field" style={{ marginTop: 17 }}>
                    <label className="lab">Company</label>
                    <input className="inp" value={form.company}
                  onChange={(e) => set("company", e.target.value)} placeholder="Company name" />
                  </div>
                  <div className="field">
                    <label className="lab">What can we help with?</label>
                    <div className="chips">
                      {interests.map((it) =>
                    <button type="button" key={it}
                    className={"chip-opt" + (form.interest === it ? " on" : "")}
                    onClick={() => set("interest", it)}>{it}</button>
                    )}
                    </div>
                  </div>
                  <div className="field">
                    <label className="lab">What's on your mind?</label>
                    <textarea className={"txt" + (errors.message ? " err" : "")} value={form.message}
                  onChange={(e) => set("message", e.target.value)}
                  placeholder="A sentence or two about your setup and what's worrying you."></textarea>
                    {errors.message && <div className="err-msg"><i data-lucide="alert-circle"></i>{errors.message}</div>}
                  </div>
                  <button type="submit" className="btn btn-primary btn-lg btn-block" disabled={sending}>{sending ? "Sending\u2026" : "Send message"} <i data-lucide="arrow-right"></i></button>
                  {sendErr &&
                  <div className="err-msg" style={{ marginTop: 12 }}><i data-lucide="alert-circle"></i>
                    Hmm, that didn't go through. <a href={mailtoFallback} style={{ textDecoration: "underline" }}>Email us directly</a> instead.
                  </div>
                  }
                  <p style={{ fontSize: 12.5, color: "var(--fg-3)", textAlign: "center", margin: "14px 0 0" }}>
                    We'll never share your details. Expect a reply within one business day.
                  </p>
                </form>
              }
            </div>
          </div>
        </div>
      </section>
    </main>);

}

// ============================================================
// PRIVACY POLICY
// ============================================================
function PrivacyPage({ go }) {
  useReveal();
  React.useEffect(() => { window.lucide && lucide.createIcons(); });
  const updated = "June 2026";
  return (
    <main className="page-enter">
      <section className="phero">
        <div className="wrap">
          <button className="legal-back reveal" onClick={() => go("home")}><i data-lucide="arrow-left"></i>Back to site</button>
          <div className="eyebrow reveal">Privacy</div>
          <h1 className="reveal">We collect what we need to serve you — and nothing else.</h1>
          <p className="reveal">No tracking for tracking's sake. No selling your data. No surprises. This page explains, in plain language, exactly what we keep and why.</p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 40 }}>
        <div className="wrap">
          <div className="legal reveal">
            <p className="legal-lead">Our promise is simple: <strong>we don't collect or sell any unnecessary information, period.</strong> The only information we collect is what's required to bill and service your account — and it is never shared, rented, or sold to anyone.</p>

            <h2>What we collect</h2>
            <p>We limit ourselves to the information we genuinely need to run your account and deliver our services:</p>
            <ul>
              <li><strong>Account &amp; billing details</strong> — your business name, the contacts you designate, and the billing information needed to invoice you and process payment.</li>
              <li><strong>Service information</strong> — the technical details required to monitor, support, secure, and maintain the systems we manage for you (for example, device inventories, configurations, tickets, and alerts).</li>
              <li><strong>Things you send us</strong> — messages, requests, and any information you choose to share when you contact us.</li>
            </ul>

            <h2>What we don't do</h2>
            <ul>
              <li><strong>We don't sell or rent your information.</strong> Not to advertisers, not to data brokers, not to anyone — ever.</li>
              <li><strong>We don't collect data we don't need.</strong> If it isn't required to bill or service your account, we don't want it.</li>
              <li><strong>We don't track you across the web</strong> or build advertising profiles. This website doesn't run third-party advertising or behavioral-tracking cookies.</li>
            </ul>

            <h2>How we use what we collect</h2>
            <p>Strictly to do our job: to invoice you, to operate and protect the systems you've entrusted to us, to respond when you reach out, and to meet our legal and contractual obligations. That's the whole list.</p>

            <h2>How we share it</h2>
            <p>Your information stays with us. We only disclose it in three narrow situations: (1) to trusted service providers who help us operate — such as our payment processor — and only the minimum they need to perform that function; (2) when you ask us to; or (3) when the law requires it. In every case, your data is never treated as a product to be sold.</p>

            <h2>How we protect it</h2>
            <p>Security is our trade. We safeguard your information with the same hardened, monitored, defense-in-depth practices we use to protect our clients — access controls, encryption where appropriate, and continuous monitoring.</p>

            <h2>How long we keep it</h2>
            <p>We retain information only as long as your account is active or as needed to provide services, meet legal and tax obligations, and resolve disputes. When it's no longer needed, we dispose of it securely.</p>

            <h2>Your choices</h2>
            <p>You can ask us what information we hold about your account, request a correction, or ask us to delete information we're no longer required to keep. Just reach out and we'll take care of it.</p>

            <h2>Questions</h2>
            <p>If anything here is unclear, or you'd like to make a request, contact us at <a href="mailto:legal@valicen.com">legal@valicen.com</a> and a real person will get back to you.</p>

            <p className="legal-updated">Last updated: {updated}</p>

            <div className="legal-cta">
              <button className="btn btn-primary" onClick={() => go("contact")}>Talk to us <i data-lucide="arrow-right"></i></button>
            </div>
          </div>
        </div>
      </section>
    </main>);

}

// ============================================================
// TERMS OF USE
// ============================================================
function TermsPage({ go }) {
  useReveal();
  React.useEffect(() => { window.lucide && lucide.createIcons(); });
  const updated = "June 2026";
  return (
    <main className="page-enter">
      <section className="phero">
        <div className="wrap">
          <button className="legal-back reveal" onClick={() => go("home")}><i data-lucide="arrow-left"></i>Back to site</button>
          <div className="eyebrow reveal">Terms</div>
          <h1 className="reveal">The ground rules — kept short and fair.</h1>
          <p className="reveal">These terms cover your use of this website. The actual work we do for you is governed by the service agreement we sign together — this page doesn't replace it.</p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 40 }}>
        <div className="wrap">
          <div className="legal reveal">
            <p className="legal-lead">By using this website, you agree to these terms. They're meant to be reasonable and readable — not a wall of fine print. If anything's unclear, <strong>just ask us.</strong></p>

            <h2>Using this site</h2>
            <p>You're welcome to browse, read, and get in touch. In return, we ask that you use the site lawfully and don't attempt to disrupt it, gain unauthorized access, scrape it at scale, or interfere with anyone else's use of it.</p>

            <h2>Our services are governed separately</h2>
            <p>This site describes what Valicen™ does, but it isn't an offer or a contract for services. Any engagement — managed services, security, cloud, infrastructure, or otherwise — is governed by a separate written services agreement between you and Valicen. Where that agreement and this page disagree, the signed agreement controls.</p>

            <h2>No guarantees from the website</h2>
            <p>We work to keep the information here accurate and current, but we provide the site "as is." Content may change without notice, and we don't warrant that it's complete, error-free, or always available. Nothing on this site is professional, legal, or security advice for your specific situation — for that, talk to us directly.</p>

            <h2>Intellectual property</h2>
            <p>The Valicen™ name, logo, brand, text, and design on this site belong to Valicen™ and are protected by law. You may not copy, reproduce, or reuse them without our written permission. Client names, photos, and project details shown here are published with permission and remain the property of their respective owners.</p>

            <h2>Links to other sites</h2>
            <p>We may link to third-party websites for convenience. We don't control those sites and aren't responsible for their content, practices, or privacy policies. Visiting them is at your own discretion.</p>

            <h2>Limitation of liability</h2>
            <p>To the fullest extent permitted by law, Valicen™ isn't liable for any indirect, incidental, or consequential damages arising from your use of this website. Again, this clause is about the website itself — the terms of our actual services live in your signed agreement.</p>

            <h2>Changes to these terms</h2>
            <p>We may update these terms from time to time. When we do, we'll revise the date below. Continuing to use the site after a change means you accept the updated terms.</p>

            <h2>Questions</h2>
            <p>If you have any questions about these terms, contact us at <a href="mailto:legal@valicen.com">legal@valicen.com</a> and a real person will get back to you.</p>

            <p className="legal-updated">Last updated: {updated}</p>

            <div className="legal-cta">
              <button className="btn btn-primary" onClick={() => go("contact")}>Talk to us <i data-lucide="arrow-right"></i></button>
            </div>
          </div>
        </div>
      </section>
    </main>);

}

// ============================================================
// DOWNLOADS — agreement templates (linked from the footer only)
// ============================================================
function DownloadsPage({ go }) {
  useReveal();
  React.useEffect(() => { window.lucide && lucide.createIcons(); });
  const docs = [
  {
    icon: "file-text",
    title: "Master Services Agreement",
    desc: "The umbrella agreement for every engagement \u2014 term, fees, confidentiality, data protection, warranties, and liability. Kept short and fair.",
    meta: "Template \u00b7 3 pages \u00b7 Version 1.1",
    base: "downloads/Valicen-MSA-Template"
  },
  {
    icon: "clipboard-list",
    title: "SOW \u2014 Managed Services",
    desc: "The ongoing engagement we fill in together \u2014 the services bundle, response-time targets, covered environment, and recurring fees.",
    meta: "Template \u00b7 3 pages \u00b7 Version 1.1",
    base: "downloads/Valicen-SOW-Template"
  },
  {
    icon: "drafting-compass",
    title: "SOW \u2014 Project",
    desc: "For bespoke, defined-scope work \u2014 migrations, buildouts, moves: deliverables, milestones, fees, and acceptance criteria.",
    meta: "Template \u00b7 3 pages \u00b7 Version 1.1",
    base: "downloads/Valicen-SOW-Project-Template"
  }];

  // True inside the Claude design preview (iframe / sandbox host) — file
  // downloads are only served by the real published site, so we say so
  // instead of letting the links look broken.
  const inDesigner = (function () {
    try {
      const h = window.location.hostname;
      return /claudeusercontent\.com$/.test(h) || /\.claude\.ai$/.test(h) || h === "localhost" || window.self !== window.top;
    } catch (e) { return true; }
  })();

  return (
    <main className="page-enter">
      <section className="phero">
        <div className="wrap">
          <button className="legal-back reveal" onClick={() => go("home")}><i data-lucide="arrow-left"></i>Back to site</button>
          <div className="eyebrow reveal">Downloads</div>
          <h1 className="reveal">Our standard agreements, up front.</h1>
          <p className="reveal">No mystery paperwork. These are the templates every Valicen™ engagement starts from — review them with your team or your counsel whenever you like. PDF to read; DOCX to redline.</p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 40 }}>
        <div className="wrap">
          {inDesigner &&
          <div className="dl-envnote reveal">
              <i data-lucide="info"></i>
              <span>You're viewing the design preview — these files are served by the live site, so the links won't download here. They work normally once the site is published.</span>
            </div>
          }
          <div className="dl-grid">
            {docs.map((d) =>
            <article key={d.title} className="dl-card reveal">
                <div className="dl-tile"><i data-lucide={d.icon}></i></div>
                <h3>{d.title}</h3>
                <p>{d.desc}</p>
                <div className="dl-meta">{d.meta}</div>
                <div className="dl-actions">
                  <a className="btn btn-dark btn-sm" href={d.base + ".pdf"} download><i data-lucide="download"></i>PDF</a>
                  <a className="btn btn-ghost btn-sm" href={d.base + ".docx"} download><i data-lucide="pen-line"></i>DOCX</a>
                  <a className="dl-preview" href={d.base + ".html"} target="_blank" rel="noopener">View in browser<i data-lucide="external-link"></i></a>
                </div>
              </article>
            )}
          </div>
          <p className="dl-note reveal">Templates are provided for review and discussion and aren't legal advice. The versions we sign together control — and we're glad to walk through every clause with you.</p>
        </div>
      </section>
    </main>);

}

// ============================================================
// COMMITMENTS — how we do business (linked from footer + About)
// ============================================================
function CommitmentsPage({ go }) {
  useReveal();
  React.useEffect(() => { window.lucide && lucide.createIcons(); });
  const items = [
  { t: "We answer to you, not a sales channel.", b: <span>No reseller quotas. No kickback-driven recommendations. Vendor incentives are everywhere in this industry — where they exist, we disclose them, and we recommend the tool we'd run ourselves. When the cheaper option is the right option, that's the one you'll hear about.</span> },
  { t: "Nobody owns us but us.", b: <span>No private equity, no outside investors, no debt-fueled roll-up machine. A lot of MSPs are quietly owned by funds with a three-year exit plan — and when your provider answers to a fund, you become the margin. Valicen is owned by the people who work here, and we answer to exactly one group: clients.</span> },
  { t: "Leaving us is easy. That's the point.", b: <span>Your passwords, admin accounts, licenses, and documentation are yours — kept current and handed over in full whenever you ask. No ransom, no hostage-taking at offboarding. An MSP that's hard to fire is holding leverage, not earning loyalty. We'd rather you stay because it works.</span> },
  { t: "Support never leaves the team. No offshoring, ever.", b: <span>No subcontracted call center on another continent, and no phone tree in front of it. Support is handled by the same engineers who build and run your environment — the person who answers probably knows your firewall by name, because they configured it.</span> },
  { t: "Every email gets a reply. From a person.", b: <span>You will never receive a “no-reply@” email from Valicen™. Every address we write from is one you can write back to, and every message gets an answer from a human — every email, every time, even when the answer is just “we're on it.”</span> },
  { t: "No fear-based selling.", b: <span>Security sold with scare tactics is just a different kind of scam. We quantify your actual risk, lay out options at honest price points, and let you decide. You'll never get a quote from us designed to frighten you into signing.</span> },
  { t: "When we get it wrong, you'll hear it from us first.", b: <span>Every provider makes mistakes; most bury them. If we cause an issue, we tell you plainly — what happened, what it affected, and what we're changing so it doesn't happen again. On our dime, not yours.</span> },
  { t: "Invoices you can predict.", b: <span>Your pricing lives in a signed SOW. Recurring fees change at most once a year, with sixty days' notice — it's written into <a href="#" onClick={(e) => { e.preventDefault(); go("downloads"); }}>our master agreement</a>, which is published on this site before we've ever met.</span> },
  { t: "We sell you what you need. Then we stop.", b: <span>If a zero-dollar configuration change solves your problem, that's our recommendation. Right-sized beats up-sized — an overbuilt stack is just cost and risk wearing a disguise.</span> },
  { t: "Your information is never for sale.", b: <span>We collect only what's needed to bill and service your account, and it is never sold, rented, or shared. Not to advertisers, not to “partners,” not to anyone. <a href="#" onClick={(e) => { e.preventDefault(); go("privacy"); }}>Our privacy policy</a> says it in one page of plain language.</span> }];

  return (
    <main className="page-enter">
      <section className="phero">
        <div className="wrap">
          <button className="legal-back reveal" onClick={() => go("home")}><i data-lucide="arrow-left"></i>Back to site</button>
          <div className="eyebrow reveal">Our commitments</div>
          <h1 className="reveal">Plenty of providers say “trust us.” We'd rather put it in writing.</h1>
          <p className="reveal">Managed IT means handing someone the keys to everything you own. That trust should be earned with structure, not slogans — so here is how Valicen™ does business, in ten commitments you can hold us to.</p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 32 }}>
        <div className="wrap">
          <div className="cmt-list">
            {items.map((c, i) =>
            <div className="cmt reveal" key={c.t}>
                <div className="num">{String(i + 1).padStart(2, "0")}</div>
                <div>
                  <h3>{c.t}</h3>
                  <p>{c.b}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 8, paddingBottom: 96 }}>
        <div className="wrap">
          <div className="cmt-close reveal">
            <div>
              <h3>Hold us to it.</h3>
              <p>If we ever fall short of any of these, say so — it goes to the owner, not a ticket queue.</p>
            </div>
            <div className="cmt-close-actions">
              <button className="btn btn-primary" onClick={() => go("contact")}>Talk to an engineer <i data-lucide="arrow-right"></i></button>
              <button className="btn btn-ghost-light" onClick={() => go("downloads")}>Read the agreements</button>
            </div>
          </div>
        </div>
      </section>
    </main>);

}

// ============================================================
// WORK SAMPLES — redacted real deliverables (linked from footer)
// ============================================================
function SamplesPage({ go }) {
  useReveal();
  React.useEffect(() => { window.lucide && lucide.createIcons(); });
  const inDesigner = (function () {
    try {
      const h = window.location.hostname;
      return /claudeusercontent\.com$/.test(h) || /\.claude\.ai$/.test(h) || h === "localhost" || window.self !== window.top;
    } catch (e) { return true; }
  })();
  const cats = [
  { h: "Architecture & strategy", items: [
    { icon: "network", t: "Network architecture proposal", d: "Global connectivity & security redesign for a five-region manufacturer \u2014 regional hub model, site classes, and a four-layer segmentation framework.", pages: 3, base: "samples/Valicen-Sample-Network-Architecture-Proposal" },
    { icon: "scale", t: "Technology decision matrix", d: "A SOX segregation-of-duties platform selection \u2014 weighted criteria, phased three-year costs, and the analysis that flipped the year-one answer.", pages: 2, base: "samples/Valicen-Sample-Technology-Decision-Matrix" }] },
  { h: "Security operations", items: [
    { icon: "siren", t: "Incident response test", d: "A hybrid tabletop + live-walkthrough exercise: breach scenario, minute-by-minute runbook, real partner escalations, and after-action reporting.", pages: 3, base: "samples/Valicen-Sample-Incident-Response-Test" },
    { icon: "list-checks", t: "SecOps control catalog", d: "Every control mapped to ISO 27002 and NIST CSF with owners, KPIs, and maturity ratings \u2014 plus the tracker that keeps firmware, licenses, and reviews honest.", pages: 2, base: "samples/Valicen-Sample-SecOps-Control-Catalog" }] },
  { h: "Documentation & diagrams", items: [
    { icon: "share-2", t: "Logical network diagram", d: "A real client site, redrawn: WAN circuits, firewalls, switching, and addressing \u2014 documentation any engineer can pick up cold.", pages: 1, base: "samples/Valicen-Sample-Logical-Network-Diagram" },
    { icon: "server", t: "Physical rack diagram", d: "As-built MDF documentation: every rack unit, role, and circuit annotated \u2014 including out-of-band console access and power protection.", pages: 1, base: "samples/Valicen-Sample-Physical-Rack-Diagram" }] },
  { h: "Process & governance", items: [
    { icon: "clipboard-check", t: "Project security worksheet", d: "The checklist that builds security into every project phase \u2014 proposal to closeout \u2014 deployed enterprise-wide at a global manufacturer.", pages: 2, base: "samples/Valicen-Sample-Project-Security-Worksheet" },
    { icon: "filter", t: "Tool selection SOP", d: "A seven-stage funnel that takes security-tool decisions from \u201cwe need something\u201d to a defensible, vendor-pressure-proof winner.", pages: 2, base: "samples/Valicen-Sample-Tool-Selection-SOP" }] }];

  return (
    <main className="page-enter">
      <section className="phero">
        <div className="wrap">
          <button className="legal-back reveal" onClick={() => go("home")}><i data-lucide="arrow-left"></i>Back to site</button>
          <div className="eyebrow reveal">Examples of our work</div>
          <h1 className="reveal">See the work before you buy it.</h1>
          <p className="reveal">Real deliverables from real engagements — redacted, never fabricated. Client names, hostnames, and serial numbers are removed, and every public IP is deliberately invalid (3xx). The thinking is untouched.</p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 28 }}>
        <div className="wrap">
          {inDesigner &&
          <div className="dl-envnote reveal">
              <i data-lucide="info"></i>
              <span>You're viewing the design preview — these files are served by the live site, so the links won't download here. They work normally once the site is published.</span>
            </div>
          }
          {cats.map((c) =>
          <div key={c.h} className="ws-cat">
              <div className="eyebrow reveal">{c.h}</div>
              <div className="ws-grid">
                {c.items.map((s) =>
              <article key={s.t} className="dl-card reveal">
                    <div className="dl-tile"><i data-lucide={s.icon}></i></div>
                    <h3>{s.t}</h3>
                    <p>{s.d}</p>
                    <div className="dl-meta">{"Redacted sample \u00b7 " + s.pages + (s.pages > 1 ? " pages" : " page")}</div>
                    <div className="dl-actions">
                      <a className="btn btn-dark btn-sm" href={s.base + ".pdf"} download><i data-lucide="download"></i>PDF</a>
                      <a className="dl-preview" href={s.base + ".html"} target="_blank" rel="noopener">View in browser<i data-lucide="external-link"></i></a>
                    </div>
                  </article>
              )}
              </div>
            </div>
          )}
          <p className="dl-note reveal">Every sample is shared with permission or fully de-identified. Want to see depth in a specific area — backup architecture, ERP security, OT networks? <a href="#" onClick={(e) => { e.preventDefault(); go("contact"); }} style={{ color: "var(--link)" }}>Ask us</a> — we'll walk you through comparable work.</p>
        </div>
      </section>
    </main>);

}

Object.assign(window, { ServicesPage, AboutPage, WorkPage, ContactPage, PrivacyPage, TermsPage, DownloadsPage, CommitmentsPage, SamplesPage });