// Resource pages — Artwork Guidelines, Templates, Materials, Sizing Guide, Sustainability, Blog

// ── Blog post data ───────────────────────────────────────────────────────────
const BLOG_POSTS = [
  {
    id:1, title:'Die-Cut vs Kiss-Cut Stickers: Which One Do You Need?',
    category:'Product Guide', date:'12 May 2026', readTime:'5 min read',
    img:'assets/sticker-sheets.jpeg',
    excerpt:'Both look great on your laptop. But die-cut and kiss-cut are very different products — and choosing the wrong one can cost you.',
    content:[
      {t:'p',s:'Walk into any sticker shop and you\'ll find die-cut and kiss-cut listed side by side. Both are printed on vinyl, both are cut by machine, and both result in a sticker. So what\'s actually different?'},
      {t:'h2',s:'What is a die-cut sticker?'},
      {t:'p',s:'A die-cut sticker is cut all the way through — through the vinyl and through the backing paper. The result is a single sticker with no surrounding border. When you peel it off, you get exactly the shape of your artwork: a star, a gorilla head, a lightning bolt, whatever you printed. Die-cuts are the most common sticker type. They\'re clean, professional, and work beautifully for logos, characters, and bold shapes.'},
      {t:'h2',s:'What is a kiss-cut sticker?'},
      {t:'p',s:'A kiss-cut only cuts through the vinyl — not the backing paper. Your sticker sits on a sheet of white backing with a small border around it. Peeling it is easy: grab the corner, peel the sticker off, press it down. Kiss-cuts are ideal when you want easy application — especially for stickers to be given out to customers or kids.'},
      {t:'h2',s:'Which should you order?'},
      {t:'p',s:'If you\'re making stickers for your brand, products, or personal use — die-cut is almost always the better choice. It looks premium and the shape becomes part of the design. If you\'re making stickers to give away, sell at markets, or hand out at events — kiss-cut on sheets is the smart move. You can pack 4–8 designs onto one A5 sheet, which lowers handling cost and makes them easier for customers to peel.'},
      {t:'p',s:'Still not sure? Order our $1 sample pack — it includes both types so you can feel the difference before you commit.'},
    ]
  },
  {
    id:2, title:'How to Design a Sticker That Prints Perfectly Every Time',
    category:'Artwork Tips', date:'8 May 2026', readTime:'7 min read',
    img:'assets/upload-artwork.jpeg',
    excerpt:'Great artwork that prints badly is worse than okay artwork that prints well. Here\'s everything you need to know about setting up your file.',
    content:[
      {t:'p',s:'We\'ve seen a lot of files. The ones that print beautifully every time share a handful of common traits — and none of them require a graphic design degree.'},
      {t:'h2',s:'Use the right file format'},
      {t:'p',s:'Vector formats (SVG, AI, PDF with embedded vectors, EPS) are always best. Vectors scale to any size without losing quality, and your cut lines will be razor-sharp. If you\'re working in Illustrator or Figma, export as PDF or SVG.'},
      {t:'p',s:'Raster files (PNG, JPG) work fine at high enough resolution — at least 300dpi at print size. A 100mm sticker needs a file at least 1181 × 1181px. Anything lower and you\'ll see pixelation in print.'},
      {t:'h2',s:'Add 3mm of bleed'},
      {t:'p',s:'Bleed is extra artwork extending beyond your cut line. Cutting machines have a tiny variance — without bleed, that variance shows as a white edge. With 3mm of bleed, it\'s invisible.'},
      {t:'h2',s:'Keep content inside the safe zone'},
      {t:'p',s:'The safe zone is 5mm inside your cut line. Text, faces, logos — anything critical — should stay inside this boundary. Anything outside risks being clipped.'},
      {t:'h2',s:'Use CMYK colour mode'},
      {t:'p',s:'Screens use RGB. Printers use CMYK. If you submit an RGB file we\'ll convert it — but colour shifts can happen, especially with vivid greens and blues. For the most accurate result, set your file to CMYK before exporting.'},
      {t:'h2',s:'Transparent backgrounds for die-cuts'},
      {t:'p',s:'For die-cut stickers, your PNG should have a transparent background (the checkerboard pattern in Photoshop). This tells us where to cut. A white background will result in a rectangular sticker — which is probably not what you want. Not sure if your file is set up correctly? Upload it anyway — our designers do a free file check on every order.'},
    ]
  },
  {
    id:3, title:'The Complete Guide to Holographic Stickers',
    category:'Materials', date:'3 May 2026', readTime:'6 min read',
    img:'assets/holo-rainbow.jpeg',
    excerpt:'Holographic stickers aren\'t just shiny — they\'re a whole vibe. Here\'s how they\'re made, what makes them special, and when to use them.',
    content:[
      {t:'p',s:'There\'s a moment when someone sees a holographic sticker in person for the first time and immediately reaches for it. That instinct is exactly why holo stickers work so well for brands, artists, and anyone who wants their sticker to get noticed.'},
      {t:'h2',s:'How holographic stickers are made'},
      {t:'p',s:'Standard vinyl stickers are printed onto a white or clear vinyl base. Holographic stickers use a special substrate with a diffraction grating embedded into the surface — microscopic ridges that split light into the spectrum as it moves across the sticker. Your artwork is printed on top using white ink as a base layer, so the holo effect shows through.'},
      {t:'h2',s:'Types of holographic film'},
      {t:'p',s:'Rainbow holo is the most recognisable — shifting through the full colour spectrum as the angle changes. Gold holo has a warmer, premium feel with amber and copper tones. Chrome holo is a cooler, silver-based film that looks almost mirror-like in direct light. We stock all three, available in matte or gloss laminate.'},
      {t:'h2',s:'Designing for holographic'},
      {t:'p',s:'The holo effect is most visible in lighter areas of your design. Dark fills absorb more light and show less shimmer — which can be used intentionally for contrast. Bold outlines and simple shapes work best on holo because the busy substrate pattern competes with complex detail.'},
      {t:'h2',s:'When to choose holographic'},
      {t:'p',s:'Holo stickers are perfect for product packaging inserts, brand merch, artist prints, special edition runs, and anything you want to feel premium or collectible. If your sticker is going on a plain surface — white laptop, cardboard packaging — holo will pop harder than anything else.'},
    ]
  },
  {
    id:4, title:'Why Custom Stickers Are the Best Marketing Tool for Small Business',
    category:'Business', date:'28 April 2026', readTime:'5 min read',
    img:'assets/laptop-sticker.jpeg',
    excerpt:'A $0.39 sticker can generate hundreds of impressions over its lifetime. That\'s a cost-per-impression no digital ad can touch.',
    content:[
      {t:'p',s:'Marketing budgets for small businesses are tight. Every dollar needs to work hard. So why do some of the smartest small brands spend money on stickers — a product they literally give away?'},
      {t:'h2',s:'The maths are hard to argue with'},
      {t:'p',s:'A single sticker costs as little as $0.39 at bulk pricing. Stick it on a laptop in a café and it\'s seen by every person who sits near that person for the next 3–5 years. At even 2 views per day, that\'s over 3,000 impressions — a CPM of $0.13. A Facebook ad in Australia averages $6–12 CPM.'},
      {t:'h2',s:'They go where ads can\'t'},
      {t:'p',s:'Digital ads disappear when the budget runs out. A sticker on a water bottle goes to the gym, to work, to the park, to a friend\'s house. It\'s a walking billboard that the customer chose to put on their stuff — which means it carries social proof. No ad buy can replicate that.'},
      {t:'h2',s:'They turn customers into advocates'},
      {t:'p',s:'When someone sticks your brand on their laptop, they\'re not just displaying it — they\'re endorsing it. That\'s a fundamentally different signal than clicking an ad. The sticker says "I chose this brand and I want people to know."'},
      {t:'h2',s:'How to use them effectively'},
      {t:'p',s:'Pack them in every order you ship. Put a stack on the counter at your store. Include them in press kits. Give them to staff to hand out. Make them good enough that people actually want to stick them — a well-designed sticker that captures your brand personality is something people will keep, use, and show off.'},
    ]
  },
  {
    id:5, title:'Vinyl, Clear, Glitter or Holo: Which Material Should You Choose?',
    category:'Materials', date:'21 April 2026', readTime:'6 min read',
    img:'assets/sticker-collection.jpeg',
    excerpt:'Every material has a personality. Match the right one to your design and you\'ll get a result that feels intentional, not accidental.',
    content:[
      {t:'p',s:'Choosing a material isn\'t just about durability — it\'s about what you want the sticker to feel like. Each substrate has its own character.'},
      {t:'h2',s:'Standard vinyl'},
      {t:'p',s:'Vinyl is the workhorse. It prints with excellent colour accuracy, holds up to UV and water, and comes in matte or gloss. If you\'re not sure what to order, start here. It works for everything from logos to illustrations to text-heavy designs. Best for: brand stickers, product labels, bulk runs where cost matters.'},
      {t:'h2',s:'Clear vinyl'},
      {t:'p',s:'Clear vinyl has no white base — the sticker appears to float on whatever surface it\'s applied to. We use white ink to print on clear, so light-coloured areas still show up, but the overall effect is more subtle and sophisticated. High-contrast designs with dark outlines work best. Best for: window decals, bottles, phone cases, anywhere you want the surface to show through.'},
      {t:'h2',s:'Glitter vinyl'},
      {t:'p',s:'Glitter vinyl embeds real chunky glitter particles into the sticker surface. It catches light differently to holo — less iridescent, more textured. The glitter is sealed under laminate so it won\'t shed. Best for: party stickers, packaging inserts, kids\' stickers, anything that needs to feel celebratory or playful.'},
      {t:'h2',s:'Holographic'},
      {t:'p',s:'Holo is the loudest of the four. The colour-shifting substrate makes your sticker visible from across a room and adds a premium, collectible quality. It costs a little more and requires careful design work. Best for: artist prints, limited edition runs, merch, anything you want to feel premium or special.'},
      {t:'h2',s:'Still not sure?'},
      {t:'p',s:'Order our $1 sample pack. It includes samples of all four materials so you can hold them in your hand before committing to a full order.'},
    ]
  },
  {
    id:6, title:'How to Apply Stickers Without Bubbles, Creases or Lifting Edges',
    category:'How-To', date:'14 April 2026', readTime:'4 min read',
    img:'assets/water-bottle.jpeg',
    excerpt:'A great sticker applied badly is still a bad sticker. Here\'s the right technique for a clean, bubble-free result every time.',
    content:[
      {t:'p',s:'You\'ve got your stickers. They look great. Now comes the part where a lot of people mess it up. Sticker application is simple — but a few things separate a clean result from a bubbly, crooked disappointment.'},
      {t:'h2',s:'Clean the surface first'},
      {t:'p',s:'This is the step most people skip and then regret. Dust, oils, and moisture all prevent the adhesive from bonding properly. Wipe the surface with isopropyl alcohol (70% works fine) and let it dry completely before applying. For textured surfaces like laptops and bottles, a clean microfibre cloth works well.'},
      {t:'h2',s:'Peel slowly and hold flat'},
      {t:'p',s:'Peel the backing paper slowly from one corner. Don\'t bend or fold the sticker. Hold it flat, adhesive side down, just above your surface. Take a second to line it up before you commit — once it touches the surface, repositioning risks stretching the vinyl.'},
      {t:'h2',s:'Apply from one edge, work across'},
      {t:'p',s:'Start at one edge and press down with your finger, working across the sticker. Don\'t press the centre first — that traps air and creates bubbles. Use a card or squeegee (the back of a loyalty card works perfectly) to smooth down with firm, even pressure.'},
      {t:'h2',s:'For large stickers: use the wet method'},
      {t:'p',s:'Mist the surface lightly with soapy water (1 drop of dish soap in a spray bottle). Apply the sticker — the soapy water lets you reposition it. Once aligned, squeegee from the centre outward to push the water out. Leave to dry for 24 hours before getting it wet again.'},
      {t:'h2',s:'Dealing with bubbles after application'},
      {t:'p',s:'Small bubbles (under 5mm) usually disappear within a few days as the adhesive sets. For larger bubbles, use a pin to make a tiny hole, press the air out, and smooth flat. The pin hole will be invisible. If a sticker won\'t stick at all — sometimes happens with very textured or powder-coated metal — contact us and we\'ll reprint with a stronger adhesive at no charge.'},
    ]
  },
  {
    id:7, title:'Your Laptop Is Naked. And Everyone Can Tell.',
    category:'Lifestyle', date:'23 May 2026', readTime:'4 min read',
    img:'assets/bestsellers-grid-8.jpeg',
    excerpt:'A blank lid is a missed opportunity. Or worse — it\'s telling people you have no opinions, no hobbies, and possibly own a beige couch.',
    content:[
      {t:'p',s:'The laptop lid. The most valuable real estate in any café, coworking space, or university library. And there it sits. Blank. Shiny. Saying absolutely nothing about you. We\'re here to help.'},
      {t:'h2',s:'What a bare laptop says about you'},
      {t:'p',s:'Nothing. That\'s the problem. You could be anyone. An accountant. A conspiracy theorist. A mid-level manager with strong opinions about synergy. The sticker is the tell. It\'s the bumper sticker, the band tee, the 2-second character introduction you give everyone who sits near you. You\'re throwing it away.'},
      {t:'h2',s:'The rules of laptop stickering'},
      {t:'p',s:'One sticker is a statement. Three stickers is a personality. Seven stickers is a lifestyle. Fourteen stickers is a cry for help — but honestly, we respect the commitment. Over twenty and you\'ve entered full artist territory. Lean into it.'},
      {t:'h2',s:'But what if I\'m boring?'},
      {t:'p',s:'Nobody is too boring for a sticker. That\'s the whole point. Your dog\'s face. Your local surf break. Your business logo on chrome holo. A tiny gorilla (we\'re partial to that one). The only wrong move is the blank lid.'},
      {t:'h2',s:'It\'s also doing work while you\'re getting a coffee'},
      {t:'p',s:'A sticker on your lid is being seen by the person at the next table, the barista, the guy waiting for the bathroom. At around $0.39 per sticker at scale it\'s the cheapest ad buy you\'ll ever make. And it works even when you\'re not. Your laptop is not working hard enough. Fix that.'},
    ]
  },
  {
    id:8, title:'We\'ve Seen Some Artwork Files. Let\'s Talk.',
    category:'Artwork Tips', date:'22 May 2026', readTime:'5 min read',
    img:'assets/quick-proofs.jpeg',
    excerpt:'In five years of printing, we\'ve seen files that made us laugh, files that made us cry, and one file that may have briefly broken our RIP software.',
    content:[
      {t:'p',s:'We\'re not here to shame anyone. We\'re here to help. But in the spirit of helping, we need to share what arrives in our inbox sometimes — because if it\'s happening to you, it\'s happening to others, and the sticker-printing world needs this conversation.'},
      {t:'h2',s:'The Screenshot'},
      {t:'p',s:'A screenshot of a logo. From a website. On a phone. Saved as a JPEG. Emailed to us with the note: "high quality please." The resolution at print size: 14dpi. For reference, you need 300dpi. For further reference, 14dpi is what you\'d get if you printed your face on a billboard from 400 metres away. We can\'t work with this. But we will absolutely try.'},
      {t:'h2',s:'The "Can You Just Clean It Up a Bit?"'},
      {t:'p',s:'There\'s a version of this request that is reasonable. A slight crop, a colour tweak. Then there\'s the version where "clean it up" means "I know this is a photo of a printed logo that was then photocopied, scanned on a 2009 HP OfficeJet, and emailed as a PDF." Vectorising is possible. It is not free. And it does involve one of our designers making a deal with the universe.'},
      {t:'h2',s:'The Canva Export That Isn\'t Quite Right'},
      {t:'p',s:'Canva is great. Genuinely. For most things. But there\'s a specific Canva PDF export that quietly converts fonts in a way that looks correct in preview but has turned all your text into imperceptibly wrong glyphs. If you\'re exporting from Canva, export as PNG at 300dpi. Don\'t let Canva near a PDF unless you know exactly what you\'re doing.'},
      {t:'h2',s:'How to send us a file we\'ll love'},
      {t:'p',s:'Vector (AI, EPS, SVG, PDF with embedded outlines). Or PNG at 300dpi at print size. Transparent background for die-cuts. 3mm bleed. That is the whole list. We give you a free proof before printing a single thing — so even if your file isn\'t perfect, we\'ll catch it before anything goes wrong.'},
    ]
  },
  {
    id:9, title:'The 7 Types of Sticker Person (Which One Are You?)',
    category:'Lifestyle', date:'20 May 2026', readTime:'5 min read',
    img:'assets/bananas-burst.jpeg',
    excerpt:'After printing millions of stickers for thousands of customers, patterns emerge. We\'ve catalogued every type. No judgement. Some judgement.',
    content:[
      {t:'p',s:'After printing millions of stickers for tens of thousands of customers, you start to see the same personalities emerge. We present them here as a public service.'},
      {t:'h2',s:'The Brand Builder'},
      {t:'p',s:'Every order has a purpose. The stickers go on packaging, in orders, at trade shows. They have a unit economics spreadsheet. They order in bulk because the per-unit cost makes sense and they know it. Organised, deliberate, and an absolute pleasure to deal with.'},
      {t:'h2',s:'The Artist'},
      {t:'p',s:'New design every order. Sometimes multiple designs in one order. The designs are always good. They know exactly what file format to send. Their colour profiles are correct. Their bleed is set up perfectly. They are the reason our proofing team has high standards.'},
      {t:'h2',s:'The "It\'s for a Gift"'},
      {t:'p',s:'It\'s never just for a gift. It\'s for a gift, and also they want twelve of the same one, and also can they get a few extras, and also can we do a holographic version? The sticker is usually of the recipient\'s dog. We are completely here for this.'},
      {t:'h2',s:'The Wedding People'},
      {t:'p',s:'They found us three weeks before the wedding. They need 400 custom stickers for bomboniere. The vision involves gold holographic and a very specific font. We almost always make it happen. We are proud of this.'},
      {t:'h2',s:'The Kid (Via Their Parent\'s Email)'},
      {t:'p',s:'The email is signed with a parent\'s name but the brief is clearly from someone under 12. "Can you make a sticker of my hamster Noodles but she\'s a superhero." Yes. We can. We would be honoured.'},
      {t:'h2',s:'The Person Who Stickers Everything'},
      {t:'p',s:'Their water bottle. Laptop. Car window. Guitar case. Skateboard. Dog\'s collar tag. Friends\' fridges. They don\'t order stickers — they order refills. They are the reason we exist.'},
      {t:'h2',s:'The Reluctant Convert'},
      {t:'p',s:'They needed stickers for something practical — product labels, something boring — and then they saw the die-cut options and the holographic options and now they\'re three tabs deep thinking about a chrome holo version of their logo. Welcome. There\'s no way back.'},
    ]
  },
  {
    id:10, title:'Why Are Your Stickers Peeling? A Thorough Investigation.',
    category:'How-To', date:'18 May 2026', readTime:'5 min read',
    img:'assets/brick-lifestyle.jpeg',
    excerpt:'Not all peeling is created equal. Some of it is the surface\'s fault. Some of it is your fault. Let\'s sort it out.',
    content:[
      {t:'p',s:'There are few sadder sights in the sticker world than a corner lift. The sticker was doing so well. And now there\'s a curl happening, and you\'re pressing it down with your thumb every time you walk past it, and it\'s not sticking, and you\'re blaming the sticker when really — and we say this with kindness — it might be you.'},
      {t:'h2',s:'The surface was dirty'},
      {t:'p',s:'Number one cause of premature peeling, by a long margin. Dust, oil, moisture — all create a barrier between the adhesive and the surface. Before applying any sticker to anything, wipe the surface with isopropyl alcohol or at minimum a dry, lint-free cloth. Not water — it leaves residue. Not your shirt — also leaves residue.'},
      {t:'h2',s:'The surface was curved or textured'},
      {t:'p',s:'Flat, smooth surfaces are the natural habitat of a sticker. Tight curves (water bottle necks, helmet edges) force the sticker to stretch, fighting the adhesive. Textured surfaces (brick, rough powder coat) don\'t give the adhesive enough contact area. For curves, use smaller stickers with more flex. For heavy texture, let us know and we\'ll recommend the right adhesive.'},
      {t:'h2',s:'You applied it in the cold'},
      {t:'p',s:'Adhesives activate with pressure and warmth. Slapping a sticker on a car window at 7am in winter means the adhesive hasn\'t warmed up enough to bond properly. Apply at room temperature, press firmly across the whole surface, and let it sit 24 hours before exposing it to water or extreme temperature swings.'},
      {t:'h2',s:'It might just be the surface type'},
      {t:'p',s:'Some surfaces are nightmare territory for any adhesive. Fresh powder-coated steel can outgas for weeks after curing, lifting stickers regardless of cleanliness. Silicone phone cases have almost no adhesion compatibility with standard vinyl adhesive. Rubberised plastic is similarly difficult. If you\'re applying to any of these, ask us — there are specific adhesive options that work significantly better.'},
      {t:'h2',s:'Our stickers will outlast the bad application'},
      {t:'p',s:'King Kong stickers use premium outdoor-rated vinyl with a 5-year UV rating. They survive dishwashers, car washes, and Australian summers. If yours is peeling, it\'s an application issue — not a materials issue. Follow the steps above and you\'ll have stickers that stay put until you decide you want them off.'},
    ]
  },
  {
    id:11, title:'A Defence of Being Extra: The Case for Holographic Everything',
    category:'Materials', date:'16 May 2026', readTime:'4 min read',
    img:'assets/holo-chrome.jpeg',
    excerpt:'Someone told you holographic was "too much." That person is wrong and we have evidence.',
    content:[
      {t:'p',s:'There is a type of person who, when presented with the option of holographic stickers, says "I think I\'ll just go with the regular." This post is not for them. This post is for everyone else.'},
      {t:'h2',s:'What even is "too much"?'},
      {t:'p',s:'Too much for what exactly? For the sensibilities of someone who chose beige for their feature wall? We live in a time of infinite content, infinite scroll, infinite beige. Nothing cuts through like something that literally refracts light differently every time you move your head. That\'s physics. You can\'t argue with physics.'},
      {t:'h2',s:'Humans have always loved shiny things'},
      {t:'p',s:'Jewellery. Stained glass. Sequins. Disco balls. The appeal of things that catch light is not a phase — it\'s hardwired. When someone reaches for a holographic sticker in a pile of matte ones, they\'re not being "too much." They\'re being human.'},
      {t:'h2',s:'Where holo works hardest'},
      {t:'p',s:'On dark surfaces — holo pops against contrast. On white laptops — it floats beautifully. In packaging inserts — it makes unboxing feel like an event. As artist merch — it photographs unlike anything else. As a business sticker on a water bottle — it makes sure nobody forgets your brand. The question is never whether holo works. It\'s whether you\'re brave enough to let it.'},
      {t:'h2',s:'The three options'},
      {t:'p',s:'Rainbow holo shifts through the full spectrum — it\'s what most people picture. Gold holo reads as luxury: warmer, more premium. Chrome holo is cool and mirror-like — the most striking of the three, best with bold simple designs that can hold their own against the surface. We stock all three in matte and gloss. You\'re going to want to try all of them.'},
      {t:'h2',s:'Life is short'},
      {t:'p',s:'Order the holo. The regular one will still be there if you change your mind. You won\'t change your mind.'},
    ]
  },
  {
    id:12, title:'An Ode to the 25mm Circle Sticker',
    category:'Product Guide', date:'14 May 2026', readTime:'4 min read',
    img:'assets/sticker-stack.jpeg',
    excerpt:'Small. Round. Utterly indispensable. The 25mm circle is the Swiss Army knife of the sticker world and it deserves more credit.',
    content:[
      {t:'p',s:'There are glamorous stickers. Custom die-cuts of intricate logos. A4 sheets of holographic characters. Oversized 200mm bespoke shapes that make people stop and stare. And then there is the 25mm circle — quietly useful, unfussy, and completely irreplaceable. We want to talk about it.'},
      {t:'h2',s:'What it is'},
      {t:'p',s:'A 25mm circle is roughly the size of a 20-cent coin. The smallest standard size we produce. At that size, there\'s no room for complexity — you get your logo, your brand mark, or a simple design, rendered cleanly on a disc small enough to go anywhere. And that anywhere is the whole point.'},
      {t:'h2',s:'What it actually does'},
      {t:'p',s:'Seals an envelope. Closes a tissue paper fold in a gift box. Labels a product. Tags a cable. Identifies a sample. Marks an item as sold at a market stall. Goes on a kid\'s hand as a reward. Labels a jar. Goes in a PR kit. Sits on a thank-you card. Gets stuck on a hard hat. Marks a price. Identifies a flavour. Acts as a wax seal alternative. Seals a mailer bag. Signs a birthday card. We could keep going. The 25mm circle is working harder than any of us.'},
      {t:'h2',s:'The economics'},
      {t:'p',s:'At 100 units you\'re looking at around $65. That\'s 100 individual brand moments for 65 cents each. But at 1,000 units you\'re at around $0.09 per sticker. Nine cents. For something that touches every parcel you send, every product you sell, every customer you interact with. Per impression, it\'s the best marketing dollar you\'ll spend this week.'},
      {t:'h2',s:'The design challenge (it\'s a good one)'},
      {t:'p',s:'Designing for 25mm is a useful constraint. You can\'t use a small font. You can\'t have complex detail. You\'re forced to distill your brand to its simplest, most recognisable element. A lot of brands discover this exercise produces the best version of their mark — the one that works at stamp size, on a social icon, on a tiny sticker. If your logo can\'t fit on a 25mm circle, that\'s useful information.'},
      {t:'p',s:'We\'ll print yours on the same premium outdoor-rated vinyl we use for everything else. Waterproof. UV resistant. Full colour. Matte or gloss. Quantities from 25 to 5,000. You\'ll use more than you think.'},
    ]
  },
];

// ── Shared hero used by all resource pages ───────────────────────────────────
const ResHero = ({ go, page, tag, title, sub }) => (
  <>
    <div style={{borderBottom:'1px solid #00000015',background:'#fff'}}>
      <div className="wrap" style={{padding:'14px 28px',fontSize:13,color:'var(--muted)'}}>
        <a onClick={()=>go('home')} style={{cursor:'pointer'}}>Home</a>
        <span style={{margin:'0 8px',opacity:0.5}}>/</span>
        <strong style={{color:'var(--ink)'}}>{page}</strong>
      </div>
    </div>
    <section style={{background:'var(--ink)',color:'#fff',borderBottom:'3px solid var(--ink)',position:'relative',overflow:'hidden'}}>
      <div style={{position:'absolute',inset:0,opacity:0.06,backgroundImage:'radial-gradient(#fff 1.4px, transparent 1.6px)',backgroundSize:'14px 14px'}}/>
      <div className="wrap" style={{padding:'56px 28px 64px',position:'relative'}}>
        <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--yellow)',marginBottom:12}}>{tag}</div>
        <h1 className="display" style={{fontSize:'clamp(44px,7vw,88px)',margin:'0 0 16px',color:'#fff',lineHeight:0.92}}>{title}</h1>
        {sub && <p style={{fontSize:18,opacity:0.8,maxWidth:600,lineHeight:1.55,margin:0}}>{sub}</p>}
      </div>
    </section>
  </>
);

// ── Artwork Guidelines ───────────────────────────────────────────────────────
const ArtworkGuidelines = ({ go }) => {
  const specs = [
    { label:'Preferred formats', value:'SVG · AI · PDF (vector) · EPS' },
    { label:'Accepted raster', value:'PNG · JPG · TIFF (300dpi+)' },
    { label:'Colour mode', value:'CMYK (RGB accepted, converted on our end)' },
    { label:'Bleed', value:'3mm beyond cut line' },
    { label:'Safe zone', value:'5mm inside cut line' },
    { label:'Resolution', value:'300dpi minimum at print size' },
    { label:'Max file size', value:'50MB per file' },
    { label:'Die-cut background', value:'Transparent (PNG with alpha)' },
  ];
  const tips = [
    { n:'01', h:'Convert text to outlines', b:'Any fonts in your file should be outlined or embedded. If we don\'t have your font, text may reflow or render differently.' },
    { n:'02', h:'Flatten transparency', b:'Live transparency effects (shadows, glows) can shift on export. Flatten or rasterise any transparent layers before submitting.' },
    { n:'03', h:'Embed linked images', b:'Illustrator files with linked (not embedded) images will print with a grey placeholder. Use File → Package, or embed all images before saving.' },
    { n:'04', h:'Check your blacks', b:'Rich black (C40 M30 Y30 K100) looks great on large areas. For small text, use 100% K only to avoid misregistration.' },
    { n:'05', h:'White ink for clear vinyl', b:'On clear and holo substrates, we use white ink as a base layer. Your design must include a white ink layer for light-coloured content to show up.' },
    { n:'06', h:'Cut path = separate layer', b:'If supplying your own cut path, put it on a separate unlocked layer named "Cut" in 100% Magenta with no fill.' },
  ];
  return (
    <main>
      <Header go={go}/>
      <ResHero go={go} page="Artwork Guidelines" tag="// FILE SETUP" title={<>Artwork<br/>Guidelines.</>} sub="Everything you need to set up your file correctly — so your sticker prints exactly as you designed it."/>
      <TrustStrip/>
      <section style={{padding:'80px 0'}}>
        <div className="wrap">
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:60,alignItems:'start'}}>
            <div>
              <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)',marginBottom:8}}>// SPECIFICATIONS</div>
              <h2 className="display" style={{fontSize:'clamp(32px,4vw,52px)',margin:'0 0 28px'}}>File specs at a glance</h2>
              <div className="sticker" style={{padding:0,overflow:'hidden'}}>
                <table style={{width:'100%',borderCollapse:'collapse'}}>
                  <tbody>
                    {specs.map(({label,value},i)=>(
                      <tr key={i} style={{borderBottom:'2px solid var(--ink)',background:i%2?'var(--cream)':'#fff'}}>
                        <td style={{padding:'14px 18px',fontWeight:700,fontSize:13,width:'40%'}}>{label}</td>
                        <td style={{padding:'14px 18px',fontSize:13,color:'var(--ink-soft)'}}>{value}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <div style={{marginTop:24,padding:'20px 22px',background:'var(--yellow)',border:'3px solid var(--ink)',borderRadius:14,boxShadow:'4px 4px 0 var(--ink)'}}>
                <div className="display" style={{fontSize:20,marginBottom:6}}>Not sure if your file is right?</div>
                <p style={{fontSize:14,margin:'0 0 14px',lineHeight:1.5}}>Upload it anyway. Every order gets a free file check by a real designer — we\'ll flag any issues before we print.</p>
                <button className="btn primary" onClick={()=>go('product')}>Upload your artwork <Icon.Arrow/></button>
              </div>
            </div>
            <div>
              <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)',marginBottom:8}}>// COMMON MISTAKES</div>
              <h2 className="display" style={{fontSize:'clamp(32px,4vw,52px)',margin:'0 0 28px'}}>Things to watch out for</h2>
              <div style={{display:'flex',flexDirection:'column',gap:14}}>
                {tips.map(tip=>(
                  <div key={tip.n} className="sticker" style={{padding:'18px 20px',boxShadow:'4px 4px 0 var(--ink)',display:'flex',gap:16,alignItems:'flex-start'}}>
                    <div className="display" style={{fontSize:22,color:'var(--orange)',flexShrink:0,lineHeight:1}}>{tip.n}</div>
                    <div>
                      <div className="display" style={{fontSize:18,marginBottom:4}}>{tip.h}</div>
                      <p style={{margin:0,fontSize:13,color:'var(--ink-soft)',lineHeight:1.5}}>{tip.b}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
      <section style={{padding:'0 0 100px'}}>
        <div className="wrap">
          <div style={{background:'var(--ink)',color:'#fff',borderRadius:28,border:'3px solid var(--ink)',padding:'48px',boxShadow:'8px 8px 0 var(--ink)',display:'grid',gridTemplateColumns:'1fr auto',gap:40,alignItems:'center'}}>
            <div>
              <div className="mono" style={{fontSize:12,letterSpacing:'0.15em',textTransform:'uppercase',color:'var(--yellow)',marginBottom:10}}>// NEED A HAND?</div>
              <h2 className="display" style={{fontSize:'clamp(28px,4vw,50px)',color:'#fff',margin:'0 0 10px'}}>Download our Illustrator template</h2>
              <p style={{opacity:0.75,fontSize:15,lineHeight:1.5,margin:0}}>Pre-set bleed, safe zone, and cut path layer. Available for all standard sizes. Just drop your artwork in and export.</p>
            </div>
            <button className="btn" onClick={()=>go('templates')} style={{whiteSpace:'nowrap'}}>Get templates <Icon.Arrow/></button>
          </div>
        </div>
      </section>
      <Footer go={go}/>
    </main>
  );
};

// ── Templates ────────────────────────────────────────────────────────────────
const TEMPLATE_SHAPES = [
  { k:'die-cut',  label:'Die-Cut',  desc:'Contour cut to your artwork shape' },
  { k:'circle',   label:'Circle',   desc:'Perfect round — any diameter' },
  { k:'square',   label:'Square',   desc:'Square with rounded 4mm corners' },
  { k:'oval',     label:'Oval',     desc:'Horizontal oval (2:1 ratio)' },
  { k:'a5-sheet', label:'A5 Sheet', desc:'Multi-design sheet · 148 × 210mm' },
  { k:'a6-sheet', label:'A6 Sheet', desc:'Compact sheet · 105 × 148mm' },
];
const TEMPLATE_SIZES = [25,38,50,63,75,100,125,150];

function buildTemplateSVG(shape, sizeMm) {
  const BLEED = 3, SAFE = 3;
  let W, H;
  if (shape === 'a5-sheet') { W = 148; H = 210; }
  else if (shape === 'a6-sheet') { W = 105; H = 148; }
  else if (shape === 'oval') { W = sizeMm; H = Math.round(sizeMm / 2); }
  else { W = sizeMm; H = sizeMm; }

  const SCALE = 3;
  const PAD = 36;
  const headerH = 48;
  const legendRowH = 22;
  const legendH = 3 * legendRowH + 20;

  const cW = (W + BLEED * 2) * SCALE;
  const cH = (H + BLEED * 2) * SCALE;
  const svgW = Math.max(cW + PAD * 2, 360);
  const svgH = cH + PAD * 2 + headerH + legendH;

  const ox = PAD;
  const oy = headerH + PAD;

  const bleedW = (W + BLEED * 2) * SCALE;
  const bleedH = (H + BLEED * 2) * SCALE;
  const cutW   = W * SCALE;
  const cutH   = H * SCALE;
  const safeW  = (W - SAFE * 2) * SCALE;
  const safeH  = (H - SAFE * 2) * SCALE;

  const cx = ox + bleedW / 2;
  const cy = oy + bleedH / 2;
  const rx = cutW / 2;
  const ry = cutH / 2;
  const srx = safeW / 2;
  const sry = safeH / 2;

  let bleedShape, cutShape, safeShape, artworkArea;

  if (shape === 'circle') {
    const br = bleedW / 2;
    const cr = rx;
    const sr = srx;
    bleedShape  = `<circle cx="${cx}" cy="${cy}" r="${br}" fill="#fff5f5"/>`;
    cutShape    = `<circle cx="${cx}" cy="${cy}" r="${cr}" fill="none" stroke="#e53e3e" stroke-width="1.5" stroke-dasharray="6 3"/>`;
    safeShape   = `<circle cx="${cx}" cy="${cy}" r="${sr}" fill="none" stroke="#3182ce" stroke-width="1" stroke-dasharray="4 3"/>`;
    artworkArea = `<circle cx="${cx}" cy="${cy}" r="${sr}" fill="rgba(49,130,206,0.04)"/>`;
  } else if (shape === 'oval') {
    const bRx = bleedW / 2, bRy = bleedH / 2;
    bleedShape  = `<ellipse cx="${cx}" cy="${cy}" rx="${bRx}" ry="${bRy}" fill="#fff5f5"/>`;
    cutShape    = `<ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" fill="none" stroke="#e53e3e" stroke-width="1.5" stroke-dasharray="6 3"/>`;
    safeShape   = `<ellipse cx="${cx}" cy="${cy}" rx="${srx}" ry="${sry}" fill="none" stroke="#3182ce" stroke-width="1" stroke-dasharray="4 3"/>`;
    artworkArea = `<ellipse cx="${cx}" cy="${cy}" rx="${srx}" ry="${sry}" fill="rgba(49,130,206,0.04)"/>`;
  } else {
    const dieR = shape === 'die-cut' ? Math.min(8, cutW * 0.08) : shape === 'square' ? 12 : 0;
    bleedShape  = `<rect x="${ox}" y="${oy}" width="${bleedW}" height="${bleedH}" rx="${dieR + BLEED * SCALE * 0.5}" fill="#fff5f5"/>`;
    cutShape    = `<rect x="${cx - rx}" y="${cy - ry}" width="${cutW}" height="${cutH}" rx="${dieR}" fill="none" stroke="#e53e3e" stroke-width="1.5" stroke-dasharray="6 3"/>`;
    safeShape   = `<rect x="${cx - srx}" y="${cy - sry}" width="${safeW}" height="${safeH}" rx="${Math.max(0, dieR - SAFE * SCALE)}" fill="none" stroke="#3182ce" stroke-width="1" stroke-dasharray="4 3"/>`;
    artworkArea = `<rect x="${cx - srx}" y="${cy - sry}" width="${safeW}" height="${safeH}" rx="${Math.max(0, dieR - SAFE * SCALE)}" fill="rgba(49,130,206,0.04)"/>`;
  }

  const regLen = 12, regGap = 6;
  function regMark(x, y) {
    return `<line x1="${x - regLen}" y1="${y}" x2="${x - regGap}" y2="${y}" stroke="#000" stroke-width="0.75"/>
    <line x1="${x + regGap}" y1="${y}" x2="${x + regLen}" y2="${y}" stroke="#000" stroke-width="0.75"/>
    <line x1="${x}" y1="${y - regLen}" x2="${x}" y2="${y - regGap}" stroke="#000" stroke-width="0.75"/>
    <line x1="${x}" y1="${y + regGap}" x2="${x}" y2="${y + regLen}" stroke="#000" stroke-width="0.75"/>`;
  }
  const marks = [
    regMark(ox, oy), regMark(ox + bleedW, oy),
    regMark(ox, oy + bleedH), regMark(ox + bleedW, oy + bleedH)
  ].join('\n');

  const dimY = oy + bleedH + 18;
  const dimX = ox + bleedW + 18;

  const legendY = oy + bleedH + PAD;
  const lgItems = [
    { color:'#fff5f5', stroke:'#e53e3e', dash:'none', label:`Bleed zone (+${BLEED}mm each side)` },
    { color:'none', stroke:'#e53e3e', dash:'6 3', label:'Cut line (final trim edge)' },
    { color:'rgba(49,130,206,0.04)', stroke:'#3182ce', dash:'4 3', label:`Safe zone (keep text/logos inside, ${SAFE}mm from cut)` },
  ];
  const lgSvg = lgItems.map((it, i) => {
    const lx = PAD;
    const ly = legendY + i * legendRowH;
    return `<rect x="${lx}" y="${ly}" width="28" height="14" rx="3" fill="${it.color}" stroke="${it.stroke}" stroke-width="1.2" stroke-dasharray="${it.dash}"/>
    <text x="${lx + 34}" y="${ly + 10}" font-family="sans-serif" font-size="10" fill="#333">${it.label}</text>`;
  }).join('\n');

  return `<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="${svgW}" height="${svgH}" viewBox="0 0 ${svgW} ${svgH}">
  <rect width="${svgW}" height="${svgH}" fill="#f7f5f0"/>
  <!-- header -->
  <rect width="${svgW}" height="${headerH}" fill="#1a1a2e"/>
  <text x="20" y="20" font-family="monospace" font-size="10" fill="#ff6b35" letter-spacing="3">// KING KONG STICKERS</text>
  <text x="20" y="36" font-family="sans-serif" font-weight="800" font-size="14" fill="#fff">${shape.replace('-',' ').toUpperCase()} TEMPLATE — ${shape.startsWith('a') ? '' : W + ' × ' + H + 'mm · '}300 DPI · 3mm Bleed · SVG</text>
  <!-- bleed background -->
  ${bleedShape}
  <!-- safe area fill -->
  ${artworkArea}
  <!-- cut line -->
  ${cutShape}
  <!-- safe zone -->
  ${safeShape}
  <!-- registration marks -->
  ${marks}
  <!-- width dimension -->
  <line x1="${ox}" y1="${dimY}" x2="${ox + bleedW}" y2="${dimY}" stroke="#555" stroke-width="0.75"/>
  <line x1="${ox}" y1="${dimY - 5}" x2="${ox}" y2="${dimY + 5}" stroke="#555" stroke-width="0.75"/>
  <line x1="${ox + bleedW}" y1="${dimY - 5}" x2="${ox + bleedW}" y2="${dimY + 5}" stroke="#555" stroke-width="0.75"/>
  <text x="${ox + bleedW / 2}" y="${dimY + 14}" font-family="monospace" font-size="9" fill="#555" text-anchor="middle">${W + BLEED * 2}mm (incl. bleed)</text>
  <!-- height dimension -->
  <line x1="${dimX}" y1="${oy}" x2="${dimX}" y2="${oy + bleedH}" stroke="#555" stroke-width="0.75"/>
  <line x1="${dimX - 5}" y1="${oy}" x2="${dimX + 5}" y2="${oy}" stroke="#555" stroke-width="0.75"/>
  <line x1="${dimX - 5}" y1="${oy + bleedH}" x2="${dimX + 5}" y2="${oy + bleedH}" stroke="#555" stroke-width="0.75"/>
  <text x="${dimX + 14}" y="${oy + bleedH / 2}" font-family="monospace" font-size="9" fill="#555" text-anchor="middle" transform="rotate(90,${dimX + 14},${oy + bleedH / 2})">${H + BLEED * 2}mm (incl. bleed)</text>
  <!-- centre crosshair -->
  <line x1="${cx - 10}" y1="${cy}" x2="${cx + 10}" y2="${cy}" stroke="#aaa" stroke-width="0.5"/>
  <line x1="${cx}" y1="${cy - 10}" x2="${cx}" y2="${cy + 10}" stroke="#aaa" stroke-width="0.5"/>
  <!-- legend -->
  ${lgSvg}
  <!-- footer note -->
  <text x="${svgW / 2}" y="${svgH - 8}" font-family="sans-serif" font-size="9" fill="#999" text-anchor="middle">kingkongstickers.com.au · Place your artwork inside the safe zone · Bleed zone will be trimmed</text>
</svg>`;
}

const Templates = ({ go }) => {
  const [shape, setShape] = React.useState('die-cut');
  const [sizeMm, setSizeMm] = React.useState(75);
  const [customW, setCustomW] = React.useState('');
  const [customH, setCustomH] = React.useState('');
  const [isCustom, setIsCustom] = React.useState(false);

  const effectiveW = isCustom ? (parseInt(customW) || 75) : sizeMm;
  const effectiveH = isCustom ? (parseInt(customH) || sizeMm) : sizeMm;

  const svgSrc = React.useMemo(() => {
    const s = shape.startsWith('a') ? shape : (shape === 'oval' ? shape : shape);
    const mm = isCustom ? (parseInt(customW) || 75) : sizeMm;
    try { return buildTemplateSVG(s, mm); } catch { return ''; }
  }, [shape, sizeMm, isCustom, customW, customH]);

  const previewSrc = React.useMemo(() => {
    if (!svgSrc) return '';
    return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgSrc);
  }, [svgSrc]);

  const handleDownload = () => {
    if (!svgSrc) return;
    const blob = new Blob([svgSrc], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    const wLabel = isCustom ? (customW || '?') : sizeMm;
    const hLabel = isCustom ? (customH || '?') : sizeMm;
    a.href = url;
    a.download = `kk-template-${shape}-${wLabel}x${hLabel}mm.svg`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const shapeInfo = TEMPLATE_SHAPES.find(s => s.k === shape) || TEMPLATE_SHAPES[0];

  return (
    <main>
      <Header go={go}/>
      <ResHero go={go} page="Templates" tag="// FREE DOWNLOADS" title={<>Artwork<br/>Templates.</>} sub="Pre-set SVG templates with bleed, safe zone, and cut line already set up. Pick your shape and size, download, drop in your artwork."/>
      <TrustStrip/>
      <section style={{padding:'80px 0'}}>
        <div className="wrap">
          <div style={{display:'flex',alignItems:'end',justifyContent:'space-between',marginBottom:36}}>
            <div>
              <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)'}}>// FREE DOWNLOAD</div>
              <h2 className="display" style={{fontSize:'clamp(32px,4.5vw,60px)',margin:'6px 0 0'}}>Configure your template</h2>
            </div>
            <button className="btn ghost" onClick={()=>go('artwork-guidelines')}>Artwork guidelines <Icon.Arrow/></button>
          </div>

          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:40,alignItems:'start'}}>
            {/* Left — controls */}
            <div>
              {/* Shape picker */}
              <div style={{marginBottom:28}}>
                <div style={{fontWeight:800,fontSize:13,letterSpacing:'0.12em',textTransform:'uppercase',marginBottom:12,color:'var(--ink-soft)'}}>1 · Shape</div>
                <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8}}>
                  {TEMPLATE_SHAPES.map(s => (
                    <button key={s.k} onClick={()=>{setShape(s.k);}}
                      style={{padding:'12px 8px',border:`2px solid ${shape===s.k?'var(--orange)':'var(--ink)'}`,borderRadius:12,background:shape===s.k?'var(--orange)':'#fff',color:shape===s.k?'#fff':'var(--ink)',fontWeight:700,fontSize:13,cursor:'pointer',textAlign:'center',transition:'all .15s'}}>
                      {s.label}
                    </button>
                  ))}
                </div>
                <div style={{fontSize:12,color:'var(--muted)',marginTop:8}}>{shapeInfo.desc}</div>
              </div>

              {/* Size picker */}
              {!shape.startsWith('a') && (
                <div style={{marginBottom:28}}>
                  <div style={{fontWeight:800,fontSize:13,letterSpacing:'0.12em',textTransform:'uppercase',marginBottom:12,color:'var(--ink-soft)'}}>2 · Size</div>
                  <div style={{display:'flex',flexWrap:'wrap',gap:8,marginBottom:12}}>
                    {TEMPLATE_SIZES.map(z => (
                      <button key={z} onClick={()=>{setSizeMm(z);setIsCustom(false);}}
                        style={{padding:'8px 14px',border:`2px solid ${!isCustom&&sizeMm===z?'var(--orange)':'var(--ink)'}`,borderRadius:10,background:!isCustom&&sizeMm===z?'var(--orange)':'#fff',color:!isCustom&&sizeMm===z?'#fff':'var(--ink)',fontWeight:700,fontSize:13,cursor:'pointer',transition:'all .15s'}}>
                        {z}mm
                      </button>
                    ))}
                    <button onClick={()=>setIsCustom(true)}
                      style={{padding:'8px 14px',border:`2px solid ${isCustom?'var(--orange)':'var(--ink)'}`,borderRadius:10,background:isCustom?'var(--orange)':'#fff',color:isCustom?'#fff':'var(--ink)',fontWeight:700,fontSize:13,cursor:'pointer',transition:'all .15s'}}>
                      Custom
                    </button>
                  </div>
                  {isCustom && (
                    <div style={{display:'flex',gap:10,alignItems:'center'}}>
                      <input type="number" placeholder="Width mm" min={10} max={380} value={customW}
                        onChange={e=>setCustomW(e.target.value)}
                        style={{width:110,padding:'8px 12px',border:'2px solid var(--ink)',borderRadius:10,fontWeight:700,fontSize:14,outline:'none'}}/>
                      <span style={{fontWeight:700}}>×</span>
                      {shape === 'oval'
                        ? <input type="number" placeholder="Height mm" min={10} max={380} value={customH}
                            onChange={e=>setCustomH(e.target.value)}
                            style={{width:110,padding:'8px 12px',border:'2px solid var(--ink)',borderRadius:10,fontWeight:700,fontSize:14,outline:'none'}}/>
                        : <span style={{padding:'8px 12px',border:'2px solid var(--ink)',borderRadius:10,fontWeight:700,fontSize:14,background:'var(--cream-deep)',color:'var(--ink-soft)',minWidth:110,textAlign:'center'}}>{customW||'—'} mm</span>
                      }
                    </div>
                  )}
                </div>
              )}
              {shape.startsWith('a') && (
                <div style={{marginBottom:28,padding:'14px 18px',background:'var(--cream-deep)',border:'2px solid var(--ink)',borderRadius:12,fontSize:13}}>
                  <strong>{shape==='a5-sheet'?'A5 (148 × 210mm)':'A6 (105 × 148mm)'}</strong> — fixed size sheet. Place multiple designs on the artboard.
                </div>
              )}

              {/* Download */}
              <button className="btn" style={{width:'100%',justifyContent:'center',padding:'15px',fontSize:16}} onClick={handleDownload}>
                Download SVG template <Icon.Arrow/>
              </button>
              <div style={{marginTop:10,fontSize:12,color:'var(--muted)',textAlign:'center'}}>Opens in Illustrator, Affinity, Inkscape, Figma · Free · No signup</div>

              {/* Spec table */}
              <div style={{marginTop:28,padding:'20px',background:'var(--cream-deep)',border:'2px solid var(--ink)',borderRadius:14}}>
                <div style={{fontWeight:800,fontSize:13,letterSpacing:'0.1em',textTransform:'uppercase',marginBottom:14}}>Template specs</div>
                {[
                  ['Bleed', '3mm each side (pink zone)'],
                  ['Cut line', 'Red dashed — final trim edge'],
                  ['Safe zone', '3mm inside cut (blue dashed)'],
                  ['Resolution', '300 DPI at final size'],
                  ['Colour mode', 'CMYK for best print accuracy'],
                  ['File format', 'SVG (scalable, editable)'],
                ].map(([k,v]) => (
                  <div key={k} style={{display:'flex',justifyContent:'space-between',padding:'5px 0',borderBottom:'1px solid rgba(0,0,0,0.07)',fontSize:13}}>
                    <span style={{fontWeight:700,color:'var(--ink-soft)'}}>{k}</span>
                    <span>{v}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Right — live preview */}
            <div>
              <div style={{fontWeight:800,fontSize:13,letterSpacing:'0.12em',textTransform:'uppercase',marginBottom:12,color:'var(--ink-soft)'}}>Live preview</div>
              <div style={{border:'3px solid var(--ink)',borderRadius:18,overflow:'hidden',background:'#f7f5f0',minHeight:300,display:'flex',alignItems:'center',justifyContent:'center'}}>
                {previewSrc
                  ? <img src={previewSrc} style={{width:'100%',height:'auto',display:'block'}} alt="Template preview"/>
                  : <div style={{padding:40,color:'var(--muted)',fontSize:14}}>Select a shape and size</div>
                }
              </div>
              <div style={{marginTop:12,display:'flex',gap:10,flexWrap:'wrap'}}>
                {[
                  {color:'#fff5f5',stroke:'#e53e3e',label:'Bleed zone'},
                  {color:'none',stroke:'#e53e3e',dash:true,label:'Cut line'},
                  {color:'rgba(49,130,206,0.08)',stroke:'#3182ce',dash:true,label:'Safe zone'},
                ].map(it=>(
                  <div key={it.label} style={{display:'flex',alignItems:'center',gap:6,fontSize:11,color:'var(--ink-soft)'}}>
                    <div style={{width:16,height:10,borderRadius:2,background:it.color,border:`1.5px ${it.dash?'dashed':'solid'} ${it.stroke}`,flexShrink:0}}/>
                    {it.label}
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* How to use */}
          <div style={{marginTop:56}}>
            <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)',marginBottom:8}}>// HOW TO USE</div>
            <h3 className="display" style={{fontSize:'clamp(24px,3vw,40px)',marginBottom:28}}>3 steps to print-ready artwork</h3>
            <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:20}}>
              {[
                {n:'01',title:'Download template',body:'Pick your shape and size above, click Download. Opens the SVG in Illustrator, Affinity Designer, Inkscape, or Figma.'},
                {n:'02',title:'Place your artwork',body:'Drop your design onto the artboard. Keep all important content inside the blue safe zone. Extend backgrounds to the pink bleed edge.'},
                {n:'03',title:'Export and upload',body:'Export as PDF (print preset) or high-res PNG at 300DPI. Upload during checkout — we check every file before printing.'},
              ].map(s=>(
                <div key={s.n} className="sticker" style={{padding:'24px'}}>
                  <div className="mono" style={{fontSize:32,fontWeight:800,color:'var(--orange)',marginBottom:8}}>{s.n}</div>
                  <div style={{fontWeight:800,fontSize:17,marginBottom:8}}>{s.title}</div>
                  <div style={{fontSize:13,color:'var(--ink-soft)',lineHeight:1.6}}>{s.body}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Custom size note */}
          <div style={{marginTop:40,padding:'24px 28px',background:'var(--cream-deep)',border:'2.5px solid var(--ink)',borderRadius:18,display:'flex',gap:20,alignItems:'center'}}>
            <div style={{width:48,height:48,display:'grid',placeItems:'center',background:'var(--orange)',color:'#fff',borderRadius:12,border:'2px solid var(--ink)',flexShrink:0}}><Icon.Upload size={22}/></div>
            <div style={{flex:1}}>
              <div style={{fontWeight:800,fontSize:16,marginBottom:4}}>Need a different shape entirely?</div>
              <div style={{fontSize:14,color:'var(--ink-soft)'}}>Our die-cut stickers print to any shape. Upload your own artwork outline or check the <a onClick={()=>go('artwork-guidelines')} style={{color:'var(--orange)',fontWeight:700,cursor:'pointer'}}>artwork guidelines</a> for file requirements. See our <a onClick={()=>go('sizing-guide')} style={{color:'var(--orange)',fontWeight:700,cursor:'pointer'}}>sizing guide</a> for recommendations.</div>
            </div>
          </div>
        </div>
      </section>
      <Footer go={go}/>
    </main>
  );
};

// ── Materials ────────────────────────────────────────────────────────────────
const MaterialsPage = ({ go }) => {
  const mats = [
    {
      name:'Standard Vinyl', price:'From $0.39 ea', img:'assets/sticker-stack.jpeg', bg:'var(--cream)',
      tag:'Most popular',
      features:['Outdoor-rated 7-year vinyl','80μm polymeric base','Permanent acrylic adhesive','UV-blocking PVC laminate','Matte or gloss finish'],
      best:'Logos, brand stickers, general purpose, bulk runs.',
      not:'When you need a see-through effect or premium look.',
    },
    {
      name:'Holographic', price:'From $0.89 ea', img:'assets/holo-rainbow.jpeg', bg:'#E8F0FF',
      tag:'Eye-catching',
      features:['Colour-shifting diffraction film','Full-spectrum rainbow · gold · chrome','Printed with white base ink','Scratch-resistant laminate','Bold colours look best'],
      best:'Artist prints, merch, limited editions, premium packaging.',
      not:'Designs where precise colour matching is critical.',
    },
    {
      name:'Clear Vinyl', price:'From $0.59 ea', img:'assets/holo-chrome.jpeg', bg:'#F5F5F5',
      tag:'Invisible border',
      features:['Transparent vinyl base','White ink for light-coloured areas','Floating effect on application','Works on glass, bottles, phone cases','Matte or gloss laminate'],
      best:'Window decals, bottles, anywhere the surface shows through.',
      not:'Designs with lots of light or pastel colours.',
    },
    {
      name:'Glitter Vinyl', price:'From $0.99 ea', img:'assets/holo-gold.jpeg', bg:'#FFF0DC',
      tag:'Sparkle',
      features:['Chunky glitter particles in base','Sealed under laminate — won\'t shed','Textured feel, catches light differently to holo','Bold, playful look','Matte laminate only'],
      best:'Party stickers, packaging inserts, kids\' products.',
      not:'Fine detail or small text — glitter texture can obscure it.',
    },
  ];
  return (
    <main>
      <Header go={go}/>
      <ResHero go={go} page="Materials" tag="// WHAT WE PRINT ON" title={<>Our<br/>Materials.</>} sub="Every substrate we stock, explained in plain English — with honest notes on when each one works best and when it doesn't."/>
      <TrustStrip/>
      <section style={{padding:'80px 0'}}>
        <div className="wrap">
          <div style={{display:'flex',flexDirection:'column',gap:28}}>
            {mats.map((m,i)=>(
              <div key={m.name} className="sticker" style={{padding:0,display:'grid',gridTemplateColumns:i%2?'1fr 360px':'360px 1fr'}}>
                {i%2===0 && <div style={{overflow:'hidden',borderRight:'3px solid var(--ink)',background:m.bg}}>
                  <img src={m.img} style={{width:'100%',height:'100%',objectFit:'cover',minHeight:280}}/>
                </div>}
                <div style={{padding:'36px 40px',display:'flex',flexDirection:'column',justifyContent:'center'}}>
                  <div style={{display:'flex',gap:10,alignItems:'center',marginBottom:14}}>
                    <span className="chip" style={{background:'var(--yellow)'}}>{m.tag}</span>
                    <span className="mono" style={{fontSize:13,color:'var(--orange)',fontWeight:700}}>{m.price}</span>
                  </div>
                  <h2 className="display" style={{fontSize:'clamp(28px,3.5vw,46px)',margin:'0 0 18px'}}>{m.name}</h2>
                  <ul style={{listStyle:'none',padding:0,margin:'0 0 18px',display:'flex',flexDirection:'column',gap:8}}>
                    {m.features.map(f=>(
                      <li key={f} style={{display:'flex',gap:10,alignItems:'flex-start',fontSize:14}}>
                        <span style={{width:20,height:20,borderRadius:'50%',background:'var(--green)',color:'#fff',display:'grid',placeItems:'center',flexShrink:0,marginTop:1}}><Icon.Check size={11}/></span>
                        {f}
                      </li>
                    ))}
                  </ul>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginBottom:20}}>
                    <div style={{padding:'12px 14px',background:'var(--cream)',border:'2px solid var(--ink)',borderRadius:10}}>
                      <div style={{fontWeight:800,fontSize:11,textTransform:'uppercase',letterSpacing:'0.06em',color:'var(--green)',marginBottom:4}}>Best for</div>
                      <div style={{fontSize:13,lineHeight:1.45}}>{m.best}</div>
                    </div>
                    <div style={{padding:'12px 14px',background:'var(--cream)',border:'2px solid var(--ink)',borderRadius:10}}>
                      <div style={{fontWeight:800,fontSize:11,textTransform:'uppercase',letterSpacing:'0.06em',color:'var(--red)',marginBottom:4}}>Not ideal if</div>
                      <div style={{fontSize:13,lineHeight:1.45}}>{m.not}</div>
                    </div>
                  </div>
                  <button className="btn primary" onClick={()=>go('product')} style={{alignSelf:'flex-start'}}>Order {m.name} <Icon.Arrow/></button>
                </div>
                {i%2!==0 && <div style={{overflow:'hidden',borderLeft:'3px solid var(--ink)',background:m.bg}}>
                  <img src={m.img} style={{width:'100%',height:'100%',objectFit:'cover',minHeight:280}}/>
                </div>}
              </div>
            ))}
          </div>
          <div style={{marginTop:40,textAlign:'center'}}>
            <p style={{fontSize:17,color:'var(--ink-soft)',marginBottom:18}}>Want to feel the difference before you order?</p>
            <button className="btn primary" onClick={()=>go('sample')}>Get the $1 sample pack <Icon.Arrow/></button>
          </div>
        </div>
      </section>
      <Footer go={go}/>
    </main>
  );
};

// ── Sizing Guide ─────────────────────────────────────────────────────────────
const SizingGuide = ({ go }) => {
  const sizes = [
    { mm:'50mm', inches:'~2"', area:'50×50', use:'Laptop stickers, small logos, promotional giveaways', mult:'× 0.7' },
    { mm:'75mm', inches:'~3"', area:'75×75', use:'Standard die-cut, water bottles, notebooks', mult:'× 1.0 (base)' },
    { mm:'100mm', inches:'~4"', area:'100×100', use:'Bold logos, character stickers, skateboard decks', mult:'× 1.4' },
    { mm:'125mm', inches:'~5"', area:'125×125', use:'Statement pieces, murals, car windows', mult:'× 1.8' },
    { mm:'150mm', inches:'~6"', area:'150×150', use:'Large format, wall art, bumper stickers', mult:'× 2.4' },
    { mm:'Custom', inches:'up to 380mm', area:'Any W × H', use:'Non-standard shapes, banners, oversized decals', mult:'+10%' },
  ];
  const useCases = [
    { label:'Laptop sticker', size:'50–75mm', reason:'Fits neatly alongside other stickers without dominating the lid' },
    { label:'Water bottle', size:'75–100mm', reason:'Wraps cleanly around a standard Hydro Flask or KeepCup' },
    { label:'Packaging insert', size:'50–75mm', reason:'Sits in a mailer bag without folding; feels like a bonus gift' },
    { label:'Bumper sticker', size:'150mm+', reason:'Readable from 3–4 car lengths back at traffic speed' },
    { label:'Phone case', size:'50–75mm', reason:'Fits on the back panel without wrapping around the edge' },
    { label:'Helmet', size:'75–125mm', reason:'Bold enough to read at distance; won\'t overpower the helmet design' },
    { label:'Skateboard deck', size:'100–125mm', reason:'Fills a section of the deck; stacks well with other stickers' },
    { label:'Window decal', size:'125–150mm', reason:'Visible from outside a shopfront at normal walking pace' },
  ];
  return (
    <main>
      <Header go={go}/>
      <ResHero go={go} page="Sizing Guide" tag="// HOW BIG SHOULD IT BE?" title={<>Sizing<br/>Guide.</>} sub="Sticker size affects price, readability, and how it looks on the surface you're applying it to. Here's everything you need to choose the right size."/>
      <TrustStrip/>
      <section style={{padding:'80px 0'}}>
        <div className="wrap">
          <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)',marginBottom:8}}>// STANDARD SIZES</div>
          <h2 className="display" style={{fontSize:'clamp(32px,4.5vw,60px)',margin:'0 0 28px'}}>All sizes & pricing tiers</h2>
          <div className="sticker" style={{padding:0,overflow:'hidden',marginBottom:60}}>
            <table style={{width:'100%',borderCollapse:'collapse'}}>
              <thead>
                <tr style={{background:'var(--ink)',color:'#fff'}}>
                  {['Size','Approx. inches','Artboard','Best use case','Price factor'].map(h=>(
                    <th key={h} style={{padding:'14px 18px',textAlign:'left',fontWeight:800,fontSize:13,fontFamily:'inherit'}}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {sizes.map((s,i)=>(
                  <tr key={s.mm} style={{borderBottom:'2px solid var(--ink)',background:i%2?'var(--cream)':'#fff'}}>
                    <td style={{padding:'14px 18px'}}><strong className="display" style={{fontSize:18}}>{s.mm}</strong></td>
                    <td style={{padding:'14px 18px',fontSize:13,color:'var(--muted)'}}>{s.inches}</td>
                    <td style={{padding:'14px 18px',fontSize:13}}>{s.area}mm</td>
                    <td style={{padding:'14px 18px',fontSize:13,lineHeight:1.4}}>{s.use}</td>
                    <td style={{padding:'14px 18px'}}><span className="chip" style={{background: s.mm==='Custom'?'var(--orange)':'var(--yellow)',color: s.mm==='Custom'?'#fff':'var(--ink)'}}>{s.mult}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)',marginBottom:8}}>// USE CASE GUIDE</div>
          <h2 className="display" style={{fontSize:'clamp(32px,4.5vw,60px)',margin:'0 0 28px'}}>What size for what surface?</h2>
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:16,marginBottom:60}}>
            {useCases.map(u=>(
              <div key={u.label} className="sticker" style={{padding:'18px 20px',boxShadow:'4px 4px 0 var(--ink)'}}>
                <div className="display" style={{fontSize:16,marginBottom:6}}>{u.label}</div>
                <span className="chip" style={{background:'var(--yellow)',marginBottom:10,display:'inline-flex'}}>{u.size}</span>
                <p style={{margin:0,fontSize:12,color:'var(--ink-soft)',lineHeight:1.45}}>{u.reason}</p>
              </div>
            ))}
          </div>

          <div style={{background:'var(--ink)',color:'#fff',borderRadius:28,border:'3px solid var(--ink)',padding:'40px 48px',boxShadow:'8px 8px 0 var(--ink)',display:'flex',gap:40,alignItems:'center'}}>
            <div style={{flex:1}}>
              <h2 className="display" style={{fontSize:'clamp(28px,3.5vw,46px)',color:'#fff',margin:'0 0 12px'}}>Not sure which size to order?</h2>
              <p style={{opacity:0.8,fontSize:15,lineHeight:1.5,margin:'0 0 20px'}}>Order a sample pack for $1 and get real stickers in our most popular sizes — hold them against your surface and see exactly what works before you commit.</p>
              <div style={{display:'flex',gap:12}}>
                <button className="btn" onClick={()=>go('sample')}>Get sample pack <Icon.Arrow/></button>
                <button className="btn dark" onClick={()=>go('product')}>Order now</button>
              </div>
            </div>
            <img src="assets/sticker-stack.jpeg" style={{width:200,height:200,borderRadius:18,border:'3px solid rgba(255,255,255,0.3)',objectFit:'cover',flexShrink:0}}/>
          </div>
        </div>
      </section>
      <Footer go={go}/>
    </main>
  );
};

// ── Sustainability ────────────────────────────────────────────────────────────
const Sustainability = ({ go }) => {
  const pillars = [
    {
      n:'01', h:'Vinyl that lasts', img:'assets/explosion-orange.jpeg',
      b:'Our 7-year outdoor vinyl isn\'t just a durability claim — it\'s an environmental choice. A sticker that lasts 7 years instead of 1 is 7× less waste. We don\'t stock cheap vinyl that peels, fades, or fails because it\'s not just bad for your brand; it\'s bad for landfill.'
    },
    {
      n:'02', h:'Water-based inks', img:'assets/quick-proofs.jpeg',
      b:'We print on an HP Indigo digital press, which uses water-based ElectroInk — significantly lower in VOC emissions than solvent-based inks used in traditional screenprinting. No solvent waste, no hazardous chemical storage.'
    },
    {
      n:'03', h:'No waste in the run', img:'assets/upload-artwork.jpeg',
      b:'Digital printing means we print exactly what you order — no make-ready waste, no minimum print run spoilage. Traditional offset printing wastes 5–15% of a run on setup. Our process wastes effectively nothing.'
    },
    {
      n:'04', h:'Recyclable packaging', img:'assets/shipping-1.jpeg',
      b:'Every order ships in a rigid cardboard mailer — no bubble wrap, no foam peanuts. Our packaging is 100% curbside recyclable. We\'re trialling compostable mailer bags for small orders in 2026.'
    },
  ];
  return (
    <main>
      <Header go={go}/>
      <ResHero go={go} page="Sustainability" tag="// OUR COMMITMENT" title={<>How we<br/>print cleaner.</>} sub="We're a print company — we know that comes with a footprint. Here's what we're doing about it, and what we're still working on."/>
      <TrustStrip/>
      <section style={{padding:'80px 0'}}>
        <div className="wrap">
          <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:24,marginBottom:60}}>
            {pillars.map((p,i)=>(
              <div key={i} className="sticker" style={{padding:0,display:'flex',overflow:'hidden'}}>
                <div style={{width:140,flexShrink:0,overflow:'hidden',borderRight:'3px solid var(--ink)'}}>
                  <img src={p.img} style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                </div>
                <div style={{padding:'22px 24px'}}>
                  <div style={{display:'flex',gap:10,alignItems:'center',marginBottom:10}}>
                    <span className="display" style={{fontSize:12,background:'var(--green)',color:'#fff',borderRadius:6,padding:'2px 8px'}}>{p.n}</span>
                    <h3 className="display" style={{fontSize:22,margin:0}}>{p.h}</h3>
                  </div>
                  <p style={{margin:0,fontSize:13,lineHeight:1.55,color:'var(--ink-soft)'}}>{p.b}</p>
                </div>
              </div>
            ))}
          </div>

          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:40,marginBottom:60}}>
            <div>
              <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)',marginBottom:8}}>// WHAT WE\'RE STILL WORKING ON</div>
              <h2 className="display" style={{fontSize:'clamp(28px,3.5vw,46px)',margin:'0 0 20px'}}>We\'re not perfect. Yet.</h2>
              <div style={{display:'flex',flexDirection:'column',gap:12}}>
                {[
                  'Vinyl is a plastic — it\'s not biodegradable. We\'re trialling bio-based alternatives but nothing yet matches the performance we need for outdoor durability.',
                  'Our laminate is PVC-based. We\'re evaluating PP laminates that perform comparably and are more recyclable.',
                  'We offset our shipping emissions through a carbon program but we\'d rather reduce them at source — we\'re working with our carriers on lower-emission routes for 2027.',
                ].map((t,i)=>(
                  <div key={i} style={{display:'flex',gap:12,padding:'16px 18px',background:'var(--cream)',border:'2px solid var(--ink)',borderRadius:12}}>
                    <span style={{fontSize:18,flexShrink:0}}>→</span>
                    <p style={{margin:0,fontSize:14,lineHeight:1.5,color:'var(--ink-soft)'}}>{t}</p>
                  </div>
                ))}
              </div>
            </div>
            <div style={{padding:'36px',background:'var(--ink)',color:'#fff',borderRadius:24,border:'3px solid var(--ink)',boxShadow:'6px 6px 0 var(--ink)'}}>
              <div className="display" style={{fontSize:'clamp(28px,3.5vw,42px)',color:'var(--yellow)',marginBottom:16}}>Our numbers</div>
              {[
                { n:'7 yrs', l:'Sticker lifespan — vs 1yr industry avg' },
                { n:'0 VOC', l:'Solvent emissions from our print process' },
                { n:'100%', l:'Packaging is curbside recyclable' },
                { n:'Zero', l:'Minimum print run waste from digital process' },
              ].map(s=>(
                <div key={s.n} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'14px 0',borderBottom:'1px solid rgba(255,255,255,0.15)'}}>
                  <span style={{fontSize:14,opacity:0.8}}>{s.l}</span>
                  <span className="display" style={{fontSize:28,color:'var(--yellow)'}}>{s.n}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      <Footer go={go}/>
    </main>
  );
};

// ── Blog ──────────────────────────────────────────────────────────────────────
const Blog = ({ go }) => {
  const [activePost, setActivePost] = React.useState(null);
  const [activeCategory, setActiveCategory] = React.useState('All');
  const categories = ['All', ...Array.from(new Set(BLOG_POSTS.map(p=>p.category)))];
  const filtered = activeCategory==='All' ? BLOG_POSTS : BLOG_POSTS.filter(p=>p.category===activeCategory);

  if (activePost) {
    const post = BLOG_POSTS.find(p=>p.id===activePost);
    return (
      <main>
        <Header go={go}/>
        <div style={{borderBottom:'1px solid #00000015',background:'#fff'}}>
          <div className="wrap" style={{padding:'14px 28px',fontSize:13,color:'var(--muted)'}}>
            <a onClick={()=>go('home')} style={{cursor:'pointer'}}>Home</a>
            <span style={{margin:'0 8px',opacity:0.5}}>/</span>
            <a onClick={()=>setActivePost(null)} style={{cursor:'pointer'}}>Blog</a>
            <span style={{margin:'0 8px',opacity:0.5}}>/</span>
            <strong style={{color:'var(--ink)'}}>{post.title}</strong>
          </div>
        </div>
        <section style={{background:'var(--ink)',color:'#fff',borderBottom:'3px solid var(--ink)',position:'relative',overflow:'hidden'}}>
          <div style={{position:'absolute',inset:0,opacity:0.06,backgroundImage:'radial-gradient(#fff 1.4px, transparent 1.6px)',backgroundSize:'14px 14px'}}/>
          <div className="wrap" style={{padding:'56px 28px 0',position:'relative',display:'grid',gridTemplateColumns:'1fr 420px',gap:60,alignItems:'end'}}>
            <div style={{paddingBottom:56}}>
              <div style={{display:'flex',gap:10,marginBottom:16}}>
                <span className="chip" style={{background:'var(--yellow)',color:'var(--ink)'}}>{post.category}</span>
                <span className="mono" style={{fontSize:12,opacity:0.7,display:'flex',alignItems:'center'}}>{post.date} · {post.readTime}</span>
              </div>
              <h1 className="display" style={{fontSize:'clamp(32px,5vw,64px)',margin:'0 0 24px',color:'#fff',lineHeight:1}}>{post.title}</h1>
              <p style={{fontSize:17,opacity:0.8,lineHeight:1.55,maxWidth:520,margin:0}}>{post.excerpt}</p>
            </div>
            <div style={{overflow:'hidden',borderRadius:'18px 18px 0 0',border:'3px solid rgba(255,255,255,0.2)',borderBottom:'none',height:280}}>
              <img src={post.img} style={{width:'100%',height:'100%',objectFit:'cover'}}/>
            </div>
          </div>
        </section>
        <section style={{padding:'60px 0 100px'}}>
          <div className="wrap" style={{display:'grid',gridTemplateColumns:'1fr 320px',gap:60,alignItems:'start'}}>
            <article>
              {post.content.map((block,i)=>(
                block.t==='h2'
                  ? <h2 key={i} className="display" style={{fontSize:'clamp(24px,3vw,38px)',margin:'40px 0 14px',lineHeight:1.05}}>{block.s}</h2>
                  : <p key={i} style={{fontSize:17,lineHeight:1.7,color:'var(--ink-soft)',margin:'0 0 18px'}}>{block.s}</p>
              ))}
              <div style={{marginTop:48,paddingTop:32,borderTop:'3px solid var(--ink)',display:'flex',gap:14}}>
                <button className="btn ghost" onClick={()=>setActivePost(null)}>← Back to blog</button>
                <button className="btn primary" onClick={()=>go('product')}>Order stickers <Icon.Arrow/></button>
              </div>
            </article>
            <aside>
              <div className="sticker" style={{padding:'22px',marginBottom:20,boxShadow:'5px 5px 0 var(--ink)'}}>
                <div className="display" style={{fontSize:20,marginBottom:12}}>Try before you order</div>
                <p style={{fontSize:13,color:'var(--ink-soft)',lineHeight:1.5,margin:'0 0 14px'}}>Get 13 real stickers across every material for just $1. Posted free.</p>
                <button className="btn primary" style={{width:'100%',justifyContent:'center'}} onClick={()=>go('sample')}>Get sample pack <Icon.Arrow/></button>
              </div>
              <div className="sticker" style={{padding:'22px',boxShadow:'5px 5px 0 var(--ink)'}}>
                <div className="display" style={{fontSize:16,marginBottom:12,color:'var(--orange)'}}>More articles</div>
                <div style={{display:'flex',flexDirection:'column',gap:10}}>
                  {BLOG_POSTS.filter(p=>p.id!==activePost).slice(0,3).map(p=>(
                    <button key={p.id} onClick={()=>{setActivePost(p.id);window.scrollTo({top:0,behavior:'instant'});}} style={{textAlign:'left',padding:'10px 0',borderBottom:'1px solid var(--cream-deep)',display:'block',width:'100%'}}>
                      <div style={{fontWeight:800,fontSize:13,lineHeight:1.3,marginBottom:4}}>{p.title}</div>
                      <div style={{fontSize:11,color:'var(--muted)'}}>{p.category} · {p.readTime}</div>
                    </button>
                  ))}
                </div>
              </div>
            </aside>
          </div>
        </section>
        <Footer go={go}/>
      </main>
    );
  }

  return (
    <main>
      <Header go={go}/>
      <ResHero go={go} page="Blog" tag="// STICKER KNOWLEDGE" title={<>The King Kong<br/>Blog.</>} sub="Guides, tips, and honest advice about stickers — from people who print thousands of them every week."/>
      <TrustStrip/>
      <section style={{padding:'80px 0 100px'}}>
        <div className="wrap">
          <div style={{display:'flex',gap:8,marginBottom:36,flexWrap:'wrap'}}>
            {categories.map(c=>(
              <button key={c} onClick={()=>setActiveCategory(c)}
                className="pill" style={{background:activeCategory===c?'var(--ink)':'#fff',color:activeCategory===c?'#fff':'var(--ink)'}}>
                {c}
              </button>
            ))}
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24}}>
            {filtered.map(post=>(
              <button key={post.id} onClick={()=>{setActivePost(post.id);window.scrollTo({top:0,behavior:'instant'});}}
                className="sticker lift" style={{textAlign:'left',padding:0,display:'block',cursor:'pointer'}}>
                <div style={{aspectRatio:'16/9',overflow:'hidden',borderBottom:'3px solid var(--ink)',position:'relative'}}>
                  <img src={post.img} style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                  <span className="chip" style={{position:'absolute',top:12,left:12,background:'var(--yellow)'}}>{post.category}</span>
                </div>
                <div style={{padding:'20px 22px'}}>
                  <div className="mono" style={{fontSize:11,color:'var(--muted)',marginBottom:8}}>{post.date} · {post.readTime}</div>
                  <h3 className="display" style={{fontSize:22,margin:'0 0 10px',lineHeight:1.05}}>{post.title}</h3>
                  <p style={{fontSize:13,color:'var(--ink-soft)',lineHeight:1.5,margin:'0 0 16px'}}>{post.excerpt}</p>
                  <div style={{display:'flex',alignItems:'center',gap:6,color:'var(--orange)',fontWeight:800,fontSize:13}}>Read article <Icon.Arrow size={14}/></div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>
      <Footer go={go}/>
    </main>
  );
};

Object.assign(window, { ArtworkGuidelines, Templates, MaterialsPage, SizingGuide, Sustainability, Blog });
