// FENIX UNIFORM - Landing Page
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E63329",
  "density": "comfortable",
  "heroVariant": "split",
  "showGrid": true
}/*EDITMODE-END*/;

// ─────────────────────────────────────────────────────────────
// Shared bits
// ─────────────────────────────────────────────────────────────

const SectionLabel = ({ num, title, accent }) => (
  <div className="flex items-center gap-3 mb-6">
    <span className="font-mono text-xs tracking-[0.2em]" style={{ color: accent }}>
      / {num}
    </span>
    <span className="font-mono text-xs tracking-[0.25em] text-white/50 uppercase">{title}</span>
    <div className="flex-1 h-px bg-white/10" />
  </div>
);

const Pill = ({ children, accent, active, onClick }) => (
  <button
    onClick={onClick}
    className="px-4 py-2 rounded-full text-xs font-mono tracking-wider uppercase transition-all border"
    style={{
      background: active ? accent : "transparent",
      color: active ? "#0a0a0a" : "rgba(255,255,255,0.7)",
      borderColor: active ? accent : "rgba(255,255,255,0.15)",
      fontWeight: active ? 700 : 500,
    }}
  >
    {children}
  </button>
);

// SVG placeholder with diagonal stripes — sport feel
const StripePlaceholder = ({ label, accent, ratio = "4/5", dark = true }) => (
  <div
    className="relative w-full overflow-hidden"
    style={{ aspectRatio: ratio, background: dark ? "#141414" : "#1a1a1a" }}
  >
    <svg className="absolute inset-0 w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
      <defs>
        <pattern id={`stripe-${label}`} patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(-30)">
          <rect width="6" height="6" fill={dark ? "#141414" : "#1a1a1a"} />
          <line x1="0" y1="0" x2="0" y2="6" stroke="rgba(255,255,255,0.04)" strokeWidth="3" />
        </pattern>
      </defs>
      <rect width="100" height="100" fill={`url(#stripe-${label})`} />
    </svg>
    <div className="absolute inset-0 flex items-center justify-center">
      <span className="font-mono text-[10px] tracking-[0.25em] text-white/30 uppercase text-center px-4">
        {label}
      </span>
    </div>
    <div className="absolute top-3 left-3 w-2 h-2" style={{ background: accent }} />
    <div className="absolute bottom-3 right-3 font-mono text-[9px] tracking-wider text-white/20">
      IMG
    </div>
  </div>
);

// ─────────────────────────────────────────────────────────────
// HERO
// ─────────────────────────────────────────────────────────────

const Hero = ({ accent }) => {
  const { t } = window.useLang();
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 50);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="relative min-h-screen overflow-hidden" style={{ background: "#0a0a0a" }}>
      {/* Grid backdrop */}
      <div
        className="absolute inset-0 opacity-[0.06]"
        style={{
          backgroundImage:
            "linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px)",
          backgroundSize: "80px 80px",
        }}
      />
      {/* Red glow — parallax */}
      <window.Parallax speed={0.15} className="absolute inset-0 pointer-events-none">
        <div
          className="absolute -right-40 top-20 w-[700px] h-[700px] rounded-full blur-[140px] opacity-30"
          style={{ background: accent }}
        />
      </window.Parallax>

      {/* Top bar */}
      <nav className="relative z-20 px-10 py-6 flex items-center justify-between border-b border-white/5">
        <div className="flex items-center gap-3">
          <div className="relative w-9 h-9">
            <div className="absolute inset-0" style={{ background: accent, clipPath: "polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%)" }} />
            <div className="absolute inset-[3px] bg-black flex items-center justify-center font-black text-white text-sm" style={{ clipPath: "polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%)" }}>
              F
            </div>
          </div>
          <div className="leading-none">
            <div className="text-white font-black tracking-tight text-lg">FENIX</div>
            <div className="font-mono text-[9px] tracking-[0.3em] text-white/40 mt-0.5">UNIFORM CO.</div>
          </div>
        </div>
        <div className="hidden md:flex gap-8 text-sm font-medium text-white/70">
          <a href="#catalog" className="hover:text-white transition">{t('nav.catalog')}</a>
          <a href="#portfolio" className="hover:text-white transition">{t('nav.portfolio')}</a>
          <a href="#process" className="hover:text-white transition">{t('nav.process')}</a>
          <a href="#about" className="hover:text-white transition">{t('nav.about')}</a>
          <a href="#contact" className="hover:text-white transition">{t('nav.contact')}</a>
        </div>
        <div className="flex items-center gap-3">
          <window.LangSwitch accent={accent} />
          <a
            href="quote.html"
            className="px-5 py-2.5 text-xs font-bold tracking-wider uppercase text-black"
            style={{ background: accent }}
          >
            {t('cta.requestQuote')}
          </a>
        </div>
      </nav>

      {/* Hero body — split */}
      <div className="relative z-10 px-10 pt-20 pb-24 grid lg:grid-cols-12 gap-10 items-end">
        <div className="lg:col-span-7">
          <div className="flex items-center gap-3 mb-8">
            <div className="w-10 h-px" style={{ background: accent }} />
            <span className="font-mono text-[11px] tracking-[0.3em] uppercase" style={{ color: accent }}>
              {t('hero.eyebrow')}
            </span>
          </div>
          <h1 className="text-white font-black leading-[0.92] tracking-tight glitch-hover" style={{ fontSize: "clamp(56px, 9vw, 144px)" }}>
            <window.Reveal as="span" className="block">{t('hero.h1.l1')}</window.Reveal>
            <window.Reveal as="span" className="relative inline-block" delay={150}>
              {t('hero.h1.l2')}
              <span
                className="absolute left-0 -bottom-2 h-2"
                style={{ background: accent, width: '100%', transformOrigin: 'left', animation: 'reveal-bar 1s 0.9s cubic-bezier(0.2,0.7,0.2,1) both' }}
              />
            </window.Reveal>
            <span style={{ color: accent }}>.</span>
          </h1>
          <p className="mt-8 text-white/60 max-w-xl text-lg leading-relaxed">
            <window.Multi text={t('hero.lede')} />
          </p>

          <div className="mt-10 flex flex-wrap items-center gap-4">
            <window.Magnetic>
              <a
                href="#catalog"
                className="shine-btn group relative px-7 py-4 text-sm font-bold tracking-wider uppercase text-black overflow-hidden inline-block"
                style={{ background: accent }}
              >
                <span className="relative z-10">{t('hero.cta.catalog')}</span>
              </a>
            </window.Magnetic>
            <window.Magnetic strength={0.25}>
              <a
                href="quote.html"
                className="px-7 py-4 text-sm font-bold tracking-wider uppercase text-white border border-white/30 hover:border-white transition inline-block"
              >
                {t('hero.cta.contact')}
              </a>
            </window.Magnetic>
            <div className="flex items-center gap-2 ml-2">
              <div className="flex -space-x-2">
                {[0, 1, 2, 3].map((i) => (
                  <div key={i} className="w-7 h-7 rounded-full border-2 border-black" style={{ background: `hsl(${i * 60}, 8%, ${20 + i * 8}%)` }} />
                ))}
              </div>
              <div className="text-xs text-white/60">
                <span className="font-bold text-white"><window.Counter to={2400} suffix="+" /></span> {t('hero.clientsSuffix')}
              </div>
            </div>
          </div>
        </div>

        {/* Right: stat cards + product visual */}
        <div className="lg:col-span-5 grid grid-cols-2 gap-3">
          <div className="col-span-2 relative aspect-[4/3] overflow-hidden border border-white/10">
            <StripePlaceholder label={t('hero.heroProductLabel')} accent={accent} ratio="4/3" />
            <div className="absolute top-3 left-3 px-2 py-1 font-mono text-[10px] tracking-wider bg-black/70 text-white border border-white/10">
              {t('hero.tag')}
            </div>
            <div className="absolute bottom-3 right-3 flex items-center gap-2 px-3 py-1.5 bg-black/80 border border-white/10">
              <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{ background: accent }} />
              <span className="font-mono text-[10px] tracking-wider text-white">{t('hero.live')}</span>
            </div>
          </div>
          <div className="border border-white/10 p-5 bg-white/[0.02]">
            <div className="font-mono text-[10px] tracking-[0.2em] text-white/40 mb-2">{t('hero.minOrder')}</div>
            <div className="text-white text-3xl font-black">{t('hero.minOrderValue')}</div>
          </div>
          <div className="border p-5" style={{ background: accent, borderColor: accent }}>
            <div className="font-mono text-[10px] tracking-[0.2em] text-black/60 mb-2">{t('hero.leadTime')}</div>
            <div className="text-black text-3xl font-black">{t('hero.leadTimeValue')}</div>
          </div>
        </div>
      </div>

      {/* Marquee */}
      <div className="relative border-y border-white/10 bg-black overflow-hidden py-4">
        <div className="flex gap-12 whitespace-nowrap" style={{ transform: `translateX(${-((tick * 0.6) % 800)}px)` }}>
          {Array(6).fill(0).map((_, i) => (
            <div key={i} className="flex items-center gap-12 font-black text-3xl text-white/10 tracking-tight">
              <span>SUBLIMATION</span>
              <span style={{ color: accent }}>★</span>
              <span>EMBROIDERY</span>
              <span style={{ color: accent }}>★</span>
              <span>SCREEN PRINT</span>
              <span style={{ color: accent }}>★</span>
              <span>DTG PRINT</span>
              <span style={{ color: accent }}>★</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────
// E-CATALOG (tabbed)
// ─────────────────────────────────────────────────────────────

const CATALOG = {
  uniform: {
    en: "UNIFORM",
    items: [
      { name: "Polo Corporate", code: "UF-101", priceFrom: 280, tag: "bestseller" },
      { name: "Shop Coat", code: "UF-203", priceFrom: 420, tag: null },
      { name: "Work Jacket", code: "UF-308", priceFrom: 580, tag: "new" },
      { name: "Engineer Set", code: "UF-412", priceFrom: 890, tag: null },
    ],
  },
  shirt: {
    en: "T-SHIRT",
    items: [
      { name: "Pro Jersey", code: "TS-101", priceFrom: 220, tag: "bestseller" },
      { name: "Cotton Tee 220g", code: "TS-205", priceFrom: 145, tag: null },
      { name: "Performance Long Sleeve", code: "TS-309", priceFrom: 285, tag: "new" },
      { name: "Event Tee Combo", code: "TS-410", priceFrom: 165, tag: null },
    ],
  },
  pants: {
    en: "PANTS",
    items: [
      { name: "Cargo Workpant", code: "PT-101", priceFrom: 480, tag: null },
      { name: "Athletic Shorts", code: "PT-205", priceFrom: 240, tag: "bestseller" },
      { name: "Track Pants", code: "PT-308", priceFrom: 380, tag: null },
      { name: "Tactical Pants", code: "PT-412", priceFrom: 620, tag: "new" },
    ],
  },
  cap: {
    en: "CAPS",
    items: [
      { name: "Classic Cap", code: "CP-101", priceFrom: 145, tag: "bestseller" },
      { name: "Trucker Mesh", code: "CP-205", priceFrom: 165, tag: null },
      { name: "Bucket Hat", code: "CP-308", priceFrom: 185, tag: null },
      { name: "Snapback Pro", code: "CP-412", priceFrom: 220, tag: "new" },
    ],
  },
};

const Catalog = ({ accent }) => {
  const { t } = window.useLang();
  const [tab, setTab] = useState("uniform");
  const data = CATALOG[tab];

  return (
    <section id="catalog" className="relative px-10 py-32" style={{ background: "#0a0a0a" }}>
      <div className="max-w-7xl mx-auto">
        <SectionLabel num="01" title={t('catalog.section')} accent={accent} />

        <window.Reveal>
        <div className="grid lg:grid-cols-12 gap-10 items-end mb-12">
          <div className="lg:col-span-8">
            <h2 className="text-white font-black leading-[0.95] tracking-tight" style={{ fontSize: "clamp(40px, 5.5vw, 80px)" }}>
              {t('catalog.headline.l1')}<br />{t('catalog.headline.l2')}<span style={{ color: accent }}>.</span>
            </h2>
          </div>
          <div className="lg:col-span-4 text-white/55 text-sm leading-relaxed">
            {t('catalog.subhead')}
          </div>
        </div>
        </window.Reveal>

        {/* Tabs */}
        <div className="flex flex-wrap gap-2 mb-10 border-b border-white/10 pb-6">
          {Object.keys(CATALOG).map((key) => (
            <Pill key={key} active={tab === key} accent={accent} onClick={() => setTab(key)}>
              {t(`catalog.${key}.label`)}
            </Pill>
          ))}
        </div>

        {/* Tab content */}
        <div className="grid lg:grid-cols-12 gap-8">
          <div className="lg:col-span-3">
            <div className="font-mono text-[10px] tracking-[0.25em] text-white/40 mb-3">{t('catalog.category')}</div>
            <div className="text-white text-5xl font-black tracking-tight mb-3">{data.en}</div>
            <div className="w-12 h-1 mb-5" style={{ background: accent }} />
            <p className="text-white/60 text-sm leading-relaxed mb-6">{t(`catalog.${tab}.desc`)}</p>
            <a className="inline-flex items-center gap-2 font-mono text-[11px] tracking-[0.2em] uppercase text-white border-b border-white/30 pb-1 hover:border-white">
              {t('catalog.downloadPdf')}
            </a>
          </div>

          <div className="lg:col-span-9 grid grid-cols-2 md:grid-cols-4 gap-4">
            {data.items.map((it, i) => (
              <window.TiltCard
                key={it.code}
                className="group cursor-pointer border border-white/10 bg-white/[0.02] hover:bg-white/[0.04] transition-all relative overflow-hidden"
              >
                <div className="relative">
                  <StripePlaceholder label={it.code} accent={accent} ratio="4/5" />
                  {it.tag && (
                    <div
                      className="absolute top-3 right-3 px-2 py-0.5 font-mono text-[9px] tracking-wider"
                      style={{
                        background: it.tag === "bestseller" ? accent : "white",
                        color: "black",
                      }}
                    >
                      {t(`catalog.tag.${it.tag}`)}
                    </div>
                  )}
                </div>
                <div className="p-4">
                  <div className="font-mono text-[10px] tracking-wider text-white/40">{it.code}</div>
                  <div className="text-white font-bold text-sm mt-1">{it.name}</div>
                  <div className="flex items-baseline justify-between mt-3">
                    <span className="text-white/60 text-xs">{t('catalog.priceFrom')} {it.priceFrom} {t('catalog.priceUnit')}</span>
                    <span
                      className="font-mono text-[10px] tracking-wider opacity-0 group-hover:opacity-100 transition"
                      style={{ color: accent }}
                    >
                      {t('catalog.view')}
                    </span>
                  </div>
                </div>
              </window.TiltCard>
            ))}
          </div>
        </div>

        {/* Process strip */}
        <div id="process" className="mt-20 grid grid-cols-2 md:grid-cols-4 border-t border-white/10">
          {["01", "02", "03", "04"].map((num) => (
            <div key={num} className="border-r border-b last:border-r-0 border-white/10 p-6 hover:bg-white/[0.03] transition-all">
              <div className="font-black text-4xl mb-3" style={{ color: accent }}>{num}</div>
              <div className="text-white font-bold text-base">{t(`process.${num}.title`)}</div>
              <div className="font-mono text-[10px] tracking-wider text-white/40 mt-1">{t(`process.${num}.subtitle`)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────
// PORTFOLIO
// ─────────────────────────────────────────────────────────────

const PORTFOLIO_META = [
  { industry: "MANUFACTURING", pcs: "1,200" },
  { industry: "SPORTS CLUB", pcs: "48" },
  { industry: "F&B / RETAIL", pcs: "32" },
  { industry: "EDUCATION", pcs: "850" },
];

const Portfolio = ({ accent }) => {
  const { t } = window.useLang();
  const [active, setActive] = useState(0);
  const meta = PORTFOLIO_META[active];
  const client = t(`portfolio.${active}.client`);
  const type = t(`portfolio.${active}.type`);
  const quote = t(`portfolio.${active}.quote`);
  const person = t(`portfolio.${active}.person`);

  return (
    <section id="portfolio" className="relative px-10 py-32 border-t border-white/5" style={{ background: "#0a0a0a" }}>
      <div className="max-w-7xl mx-auto">
        <SectionLabel num="02" title={t('portfolio.section')} accent={accent} />

        <div className="flex flex-wrap items-end justify-between gap-6 mb-16">
          <h2 className="text-white font-black leading-[0.95] tracking-tight" style={{ fontSize: "clamp(40px, 5.5vw, 80px)" }}>
            {t('portfolio.headline.l1')}<br />{t('portfolio.headline.l2')}<span style={{ color: accent }}>.</span>
          </h2>
          <div className="flex items-center gap-6">
            <div>
              <div className="font-mono text-[10px] tracking-[0.25em] text-white/40">{t('portfolio.case')}</div>
              <div className="text-white font-black text-3xl">
                {String(active + 1).padStart(2, "0")}<span className="text-white/30">/{String(PORTFOLIO_META.length).padStart(2, "0")}</span>
              </div>
            </div>
            <div className="flex gap-2">
              <button
                onClick={() => setActive((active - 1 + PORTFOLIO_META.length) % PORTFOLIO_META.length)}
                className="w-12 h-12 border border-white/20 text-white hover:bg-white hover:text-black transition flex items-center justify-center"
              >←</button>
              <button
                onClick={() => setActive((active + 1) % PORTFOLIO_META.length)}
                className="w-12 h-12 text-black flex items-center justify-center font-bold"
                style={{ background: accent }}
              >→</button>
            </div>
          </div>
        </div>

        {/* Featured case */}
        <div className="grid lg:grid-cols-12 gap-6 mb-16">
          <div className="lg:col-span-7 relative border border-white/10">
            <StripePlaceholder label={`${client.toUpperCase()} — ${type.toUpperCase()}`} accent={accent} ratio="16/10" />
            <div className="absolute top-5 left-5 flex items-center gap-2">
              <div className="w-2 h-2" style={{ background: accent }} />
              <span className="font-mono text-[10px] tracking-[0.25em] text-white/80">{t('portfolio.featured')}</span>
            </div>
            <div className="absolute bottom-5 left-5 right-5 flex items-end justify-between">
              <div>
                <div className="font-mono text-[10px] tracking-[0.2em] text-white/50 mb-1">{meta.industry}</div>
                <div className="text-white font-black text-3xl">{client}</div>
              </div>
              <div className="text-right">
                <div className="font-mono text-[10px] tracking-wider text-white/50">{t('portfolio.pieces')}</div>
                <div className="text-white font-black text-3xl">{meta.pcs}</div>
              </div>
            </div>
          </div>

          <div className="lg:col-span-5 flex flex-col">
            <div className="border border-white/10 p-8 flex-1 bg-white/[0.02]">
              <div className="font-mono text-[10px] tracking-[0.25em] text-white/40 mb-3">{t('portfolio.projectType')}</div>
              <div className="text-white text-2xl font-bold mb-6">{type}</div>

              <div className="text-5xl font-black mb-3 leading-none" style={{ color: accent }}>"</div>
              <p className="text-white/80 text-lg leading-relaxed mb-6">{quote}</p>
              <div className="font-mono text-[11px] tracking-wider text-white/50">— {person}</div>
            </div>
            <div className="border border-white/10 border-t-0 p-6 grid grid-cols-3 divide-x divide-white/10">
              <div>
                <div className="font-mono text-[9px] tracking-wider text-white/40">{t('portfolio.delivery')}</div>
                <div className="text-white font-bold text-base mt-1">{t('portfolio.deliveryValue')}</div>
              </div>
              <div className="px-4">
                <div className="font-mono text-[9px] tracking-wider text-white/40">{t('portfolio.fabric')}</div>
                <div className="text-white font-bold text-base mt-1">{t('portfolio.fabricValue')}</div>
              </div>
              <div className="px-4">
                <div className="font-mono text-[9px] tracking-wider text-white/40">{t('portfolio.print')}</div>
                <div className="text-white font-bold text-base mt-1">{t('portfolio.printValue')}</div>
              </div>
            </div>
          </div>
        </div>

        {/* Thumbnails */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {PORTFOLIO_META.map((item, i) => (
            <button
              key={i}
              onClick={() => setActive(i)}
              className="text-left group border transition-all"
              style={{
                borderColor: i === active ? accent : "rgba(255,255,255,0.08)",
                background: i === active ? "rgba(230,51,41,0.05)" : "transparent",
              }}
            >
              <StripePlaceholder label={t(`portfolio.${i}.client`)} accent={accent} ratio="4/3" />
              <div className="p-3">
                <div className="font-mono text-[9px] tracking-wider text-white/40">{item.industry}</div>
                <div className="text-white font-bold text-sm mt-1 truncate">{t(`portfolio.${i}.client`)}</div>
                <div className="text-white/50 text-xs mt-0.5">{item.pcs} {t('portfolio.pieces.unit')} · {t(`portfolio.${i}.type`)}</div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────
// ABOUT US
// ─────────────────────────────────────────────────────────────

const About = ({ accent }) => {
  const { t } = window.useLang();
  return (
  <section id="about" className="relative px-10 py-32 border-t border-white/5" style={{ background: "#0a0a0a" }}>
    <div className="max-w-7xl mx-auto">
      <SectionLabel num="03" title={t('about.section')} accent={accent} />

      <div className="grid lg:grid-cols-12 gap-12 mb-20">
        <div className="lg:col-span-7">
          <h2 className="text-white font-black leading-[0.95] tracking-tight mb-8" style={{ fontSize: "clamp(40px, 5.5vw, 80px)" }}>
            {t('about.headline.l1')}<br />{t('about.headline.l2')} <span style={{ color: accent }}>{t('about.headline.l3')}</span><br />{t('about.headline.l4')}
          </h2>
          <div className="space-y-5 text-white/70 text-base leading-relaxed max-w-2xl">
            <p>
              {t('about.body.p1.before')}<span className="text-white font-medium">{t('about.body.p1.highlight')}</span>
            </p>
            <p>{t('about.body.p2')}</p>
          </div>
        </div>

        <div className="lg:col-span-5 grid grid-cols-2 gap-3">
          {[
            { code: "YEARS", labelKey: "about.stat.years", n: 12, suf: "+", dec: 0 },
            { code: "CLIENTS", labelKey: "about.stat.clients", n: 2400, suf: "+", dec: 0 },
            { code: "CAPACITY", labelKey: "about.stat.capacity", n: 80, suf: "K", dec: 0 },
            { code: "ON-TIME", labelKey: "about.stat.ontime", n: 98.4, suf: "%", dec: 1 },
          ].map((s, i) => {
            const filled = i === 0 || i === 3;
            return (
              <div
                key={i}
                className="aspect-square border p-5 flex flex-col justify-between"
                style={{
                  borderColor: filled ? accent : "rgba(255,255,255,0.1)",
                  background: filled ? accent : "transparent",
                }}
              >
                <div className="font-mono text-[10px] tracking-[0.2em]" style={{ color: filled ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.4)" }}>
                  / {s.code}
                </div>
                <div>
                  <div
                    className="font-black leading-none mb-2"
                    style={{
                      fontSize: "clamp(36px, 4vw, 56px)",
                      color: filled ? "#0a0a0a" : "white",
                    }}
                  >
                    <window.Counter to={s.n} suffix={s.suf} decimals={s.dec} />
                  </div>
                  <div className="text-sm" style={{ color: filled ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.5)" }}>
                    {t(s.labelKey)}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Values */}
      <div className="grid md:grid-cols-3 gap-px bg-white/10">
        {["01", "02", "03"].map((n) => (
          <div key={n} className="bg-[#0a0a0a] p-8 hover:bg-white/[0.02] transition">
            <div className="flex items-baseline gap-3 mb-4">
              <span className="font-mono text-xs tracking-wider" style={{ color: accent }}>/ {n}</span>
              <span className="font-mono text-[10px] tracking-[0.25em] text-white/40">
                {n === "01" ? "PREMIUM FABRIC" : n === "02" ? "IN-HOUSE DESIGN" : "TRIPLE QC"}
              </span>
            </div>
            <h3 className="text-white text-2xl font-black mb-3">{t(`about.value.${n}.title`)}</h3>
            <p className="text-white/60 text-sm leading-relaxed">{t(`about.value.${n}.body`)}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
  );
};

// ─────────────────────────────────────────────────────────────
// CONTACT
// ─────────────────────────────────────────────────────────────

const Contact = ({ accent }) => {
  const { t } = window.useLang();
  return (
    <section id="contact" className="relative px-10 py-32 border-t border-white/5 overflow-hidden" style={{ background: "#0a0a0a" }}>
      <div
        className="absolute -left-40 bottom-0 w-[600px] h-[600px] rounded-full blur-[140px] opacity-25"
        style={{ background: accent }}
      />
      <div className="relative max-w-7xl mx-auto">
        <SectionLabel num="04" title={t('contact.section')} accent={accent} />

        <div className="grid lg:grid-cols-12 gap-10 items-start">
          <div className="lg:col-span-5">
            <h2 className="text-white font-black leading-[0.95] tracking-tight mb-8" style={{ fontSize: "clamp(40px, 5.5vw, 80px)" }}>
              {t('contact.headline.l1')}<br />{t('contact.headline.l2')} <span style={{ color: accent }}>{t('contact.headline.l3')}</span>.
            </h2>
            <p className="text-white/60 text-base leading-relaxed mb-10 max-w-md">
              {t('contact.subhead')}
            </p>

            <window.Magnetic>
              <a
                href="quote.html"
                className="shine-btn inline-flex items-center gap-3 px-9 py-5 text-base font-bold tracking-wider uppercase text-black"
                style={{ background: accent }}
              >
                <span>{t('contact.cta')}</span>
                <span className="text-xl">→</span>
              </a>
            </window.Magnetic>
            <div className="mt-4 font-mono text-[11px] tracking-wider text-white/40">
              {t('contact.formCode')}
            </div>
          </div>

          {/* Channels */}
          <div className="lg:col-span-7">
            <div className="grid sm:grid-cols-2 gap-px bg-white/10">
              {[
                { keyBase: "contact.line", value: "@fenixuniform", glyph: "L" },
                { keyBase: "contact.phone", value: "02-XXX-XXXX", glyph: "☎" },
                { keyBase: "contact.email", value: "sales@fenix.co.th", glyph: "@" },
                { keyBase: "contact.factory", value: t('contact.factory.value'), glyph: "▢" },
              ].map((c) => (
                <a
                  key={c.keyBase}
                  className="bg-[#0a0a0a] flex flex-col gap-4 p-7 hover:bg-white/[0.04] transition group cursor-pointer min-h-[200px]"
                >
                  <div
                    className="w-12 h-12 flex items-center justify-center font-black text-lg"
                    style={{ background: accent, color: "#0a0a0a" }}
                  >
                    {c.glyph}
                  </div>
                  <div className="flex-1">
                    <div className="font-mono text-[10px] tracking-[0.25em] text-white/40 mb-2">{t(`${c.keyBase}.label`)}</div>
                    <div className="text-white font-black text-xl mb-1">{c.value}</div>
                    <div className="text-white/50 text-sm">{t(`${c.keyBase}.sub`)}</div>
                  </div>
                  <div className="font-mono text-[10px] tracking-wider text-white/30 group-hover:text-white transition flex items-center gap-2">
                    {t('contact.openChannel')} <span>→</span>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────────────────────

const Footer = ({ accent }) => {
  const { t } = window.useLang();
  return (
  <footer className="relative border-t border-white/10 px-10 py-12" style={{ background: "#080808" }}>
    <div className="max-w-7xl mx-auto">
      <div className="grid md:grid-cols-4 gap-10 mb-12 pb-12 border-b border-white/10">
        <div className="md:col-span-2">
          <div className="flex items-center gap-3 mb-5">
            <div className="relative w-10 h-10">
              <div className="absolute inset-0" style={{ background: accent, clipPath: "polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%)" }} />
              <div className="absolute inset-[3px] bg-black flex items-center justify-center font-black text-white" style={{ clipPath: "polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%)" }}>F</div>
            </div>
            <div>
              <div className="text-white font-black tracking-tight text-xl">FENIX UNIFORM</div>
              <div className="font-mono text-[9px] tracking-[0.3em] text-white/40">EST. 2014 · BANGKOK</div>
            </div>
          </div>
          <p className="text-white/50 text-sm max-w-md leading-relaxed">
            {t('footer.tagline')}
          </p>
        </div>
        <div>
          <div className="font-mono text-[10px] tracking-[0.25em] text-white/40 mb-4">CATALOG</div>
          <ul className="space-y-2 text-white/70 text-sm">
            <li><a className="hover:text-white">{t('footer.catalog.uniform')}</a></li>
            <li><a className="hover:text-white">{t('footer.catalog.shirt')}</a></li>
            <li><a className="hover:text-white">{t('footer.catalog.pants')}</a></li>
            <li><a className="hover:text-white">{t('footer.catalog.cap')}</a></li>
          </ul>
        </div>
        <div>
          <div className="font-mono text-[10px] tracking-[0.25em] text-white/40 mb-4">CONTACT</div>
          <ul className="space-y-2 text-white/70 text-sm">
            <li>LINE @fenixuniform</li>
            <li>02-XXX-XXXX</li>
            <li>sales@fenix.co.th</li>
            <li>{t('footer.address')}</li>
          </ul>
        </div>
      </div>
      <div className="flex flex-wrap items-center justify-between gap-3 font-mono text-[10px] tracking-wider text-white/40">
        <div>© 2026 FENIX UNIFORM CO., LTD. · ALL RIGHTS RESERVED</div>
        <div className="flex items-center gap-2">
          <span className="w-1.5 h-1.5 rounded-full" style={{ background: accent }} />
          BUILT TO PERFORM
        </div>
      </div>
    </div>
  </footer>
  );
};

// ─────────────────────────────────────────────────────────────
// APP
// ─────────────────────────────────────────────────────────────

const App = () => {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const accent = t.accent;

  // Density CSS var
  useEffect(() => {
    document.documentElement.style.setProperty(
      "--section-py",
      t.density === "compact" ? "5rem" : t.density === "spacious" ? "10rem" : "8rem"
    );
  }, [t.density]);

  return (
    <>
      <style>{`
        body { background: #0a0a0a; }
        section[id] { padding-top: var(--section-py, 8rem); padding-bottom: var(--section-py, 8rem); }
        ::selection { background: ${accent}; color: #000; }
        @keyframes reveal-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
      `}</style>
      <window.Grain />
      <window.ScrollProgress accent={accent} />
      <window.CustomCursor accent={accent} />
      <Hero accent={accent} />
      <Catalog accent={accent} />
      <Portfolio accent={accent} />
      <About accent={accent} />
      <Contact accent={accent} />
      <Footer accent={accent} />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Brand">
          <window.TweakColor
            label="Accent"
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#E63329", "#FF3B30", "#DC2626", "#FF6B00", "#FACC15", "#22C55E"]}
          />
        </window.TweakSection>
        <window.TweakSection title="Layout">
          <window.TweakRadio
            label="Density"
            value={t.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "compact", label: "Compact" },
              { value: "comfortable", label: "Default" },
              { value: "spacious", label: "Spacious" },
            ]}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);