// "Web Design" — a sell-focused portfolio page showcasing real client builds.
// Each project sits in a browser-window frame. If a screenshot exists at
// assets/webdesign/<slug>.png it shows; otherwise a branded cover is displayed.
// Drop screenshots into assets/webdesign/ later and they appear automatically.
const WEB_PROJECTS = [
  {
    slug: "ogemmy", name: "OG Emmy", url: "https://ogemmy.vercel.app",
    blurb: "Electronic press kit for the London Afropop artist — streaming links, music videos, tour dates and merch in one bold, photo-led experience.",
    tags: ["Artist / EPK", "Design + Build", "Next.js"], accent: "linear-gradient(135deg,#6d28d9,#db2777)",
  },
  {
    slug: "allwhitelaser", name: "AllWhite Laser", url: "https://allwhitelaser.com",
    blurb: "Marketing site for a 25-year laser-device manufacturer — product ranges, treatment science and AW3 Academy training, built to convert clinics.",
    tags: ["Medical / Brand", "E-commerce", "Lead-gen"], accent: "linear-gradient(135deg,#0ea5e9,#1e293b)",
  },
  {
    slug: "ironstonelegal", name: "Ironstone Legal", url: "https://ironstonelegal.com",
    blurb: "A trust-first website for a legal practice — clear service areas, credibility signals and a frictionless enquiry path.",
    tags: ["Legal", "Brand", "Lead-gen"], accent: "linear-gradient(135deg,#334155,#0f172a)",
  },
  {
    slug: "thesedayz", name: "TheseDayz", url: "https://thesedayz.vercel.app",
    blurb: "A lifestyle brand site with a clean, editorial feel — built for storytelling and fast iteration.",
    tags: ["Brand", "Lifestyle", "Vercel"], accent: "linear-gradient(135deg,#f59e0b,#b91c1c)",
  },
  {
    slug: "firah", name: "Firah", url: "https://firah.co.uk",
    blurb: "A clean, conversion-focused brand website with a modern, considered visual language.",
    tags: ["Brand", "Web", "UI"], accent: "linear-gradient(135deg,#059669,#064e3b)",
  },
];

const WEB_VALUES = [
  { t: "Strategy first", d: "Every build starts with the outcome — who it's for, what it must do, and how we'll know it worked." },
  { t: "Designed to convert", d: "Beautiful is the baseline. Layouts, copy and calls-to-action are built to turn visitors into enquiries." },
  { t: "Fast & findable", d: "Performance, responsive layouts and SEO foundations baked in, so you rank and load everywhere." },
  { t: "Yours to grow", d: "Clean, maintainable builds with analytics wired in from day one — ready to scale as you do." },
];

function BrowserFrame({ project }) {
  const [imgOk, setImgOk] = React.useState(true);
  const shot = `assets/webdesign/${project.slug}.png`;
  const host = project.url.replace(/^https?:\/\//, "");
  return (
    <div style={{ borderRadius: "var(--radius-md)", overflow: "hidden", border: "1px solid var(--color-border)", background: "var(--color-surface)", boxShadow: "0 24px 60px -30px rgba(17,17,17,0.45)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "12px 16px", background: "var(--color-surface-sunken)", borderBottom: "1px solid var(--color-border)" }}>
        <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#ff5f57" }} />
        <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#febc2e" }} />
        <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#28c840" }} />
        <span style={{ marginLeft: 12, flex: 1, background: "var(--color-surface)", border: "1px solid var(--color-border)", borderRadius: 999, padding: "5px 14px", fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", color: "var(--ink-500)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
          {host}
        </span>
      </div>
      <div style={{ position: "relative", aspectRatio: "16/10", background: project.accent }}>
        {imgOk && (
          <img src={shot} alt={project.name + " website"} onError={() => setImgOk(false)}
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "top center", display: "block" }} />
        )}
        {!imgOk && (
          <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8, textAlign: "center", padding: 24 }}>
            <span style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(28px,4vw,44px)", color: "#ffffff" }}>{project.name}</span>
            <span style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "rgba(255,255,255,0.8)" }}>Live site &middot; {host}</span>
          </div>
        )}
      </div>
    </div>
  );
}

function PageWebDesign() {
  const { PageHero, PaintDivider, CTASection, Reveal, useMediaQuery } = window.JMK;
  const { Badge, Button } = window.JMKStudiosDesignSystem_f6070b;
  const isMobile = useMediaQuery("(max-width: 768px)");
  const isTablet = useMediaQuery("(max-width: 1024px)");

  return (
    <React.Fragment>
      <PageHero
        eyebrow="Web Design & Development"
        title="Websites that sell"
        tagline="A well-designed storefront should captivate, engage, and leave lasting impressions on virtual visitors."
      />

      {/* Value proposition */}
      <section style={{ background: "#ffffff", padding: "clamp(72px,10vw,120px) clamp(20px,5vw,64px)" }}>
        <Reveal from="left" distance={40}>
          <p style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(26px,3.6vw,44px)", lineHeight: 1.16, color: "var(--ink-900)", maxWidth: 820, margin: "0 0 clamp(48px,7vw,72px)" }}>
            We design and build websites that don't just look the part &mdash; they earn their keep. Strategy, design, copy and code, under one roof.
          </p>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: isMobile ? 32 : 40 }}>
          {WEB_VALUES.map((v, i) => (
            <Reveal key={v.t} delay={i * 60} from={isMobile ? "up" : (i % 2 === 0 ? "left" : "right")}>
              <div style={{ display: "flex", gap: 16 }}>
                <span style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-sm)", color: "var(--color-primary)", fontWeight: 700, paddingTop: 4 }}>0{i + 1}</span>
                <div>
                  <h3 style={{ fontFamily: "var(--font-editorial)", fontSize: "var(--text-2xl)", color: "var(--ink-900)", margin: "0 0 8px" }}>{v.t}</h3>
                  <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", lineHeight: "var(--leading-relaxed)", color: "var(--ink-500)", margin: 0 }}>{v.d}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <PaintDivider color="var(--color-primary)" />

      {/* Portfolio */}
      <section style={{ background: "var(--color-surface-sunken)", padding: "clamp(72px,10vw,120px) clamp(20px,5vw,64px)" }}>
        <Reveal>
          <div style={{ marginBottom: "clamp(40px,6vw,64px)" }}>
            <div style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wider)", textTransform: "uppercase", color: "var(--ink-500)", fontWeight: 600, marginBottom: 12 }}>Selected Work</div>
            <h2 style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(32px,5vw,60px)", color: "var(--ink-900)", margin: 0 }}>Sites we've shipped</h2>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: isMobile ? 40 : 48 }}>
          {WEB_PROJECTS.map((p, i) => (
            <Reveal key={p.slug} delay={(i % 2) * 80}>
              <a href={p.url} target="_blank" rel="noreferrer" data-cursor="link" className="jmk-lift" style={{ textDecoration: "none", display: "block" }}>
                <BrowserFrame project={p} />
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16, marginTop: 20 }}>
                  <h3 style={{ fontFamily: "var(--font-editorial)", fontSize: "var(--text-2xl)", color: "var(--ink-900)", margin: 0 }}>{p.name}</h3>
                  <span style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-sm)", color: "var(--color-secondary)", whiteSpace: "nowrap" }}>Visit site &rarr;</span>
                </div>
                <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", lineHeight: "var(--leading-relaxed)", color: "var(--ink-500)", margin: "10px 0 14px" }}>{p.blurb}</p>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                  {p.tags.map((t, k) => (<Badge key={t} tone={["pink", "blue", "dark"][k % 3]}>{t}</Badge>))}
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </section>

      <PaintDivider color="var(--color-secondary)" flip />

      {/* Web clients strip */}
      <section style={{ background: "#ffffff", padding: "clamp(64px,9vw,110px) clamp(20px,5vw,64px)" }}>
        <Reveal>
          <div style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wider)", textTransform: "uppercase", color: "var(--ink-500)", fontWeight: 600, marginBottom: 8 }}>Also Trusted By</div>
          <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", color: "var(--ink-500)", margin: "0 0 40px" }}>Storefronts we've built to captivate, engage and convert.</p>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : isTablet ? "repeat(3, 1fr)" : "repeat(4, 1fr)", gap: 16 }}>
          {["Golden Genie", "Waste Removal Men", "Dona Mart Solicitors", "Ironstone Legal", "All White Laser", "Scobic Limited", "Scalexa"].map((c, i) => (
            <Reveal key={c} delay={i * 40}>
              <div style={{ aspectRatio: "3/2", background: "var(--color-surface)", border: "1px solid var(--color-border)", borderRadius: "var(--radius-md)", display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center", padding: 20 }}>
                <span style={{ fontFamily: "var(--font-editorial)", fontSize: "var(--text-lg)", color: "var(--ink-900)" }}>{c}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <PaintDivider color="var(--color-primary)" />
      <CTASection title="Need a site that pulls its weight?" sub="Tell us about your business and what you want it to do. We'll design and build the rest." />
    </React.Fragment>
  );
}
window.JMK = window.JMK || {};
window.JMK.PageWebDesign = PageWebDesign;