/* Logo design system showcase — review the new Tamak mark in isolation */

const LogoShowcase = ({ go }) => {
  return (
    <main className="page-enter" style={{ background: "#FAFAF7" }}>
      {/* HERO */}
      <section style={{ padding: "80px 0 64px", borderBottom: "1px solid var(--line)" }}>
        <div className="shell-wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24, marginBottom: 56 }}>
            <div>
              <Eyebrow dot color="#CC1B2B">Logo system · 2026 refresh</Eyebrow>
              <h1 className="display-xl" style={{ marginTop: 20, maxWidth: 880 }}>
                The same red square.<br />
                <span className="serif" style={{ fontStyle: "italic", color: "#CC1B2B" }}>A more confident</span> mark.
              </h1>
              <p style={{ marginTop: 20, fontSize: 17, color: "var(--mute)", maxWidth: 620, lineHeight: 1.5 }}>
                We kept the brand DNA — the red square, the "M" stroke that reads as twin peaks of Mauritius — and rebuilt it as a vector with cleaner geometry, miter-sharp peaks, and a tighter wordmark lockup that scales from favicon to billboard.
              </p>
            </div>
            <div style={{ display: "flex", gap: 8, fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--mute)" }}>
              <Tag style={{ borderColor: "#CC1B2B", color: "#CC1B2B" }}>● SVG</Tag>
              <Tag>Variable</Tag>
              <Tag>Favicon ready</Tag>
            </div>
          </div>

          {/* Big hero logo */}
          <div style={{ background: "#FFFFFF", borderRadius: 28, border: "1px solid var(--line)", padding: 96, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 360 }}>
            <TamakLogo size={180} />
          </div>
        </div>
      </section>

      {/* BEFORE / AFTER */}
      <section className="section">
        <div className="shell-wide">
          <Eyebrow dot color="#CC1B2B">01 — Before & after</Eyebrow>
          <h2 className="display-lg" style={{ marginTop: 16, marginBottom: 48 }}>
            What stayed. What changed.
          </h2>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="ba-grid">
            <div style={{ background: "#FFF", borderRadius: 24, border: "1px solid var(--line)", overflow: "hidden" }}>
              <div style={{ padding: "12px 20px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--mute)" }}>
                <span>Before · raster JPEG</span>
                <span>~h.40px · pixelated above 80px</span>
              </div>
              <div style={{ padding: 64, display: "flex", alignItems: "center", justifyContent: "center", background: "#F4F4EF", minHeight: 280 }}>
                <img src="assets/tamak-logo.jpeg" alt="Original Tamak logo" style={{ height: 100, display: "block" }} />
              </div>
            </div>

            <div style={{ background: "#FFF", borderRadius: 24, border: "1px solid var(--line)", overflow: "hidden" }}>
              <div style={{ padding: "12px 20px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "#CC1B2B" }}>
                <span>After · SVG vector</span>
                <span>● Scales infinitely</span>
              </div>
              <div style={{ padding: 64, display: "flex", alignItems: "center", justifyContent: "center", background: "#FFF", minHeight: 280 }}>
                <TamakLogo size={100} />
              </div>
            </div>
          </div>

          {/* Diff list */}
          <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="diff-grid">
            {[
              { kept: "Red square mark",         changed: "Corner radius 18 — softer, modern" },
              { kept: "Twin-peak \"M\" stroke",  changed: "Sharper miter joins, calmer geometry" },
              { kept: "Tamak red #CC1B2B",       changed: "Now defined as a single brand token" },
              { kept: "\"GROUP\" tag",           changed: "Promoted to spaced caps for clarity" },
            ].map((d, i) => (
              <div key={i} style={{ background: "#FFF", border: "1px solid var(--line)", borderRadius: 16, padding: 20 }}>
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--mute)" }}>0{i + 1}</div>
                <div style={{ marginTop: 12, fontSize: 14 }}>
                  <div style={{ display: "flex", gap: 8, marginBottom: 8 }}>
                    <span style={{ color: "#16A34A", fontFamily: "var(--f-mono)", fontSize: 11, flexShrink: 0, marginTop: 2 }}>KEPT</span>
                    <span>{d.kept}</span>
                  </div>
                  <div style={{ display: "flex", gap: 8 }}>
                    <span style={{ color: "#CC1B2B", fontFamily: "var(--f-mono)", fontSize: 11, flexShrink: 0, marginTop: 2 }}>NEW</span>
                    <span style={{ color: "var(--mute)" }}>{d.changed}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <style>{`
            @media (max-width: 800px) {
              .ba-grid { grid-template-columns: 1fr !important; }
              .diff-grid { grid-template-columns: 1fr 1fr !important; }
            }
          `}</style>
        </div>
      </section>

      {/* VARIANTS */}
      <section className="section" style={{ background: "#FFF", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="shell-wide">
          <Eyebrow dot color="#CC1B2B">02 — Variants</Eyebrow>
          <h2 className="display-lg" style={{ marginTop: 16, marginBottom: 48 }}>
            Four lockups. One system.
          </h2>

          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 16 }} className="var-grid">
            <LogoCard label="Horizontal · primary" sub="Nav, header, business card">
              <TamakLogo size={64} variant="horizontal" />
            </LogoCard>
            <LogoCard label="Stacked" sub="Square contexts">
              <TamakLogo size={64} variant="stacked" />
            </LogoCard>
            <LogoCard label="Icon" sub="Favicon, app, social">
              <TamakLogo size={88} variant="icon" />
            </LogoCard>
            <LogoCard label="Wordmark" sub="Light contexts, text-first">
              <TamakLogo size={36} variant="wordmark" />
            </LogoCard>
          </div>

          <style>{`@media (max-width: 900px) { .var-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
        </div>
      </section>

      {/* COLOR TREATMENTS */}
      <section className="section">
        <div className="shell-wide">
          <Eyebrow dot color="#CC1B2B">03 — Colour treatments</Eyebrow>
          <h2 className="display-lg" style={{ marginTop: 16, marginBottom: 48 }}>
            Where it lives.
          </h2>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="ct-grid">
            <ColorCard bg="#FFFFFF" border="var(--line)" label="On white · default">
              <TamakLogo size={56} />
            </ColorCard>
            <ColorCard bg="#0F172A" label="On ink · footer & dark sections">
              <TamakLogo size={56} color="white" />
            </ColorCard>
            <ColorCard bg="#CC1B2B" label="On Tamak red · mono reverse">
              <div style={{ display: "inline-flex", alignItems: "center", gap: 18 }}>
                <svg width="56" height="56" viewBox="0 0 100 100" fill="none">
                  <rect width="100" height="100" rx="18" fill="#FFFFFF" />
                  <path d="M 18 76 L 34 32 L 50 56 L 66 32 L 82 76" stroke="#CC1B2B" strokeWidth="9" strokeLinecap="round" strokeLinejoin="miter" strokeMiterlimit="6" />
                  <line x1="22" y1="82" x2="78" y2="82" stroke="#CC1B2B" strokeWidth="3" strokeLinecap="round" opacity="0.45" />
                </svg>
                <div style={{ display: "flex", flexDirection: "column", lineHeight: 0.85 }}>
                  <span style={{ fontFamily: "'Bricolage Grotesque', system-ui, sans-serif", fontWeight: 700, fontSize: 40, letterSpacing: "-0.03em", color: "#FFF" }}>Tamak</span>
                  <span style={{ fontFamily: "'Bricolage Grotesque', system-ui, sans-serif", fontWeight: 500, fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", marginTop: 8, color: "rgba(255,255,255,0.7)" }}>Group</span>
                </div>
              </div>
            </ColorCard>
            <ColorCard
              bg="url(assets/tamak-hero.png)"
              label="On photography · with scrim"
              scrim="linear-gradient(180deg, rgba(15,23,42,0.2), rgba(15,23,42,0.65))"
              span={2}
            >
              <TamakLogo size={64} color="white" />
            </ColorCard>
            <ColorCard bg="#F4F4EF" border="var(--line)" label="On cream · alt neutral">
              <TamakLogo size={56} />
            </ColorCard>
          </div>

          <style>{`@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr !important; } .ct-grid > * { grid-column: auto !important; } }`}</style>
        </div>
      </section>

      {/* CONSTRUCTION */}
      <section className="section" style={{ background: "#FFF", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="shell-wide">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56, alignItems: "center" }} className="cons-grid">
            <div>
              <Eyebrow dot color="#CC1B2B">04 — Construction</Eyebrow>
              <h2 className="display-lg" style={{ marginTop: 16 }}>
                Built on a 100-unit grid.
              </h2>
              <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 14, fontSize: 14 }}>
                {[
                  ["Container", "100 × 100, corner radius 18u (18%)"],
                  ["Peak path", "5 anchors · stroke-width 9u · miter joins (limit 6)"],
                  ["Horizon line", "60u long · 3u stroke · 45% opacity · round caps"],
                  ["Clear space", "12u on all sides — never crowd it"],
                  ["Min size", "16px (icon) · 80px (full lockup)"],
                  ["Color", "#CC1B2B background · #FFFFFF foreground · only"],
                ].map((row, i) => (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "140px 1fr", gap: 16, padding: "12px 0", borderTop: i === 0 ? "1px solid var(--line)" : "none", borderBottom: "1px solid var(--line)" }}>
                    <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--mute)" }}>{row[0]}</div>
                    <div>{row[1]}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Grid drawing */}
            <div style={{ background: "#FAFAF7", borderRadius: 24, border: "1px solid var(--line)", padding: 48, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <ConstructionGrid />
            </div>
          </div>
          <style>{`@media (max-width: 900px) { .cons-grid { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>

      {/* SCALE TEST */}
      <section className="section">
        <div className="shell-wide">
          <Eyebrow dot color="#CC1B2B">05 — Scale</Eyebrow>
          <h2 className="display-lg" style={{ marginTop: 16, marginBottom: 48 }}>From 16 to 240 — it holds.</h2>

          <div style={{ background: "#FFF", borderRadius: 24, border: "1px solid var(--line)", padding: 48, display: "flex", alignItems: "flex-end", justifyContent: "space-around", gap: 32, flexWrap: "wrap" }}>
            {[16, 24, 32, 48, 64, 96, 140, 200].map(s => (
              <div key={s} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
                <TamakLogo size={s} variant="icon" />
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--mute)" }}>{s}px</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* APPLICATIONS */}
      <section className="section" style={{ background: "#0F172A", color: "#FFF" }}>
        <div className="shell-wide">
          <Eyebrow dot color="#CC1B2B">06 — In context</Eyebrow>
          <h2 className="display-lg" style={{ marginTop: 16, color: "#FFF", marginBottom: 48 }}>Where you'll see it.</h2>

          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 16 }} className="apps-grid">
            {/* Browser tab */}
            <AppCard label="Browser favicon · 16px tab">
              <div style={{ background: "#1E293B", borderRadius: 12, padding: 14, display: "flex", alignItems: "center", gap: 10, border: "1px solid rgba(255,255,255,0.1)" }}>
                <TamakLogo size={16} variant="icon" />
                <span style={{ fontSize: 12, color: "#FFF" }}>Tamak Group — A house of brands</span>
                <span style={{ marginLeft: "auto", color: "rgba(255,255,255,0.4)", fontSize: 14 }}>×</span>
              </div>
            </AppCard>

            {/* Business card */}
            <AppCard label="Business card · embossed">
              <div style={{ background: "#FAFAF7", color: "#0F172A", borderRadius: 12, padding: 24, aspectRatio: "1.7", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                <TamakLogo size={28} />
                <div style={{ fontSize: 11, lineHeight: 1.4 }}>
                  <div style={{ fontWeight: 600 }}>Emmanuel Tsang Mang Kin</div>
                  <div style={{ color: "var(--mute)" }}>Founder & Chairman</div>
                  <div style={{ color: "var(--mute)", marginTop: 8 }}>tamak@tamak.com · +230 2330020</div>
                </div>
              </div>
            </AppCard>

            {/* Storefront */}
            <AppCard label="Storefront · embossed red">
              <div style={{ background: "#FFF", color: "#0F172A", borderRadius: 12, padding: 28, aspectRatio: "1.7", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <TamakLogo size={56} variant="stacked" />
              </div>
            </AppCard>
          </div>

          <style>{`@media (max-width: 900px) { .apps-grid { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>

      {/* HANDOFF */}
      <section className="section">
        <div className="shell-wide">
          <div style={{ background: "#CC1B2B", color: "#FFF", borderRadius: 28, padding: 56, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
            <div>
              <Eyebrow color="rgba(255,255,255,0.7)">Approve the direction</Eyebrow>
              <h3 className="display-lg" style={{ marginTop: 12, color: "#FFF" }}>
                Roll the new mark across<br />
                <span className="serif" style={{ fontStyle: "italic" }}>every page.</span>
              </h3>
            </div>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              <a onClick={() => go("home")} className="btn btn-paper btn-lg" style={{ cursor: "pointer" }}>
                See it on the site <Icon.ArrowRight size={14} />
              </a>
              <a href="assets/tamak-mark.svg" download="tamak-mark.svg" className="btn btn-lg" style={{ background: "transparent", color: "#FFF", border: "1px solid rgba(255,255,255,0.4)" }}>
                Download SVG <Icon.ArrowUpRight size={14} />
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

const LogoCard = ({ label, sub, children }) => (
  <div style={{ background: "#FAFAF7", border: "1px solid var(--line)", borderRadius: 20, padding: 24, display: "flex", flexDirection: "column", gap: 24, minHeight: 220 }}>
    <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
      {children}
    </div>
    <div>
      <div style={{ fontFamily: "var(--f-display)", fontSize: 17, letterSpacing: "-0.01em", fontWeight: 500 }}>{label}</div>
      <div style={{ fontSize: 12, color: "var(--mute)", marginTop: 4 }}>{sub}</div>
    </div>
  </div>
);

const ColorCard = ({ bg, border, label, scrim, span, children }) => {
  const isImage = String(bg).startsWith("url(");
  return (
    <div style={{
      background: bg,
      backgroundSize: "cover",
      backgroundPosition: "center",
      border: border ? `1px solid ${border}` : "none",
      borderRadius: 20,
      padding: 48,
      minHeight: 200,
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between",
      gridColumn: span ? `span ${span}` : "auto",
      position: "relative",
      overflow: "hidden",
    }}>
      {scrim && <div aria-hidden style={{ position: "absolute", inset: 0, background: scrim }} />}
      <div style={{ position: "relative", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
        {children}
      </div>
      <div style={{ position: "relative", marginTop: 16, fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: isImage || bg === "#0F172A" || bg === "#CC1B2B" ? "rgba(255,255,255,0.75)" : "var(--mute)" }}>
        {label}
      </div>
    </div>
  );
};

const AppCard = ({ label, children }) => (
  <div style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 20, padding: 24 }}>
    <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)", marginBottom: 16 }}>{label}</div>
    {children}
  </div>
);

const ConstructionGrid = () => (
  <svg width="320" height="320" viewBox="0 0 120 120" style={{ maxWidth: "100%", height: "auto" }}>
    {/* Grid */}
    <defs>
      <pattern id="cgrid" width="10" height="10" patternUnits="userSpaceOnUse">
        <path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(204,27,43,0.15)" strokeWidth="0.3"/>
      </pattern>
    </defs>
    {/* Clear-space rectangle */}
    <rect x="0" y="0" width="120" height="120" fill="none" stroke="rgba(204,27,43,0.3)" strokeWidth="0.4" strokeDasharray="1.5 1.5" />
    {/* Mark area */}
    <g transform="translate(10, 10)">
      <rect width="100" height="100" fill="url(#cgrid)" stroke="rgba(204,27,43,0.4)" strokeWidth="0.4" />
      <rect width="100" height="100" rx="18" fill="#CC1B2B" />
      <path d="M 18 76 L 34 32 L 50 56 L 66 32 L 82 76" stroke="#FFFFFF" strokeWidth="9" strokeLinecap="round" strokeLinejoin="miter" strokeMiterlimit="6" fill="none" />
      <line x1="22" y1="82" x2="78" y2="82" stroke="#FFFFFF" strokeWidth="3" strokeLinecap="round" opacity="0.45" />
    </g>
    {/* Labels */}
    <text x="60" y="6" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="3.5" fill="rgba(204,27,43,0.7)">12u clear space</text>
    <text x="60" y="118" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="3.5" fill="rgba(204,27,43,0.7)">12u clear space</text>
    <text x="2" y="60" fontFamily="JetBrains Mono" fontSize="3.5" fill="rgba(204,27,43,0.7)" transform="rotate(-90 4 60)">12u</text>
    <text x="116" y="60" fontFamily="JetBrains Mono" fontSize="3.5" fill="rgba(204,27,43,0.7)" transform="rotate(90 116 60)">12u</text>
  </svg>
);

window.LogoShowcase = LogoShowcase;