// ============================================================
// Services, Case Studies, About, FAQ
// ============================================================

// ── Case studies index ─────────────────────────────────────────────
function CasesScreen({ onNav }) {
  return (
    <div className="section container">
      <Reveal>
        <div className="stack-md" style={{ marginBottom: 64, maxWidth: 880 }}>
          <div className="eyebrow">Case studies</div>
          <h1 className="t-display" style={{ margin: 0, fontSize: "clamp(2.5rem, 5.5vw, 5rem)" }}>
            Stores we've moved.
          </h1>
          <p style={{ fontSize: "1.2rem", lineHeight: 1.55, color: "var(--fg-2)", margin: 0 }}>
            A look at what a typical Aartisan migration looks like — the brief, the build, the result.
          </p>
        </div>
      </Reveal>

      <div className="stack-lg">
        {CASE_STUDIES.map((c, i) => {
          const bg = {
            blush: "var(--color-blush-200)",
            indigo: "var(--color-indigo-200)",
            mustard: "var(--color-sunshine-200)",
            walnut: "var(--color-walnut-200)",
          }[c.accent] || "var(--color-blush-200)";

          return (
            <Reveal key={c.id} delay={i * 80}>
              <div
                className="case-card"
                onClick={() => onNav("case:" + c.id)}
                role="link"
                style={{ transform: `rotate(${i % 2 === 0 ? -0.4 : 0.3}deg)` }}
              >
                <div className="case-card-body">
                  <div className="row" style={{ gap: 8 }}>
                    <span className="product-tag plain">{c.industry}</span>
                    <span className="product-tag">{c.from} → {c.to}</span>
                  </div>
                  <h2 style={{
                    fontFamily: "var(--font-display)",
                    fontWeight: 900, fontSize: "clamp(1.5rem, 2.4vw, 2.2rem)",
                    textTransform: "uppercase", letterSpacing: "-0.01em",
                    color: "var(--color-plum-900)",
                    margin: 0, lineHeight: 1.05,
                  }}>{c.headline}</h2>
                  <p style={{ color: "var(--fg-2)", lineHeight: 1.55, margin: 0 }}>{c.summary}</p>
                  <div style={{
                    display: "grid",
                    gridTemplateColumns: `repeat(${c.metrics.length}, 1fr)`,
                    gap: 16,
                    paddingTop: 16,
                    borderTop: "1px dashed var(--color-plum-300)",
                    marginTop: "auto",
                  }}>
                    {c.metrics.map((m, j) => (
                      <div key={j}>
                        <div style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "1.6rem", color: "var(--color-plum-700)", lineHeight: 1 }}>{m.num}</div>
                        <div style={{ fontSize: "0.7rem", color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 700, marginTop: 4 }}>{m.label}</div>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="case-card-thumb" style={{ background: bg, position: "relative" }}>
                  {c.monogram}
                  <div style={{ position: "absolute", top: 16, right: 16 }}>
                    <Postmark label={`migrated ${c.stamp || c.industry}`} date="aartisan" size={84} rotate={c.id.length % 2 === 0 ? -8 : 6} />
                  </div>
                </div>
              </div>
            </Reveal>
          );
        })}
      </div>

      <div className="section" style={{ paddingBottom: 0 }}>
        <Reveal>
          <div className="frame-card center" style={{ background: "var(--color-mustard)", borderColor: "var(--color-plum-900)" }}>
            <h2 className="t-display" style={{ fontSize: "clamp(1.8rem, 3vw, 2.5rem)", margin: 0 }}>
              Want your store moved next?
            </h2>
            <p style={{ color: "var(--color-plum-900)", marginTop: 16, marginBottom: 24, fontSize: "1.05rem" }}>
              Build your migration package.
            </p>
            <div className="row" style={{ justifyContent: "center" }}>
              <button className="btn btn-accent" onClick={() => onNav("build")}>Build a package <I.ArrowRight size={14} /></button>
              </div>
          </div>
        </Reveal>
      </div>
    </div>
  );
}

// ── Case detail (only Ash & Oak has full body) ──────────────────────
function CaseDetailScreen({ id, onNav }) {
  const c = CASE_STUDIES.find(cc => cc.id === id);
  if (!c) return null;
  const body = c.body || [
    { type: "section", title: "The brief", body: c.summary },
    { type: "section", title: "What we did", body: "Migration delivered against the chosen tier. Full case study writeup coming soon — happy to walk you through it on a 20-minute call." },
  ];
  return (
    <div className="section container">
      <Reveal>
        <button className="btn-link" onClick={() => onNav("cases")}>← All case studies</button>
        <div className="stack-md" style={{ marginTop: 24, marginBottom: 48, maxWidth: 880 }}>
          <div className="row">
            <span className="product-tag plain">{c.industry}</span>
            <span className="product-tag">{c.from} → {c.to}</span>
          </div>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 900,
            fontSize: "clamp(2.5rem, 5vw, 4.5rem)",
            textTransform: "uppercase", letterSpacing: "-0.02em",
            margin: 0, lineHeight: 1, color: "var(--color-plum-900)",
          }}>{c.name}</h1>
          <p style={{ fontFamily: "var(--font-display-sharp)", fontStyle: "italic", fontSize: "1.5rem", color: "var(--fg-2)", lineHeight: 1.4, margin: 0 }}>
            {c.headline}
          </p>
        </div>
      </Reveal>

      <Reveal delay={100}>
        <div style={{
          background: "var(--color-plum-900)", color: "var(--color-cream)",
          padding: 48, borderRadius: "var(--radius-lg)",
          display: "grid", gridTemplateColumns: `repeat(${c.metrics.length}, 1fr)`, gap: 24,
          marginBottom: 64, border: "3px solid var(--color-plum-900)",
          borderBottom: "6px solid var(--color-mustard)",
        }}>
          {c.metrics.map((m, j) => (
            <div key={j}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "clamp(2rem, 4vw, 3.5rem)", color: "var(--color-mustard)", lineHeight: 1 }}>{m.num}</div>
              <div style={{ fontSize: "0.8rem", color: "var(--color-blush-200)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 700, marginTop: 8 }}>{m.label}</div>
            </div>
          ))}
        </div>
      </Reveal>

      <div className="container-narrow" style={{ padding: 0 }}>
        {body.map((b, i) => (
          <Reveal key={i} delay={i * 60}>
            <div style={{ marginBottom: 40 }}>
              <h3 style={{
                fontFamily: "var(--font-display)", fontWeight: 900,
                fontSize: "1.5rem", textTransform: "uppercase",
                color: "var(--color-plum-900)", marginBottom: 12,
              }}>{b.title}</h3>
              <p style={{ fontSize: "1.1rem", lineHeight: 1.7, color: "var(--fg-2)", margin: 0 }}>{b.body}</p>
            </div>
          </Reveal>
        ))}

        {c.quote && (
          <Reveal>
            <div className="quote-card" style={{ marginTop: 40 }}>
              {c.quote}
              <div className="quote-attr">{c.quoteAttr}</div>
            </div>
          </Reveal>
        )}

        <Reveal>
          <div className="row" style={{ marginTop: 48, justifyContent: "center" }}>
            <button className="btn btn-accent" onClick={() => onNav("build")}>
              Build your package <I.ArrowRight size={14} />
            </button>
          </div>
        </Reveal>
      </div>
    </div>
  );
}

// ── About / Team ───────────────────────────────────────────────────
function AboutScreen({ onNav }) {
  return (
    <div className="section container">
      <Reveal>
        <div className="stack-md" style={{ marginBottom: 64, maxWidth: 920 }}>
          <div className="eyebrow">About Aartisan</div>
          <h1 className="t-display" style={{ margin: 0, fontSize: "clamp(2rem, 4.5vw, 4rem)" }}>
            Why start a Shopify agency in 2026?<br/>
            <em style={{ fontFamily: "var(--font-display-sharp)", fontStyle: "italic", fontWeight: 400 }}>Are you crazy?</em>
          </h1>
          <p style={{ fontSize: "1.15rem", lineHeight: 1.65, color: "var(--fg-2)", margin: 0 }}>
            Since leaving BigCommerce in 2014, I've spent the last 12 years consulting with eCommerce brands —
            either full-time or on the side. In 2026, I've decided to go all-in on platform migrations to Shopify
            for three main reasons:
          </p>

          <ol className="about-reasons">
            <li>
              <span className="about-reason-num">01</span>
              <div className="about-reason-body">
                <h3 className="about-reason-title">Migrations carry elevated risk.</h3>
                <p>
                  Done improperly, a migration can mean data loss and serious damage to a business's
                  search engine rankings. While AI is actively reshaping the web development landscape,
                  migrations are not something business leaders are comfortable using AI for — the stakes
                  are too high.
                </p>
              </div>
            </li>

            <li>
              <span className="about-reason-num">02</span>
              <div className="about-reason-body">
                <h3 className="about-reason-title">Shopify hits the sweet spot.</h3>
                <p>
                  Shopify is the flagship eCommerce platform that offers the strongest combination of
                  simplicity and extensibility.
                </p>
                <p>
                  <strong>WooCommerce</strong> is highly customizable, but time-consuming to administer
                  and easy to mess up. I frequently see poorly managed, chaotic WooCommerce stores in need
                  of simplification and structural improvement.
                </p>
                <p>
                  <strong>BigCommerce</strong> owners constantly find themselves saying, "what is it this time?!"
                  to their platform. The rebrands and feature changes make store owners feel like they're on
                  unsteady ground. The most recent change is a{" "}
                  <a
                    className="inline-link"
                    href="https://www.bigcommerce.com/blog/bigcommerce-self-serve-pricing-changes/"
                    target="_blank"
                    rel="noopener noreferrer"
                  >new processing fee</a>{" "}
                  for using "non-preferred" payment processors.
                </p>
                <p>
                  <strong>Squarespace</strong> and <strong>Wix</strong> are too simplistic, lack features,
                  and have no support.
                </p>
                <p>
                  Shopify is steady, safe, and strikes a strong balance.
                </p>
              </div>
            </li>

            <li>
              <span className="about-reason-num">03</span>
              <div className="about-reason-body">
                <h3 className="about-reason-title">It's what I'm good at.</h3>
                <p>
                  I started my eCommerce career at BigCommerce, coaching store owners on search engine
                  optimization. Migrations leverage my 12 years of experience in SEO and web development,
                  and my knowledge of the eCommerce ecosystem, perfectly.
                </p>
                <p style={{ fontStyle: "italic", color: "var(--color-plum-700)" }}>
                  This is my sweet spot.
                </p>
              </div>
            </li>
          </ol>
        </div>
      </Reveal>

      {/* Polaroid: meet the founder (a single polaroid on the corkboard) */}
      <Reveal>
        <div style={{
          background: "var(--color-walnut-300)",
          backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>\")",
          padding: 64,
          border: "8px solid var(--color-walnut-700)",
          borderRadius: 4,
          boxShadow: "var(--shadow-lg)",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: 24,
        }}>
          <div className="polaroid" style={{ transform: "rotate(-2deg)", width: 280 }}>
            <div style={{
              width: 14, height: 14, borderRadius: "50%",
              background: "var(--color-danger)",
              border: "1px solid rgba(0,0,0,0.3)",
              position: "relative", left: "50%", marginLeft: -7, top: -32,
              boxShadow: "0 2px 3px rgba(0,0,0,0.3)",
            }} />
            <div className="polaroid-photo" style={{ background: "var(--color-blush-300)" }}>
              BB
            </div>
            <div className="polaroid-caption">
              <strong style={{ fontFamily: "var(--font-body)", fontWeight: 700, display: "block", fontStyle: "normal" }}>Blake Boykin</strong>
              <span style={{ fontSize: "0.8rem", color: "var(--fg-2)" }}>Founder · Migration lead</span>
            </div>
          </div>
          <p style={{
            color: "var(--color-cream)",
            fontFamily: "var(--font-display-sharp)",
            fontStyle: "italic",
            fontSize: "1.1rem",
            margin: 0,
            textShadow: "1px 1px 0 rgba(0,0,0,0.25)",
            textAlign: "center",
            maxWidth: 380,
            lineHeight: 1.4,
          }}>
            Aartisan is just me, working out of a small studio. Whoever you email is who's doing the work.
          </p>
        </div>
      </Reveal>

      {/* Manifesto */}
      <div style={{ marginTop: 96 }}>
        <Reveal>
          <h2 className="t-display" style={{ fontSize: "clamp(2rem, 4vw, 3.5rem)", margin: "0 0 32px", textAlign: "center" }}>
            What we believe.
          </h2>
        </Reveal>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 24,
        }}>
          {[
            { n: "01", t: "A quote, not a sales call.", b: "You submit your package. We reply with a confirmed quote and a kickoff date. If you want a call, ask. If you don't, you don't get one." },
            { n: "02", t: "Boring is the goal.", b: "A migration that's interesting is a migration that's going wrong. Our biggest compliment is 'we didn't notice'." },
            { n: "03", t: "Stay on tap, not on retainer.", b: "Most agencies disappear after launch. Our Care Plans are designed so you can keep us at $0 if you don't need us this month." },
          ].map((b, i) => (
            <Reveal key={i} delay={i * 80}>
              <div style={{
                padding: 32,
                background: i === 1 ? "var(--color-mustard)" : "var(--color-cream)",
                border: "2px solid var(--color-plum-700)",
                borderRadius: "var(--radius-lg)",
                transform: `rotate(${[-0.5, 0.3, -0.3, 0.5][i]}deg)`,
                boxShadow: "var(--shadow-frame)",
              }}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "1.4rem", color: "var(--color-plum-700)" }}>{b.n}</div>
                <h3 className="t-h3" style={{ margin: "8px 0 12px" }}>{b.t}</h3>
                <p style={{ margin: 0, color: "var(--fg-2)", lineHeight: 1.55 }}>{b.b}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── FAQ ────────────────────────────────────────────────────────────
function FAQScreen({ onNav }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="section container">
      <Reveal>
        <div className="stack-md" style={{ marginBottom: 48, maxWidth: 880 }}>
          <div className="eyebrow">Stuff people ask before checking out</div>
          <h1 className="t-display" style={{ margin: 0, fontSize: "clamp(2.5rem, 5vw, 4.5rem)" }}>
            Frequently asked.
          </h1>
          <p style={{ fontSize: "1.15rem", color: "var(--fg-2)", lineHeight: 1.55, margin: 0 }}>
            If we missed one, email Blake at <a className="inline-link" href="mailto:blake@aartisan.io">blake@aartisan.io</a> — usually answered in under an hour during business hours.
          </p>
        </div>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 64 }} className="faq-grid">
        <div className="faq-list">
          {FAQ_ITEMS.map((it, i) => (
            <Reveal key={i} delay={i * 40}>
              <div className={`faq-item ${open === i ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className="faq-q-mark"><I.Plus size={14} /></span>
                </button>
                {open === i && <div className="faq-a">{it.a}</div>}
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={120}>
          <div style={{ position: "sticky", top: 96, height: "fit-content" }}>
            <div className="frame-card" style={{ background: "var(--color-blush-200)" }}>
              <div className="kicker">Ready to move shops?</div>
              <h3 className="t-h3" style={{ margin: "8px 0 16px" }}>Build your package.</h3>
              <p style={{ fontSize: "0.95rem", color: "var(--fg-2)", lineHeight: 1.6, margin: "0 0 16px" }}>
                Configure your migration in the builder. Live price, live timeline.
                We'll reply within 24 hours with a confirmed quote.
              </p>
              <button className="btn full" onClick={() => onNav("build")}>
                Build a package <I.ArrowRight size={14} />
              </button>
              <hr className="divider-dashed" />
              <p style={{ fontSize: "0.85rem", color: "var(--fg-2)", margin: 0 }}>
                Or email <a className="inline-link" href="mailto:blake@aartisan.io">blake@aartisan.io</a> — a human reads everything.
              </p>
            </div>
          </div>
        </Reveal>
      </div>
    </div>
  );
}

// ── Privacy Policy ────────────────────────────────────────────────
function PrivacyScreen() {
  const Section = ({ title, children }) => (
    <div style={{ marginBottom: 48 }}>
      <h2 style={{
        fontFamily: "var(--font-display)", fontWeight: 900,
        fontSize: "1.25rem", textTransform: "uppercase",
        letterSpacing: "0.03em", color: "var(--color-plum-900)",
        marginBottom: 16,
      }}>{title}</h2>
      <div style={{ color: "var(--fg-2)", lineHeight: 1.75, fontSize: "1rem" }}>
        {children}
      </div>
    </div>
  );

  return (
    <div className="section container">
      <Reveal>
        <div style={{ maxWidth: 760, margin: "0 auto" }}>

          <div className="stack-md" style={{ marginBottom: 56 }}>
            <div className="eyebrow">Legal</div>
            <h1 className="t-display" style={{ margin: 0, fontSize: "clamp(2rem, 4vw, 3.5rem)" }}>
              Privacy policy.
            </h1>
            <p style={{ color: "var(--fg-3)", fontSize: "0.9rem", margin: 0 }}>
              Last updated: May 2026
            </p>
          </div>

          <Section title="Who we are">
            <p>
              Aartisan is a one-person Shopify migration agency run by Blake Boykin. We help
              ecommerce stores move to Shopify — smoothly and without drama. Our website is{" "}
              <a className="inline-link" href="https://aartisan.io">aartisan.io</a>, and you
              can reach Blake directly at{" "}
              <a className="inline-link" href="mailto:blake@aartisan.io">blake@aartisan.io</a>.
            </p>
          </Section>

          <Section title="What we collect">
            <p style={{ marginBottom: 12 }}>
              We collect only what we need to prepare your migration quote:
            </p>
            <ul style={{ paddingLeft: 20, margin: 0 }}>
              <li style={{ marginBottom: 8 }}>
                <strong>Quote builder responses</strong> — your current platform, product count,
                order history, app tech stack, and any add-ons you select. This stays in your
                browser until you submit the quote request.
              </li>
              <li style={{ marginBottom: 8 }}>
                <strong>Contact details</strong> — name and email address, provided when you
                submit a quote request or email us directly.
              </li>
              <li>
                <strong>Email correspondence</strong> — any messages you send to
                blake@aartisan.io, which we keep for project continuity.
              </li>
            </ul>
            <p style={{ marginTop: 16 }}>
              We don't run analytics, tracking pixels, or ad retargeting. We don't use cookies
              beyond what your browser requires to load the site.
            </p>
          </Section>

          <Section title="How we use it">
            <p>
              Your information is used exclusively to prepare your migration quote, communicate
              about the project, and deliver the work. We won't contact you for any other
              purpose — marketing, upsells, or otherwise — without your permission.
            </p>
          </Section>

          <Section title="How it's stored">
            <p>
              This website is hosted on <strong>Vercel</strong> (San Francisco, CA). Quote
              submissions are sent directly to Blake's email inbox — there is no backend database
              collecting your data on our side. Email is stored in Google Workspace.
            </p>
            <p style={{ marginTop: 12 }}>
              We do not store payment information. Any payments for migration services are
              processed through <strong>Stripe</strong> — we never see your card details.
              Stripe's privacy policy is at{" "}
              <a className="inline-link" href="https://stripe.com/privacy" target="_blank" rel="noopener noreferrer">stripe.com/privacy</a>.
            </p>
          </Section>

          <Section title="Third-party services">
            <p style={{ marginBottom: 8 }}>
              The only third-party processors involved in running this site are:
            </p>
            <ul style={{ paddingLeft: 20, margin: 0 }}>
              <li style={{ marginBottom: 8 }}>
                <strong>Vercel</strong> — hosting and CDN. Their privacy policy is at{" "}
                <a className="inline-link" href="https://vercel.com/legal/privacy-policy" target="_blank" rel="noopener noreferrer">vercel.com/legal/privacy-policy</a>.
              </li>
              <li style={{ marginBottom: 8 }}>
                <strong>Google Workspace</strong> — email. Their privacy policy is at{" "}
                <a className="inline-link" href="https://workspace.google.com/terms/privacy.html" target="_blank" rel="noopener noreferrer">workspace.google.com/terms/privacy.html</a>.
              </li>
              <li>
                <strong>Stripe</strong> — payment processing. Their privacy policy is at{" "}
                <a className="inline-link" href="https://stripe.com/privacy" target="_blank" rel="noopener noreferrer">stripe.com/privacy</a>.
              </li>
            </ul>
            <p style={{ marginTop: 16 }}>
              We don't share your data with any other parties. We don't sell it. Ever.
            </p>
          </Section>

          <Section title="Data retention">
            <p>
              Quote request emails and project correspondence are kept for as long as the
              business relationship is active, plus a reasonable period afterward for accounting
              and legal purposes (typically 3 years). If a quote doesn't become a project, we
              delete the inquiry within 12 months.
            </p>
          </Section>

          <Section title="Your rights">
            <p style={{ marginBottom: 12 }}>
              Depending on where you're located, you may have the right to:
            </p>
            <ul style={{ paddingLeft: 20, margin: 0 }}>
              <li style={{ marginBottom: 6 }}>Access the personal data we hold about you</li>
              <li style={{ marginBottom: 6 }}>Correct inaccurate information</li>
              <li style={{ marginBottom: 6 }}>Request deletion of your data</li>
              <li style={{ marginBottom: 6 }}>Object to or restrict processing</li>
              <li>Request a portable copy of your data</li>
            </ul>
            <p style={{ marginTop: 16 }}>
              To exercise any of these rights, email{" "}
              <a className="inline-link" href="mailto:blake@aartisan.io">blake@aartisan.io</a>.
              Blake handles all requests personally and will respond within 5 business days.
            </p>
          </Section>

          <Section title="California residents (CCPA)">
            <p>
              California residents may request disclosure of the categories and specific pieces
              of personal information we have collected, the categories of sources, and our
              business purpose for collecting it. You also have the right to request deletion.
              We don't sell personal information, so there is no opt-out of sale to offer.
              Contact blake@aartisan.io to make any of these requests.
            </p>
          </Section>

          <Section title="Changes to this policy">
            <p>
              If we make material changes, we'll update the "Last updated" date at the top.
              For significant changes, we'll also notify active clients directly.
              The current version is always at aartisan.io/privacy.
            </p>
          </Section>

          <Section title="Contact">
            <p>
              Questions about this policy? Email{" "}
              <a className="inline-link" href="mailto:blake@aartisan.io">blake@aartisan.io</a>.
              There's a human on the other end.
            </p>
          </Section>

        </div>
      </Reveal>
    </div>
  );
}

Object.assign(window, { CasesScreen, CaseDetailScreen, AboutScreen, FAQScreen, PrivacyScreen });