const { useState, useEffect, useRef } = React;

/* ─── Tweaks ─── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "light",
  "accent": "#334bff",
  "showBlog": true,
  "cardStyle": "numbered"
}/*EDITMODE-END*/;

/* ─── useInView ─── */
function useInView(thresh = 0.1) {
  const ref = useRef(null);
  const [v, setV] = useState(false);
  useEffect(() => {
    const ob = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setV(true); ob.disconnect(); } }, { threshold: thresh });
    if (ref.current) ob.observe(ref.current);
    return () => ob.disconnect();
  }, []);
  return [ref, v];
}

/* ─── Data ─── */
const PROJECTS = [
  { id:1,  n:'01', title:'Aurora Beverages',  cat:'Brand Identity',   year:'2024', color:'#FF5C35', h:'270px' },
  { id:2,  n:'02', title:'Mint & Co.',        cat:'Social Media Kit', year:'2024', color:'#10B981', h:'350px' },
  { id:3,  n:'03', title:'Prism Studio',      cat:'Logo Design',      year:'2023', color:'#8B5CF6', h:'240px' },
  { id:4,  n:'04', title:'Verse Magazine',    cat:'Typography',       year:'2024', color:'#F59E0B', h:'320px' },
  { id:5,  n:'05', title:'Bloom Skincare',    cat:'Brand Guide',      year:'2023', color:'#EC4899', h:'260px' },
  { id:6,  n:'06', title:'Orbit App',         cat:'UI/UX Design',     year:'2024', color:'#3366ff', h:'370px' },
  { id:7,  n:'07', title:'Terra Foods',       cat:'Illustration',     year:'2023', color:'#D97706', h:'290px' },
  { id:8,  n:'08', title:'Neon Festival',     cat:'Social Media',     year:'2024', color:'#84CC16', h:'255px' },
  { id:9,  n:'09', title:'Studio Kala',       cat:'Brand Identity',   year:'2023', color:'#0D9488', h:'335px' },
  { id:10, n:'10', title:'Pulse Fitness',     cat:'UI/UX Design',     year:'2024', color:'#06B6D4', h:'265px' },
  { id:11, n:'11', title:'Lumina Jewelry',    cat:'Logo Design',      year:'2023', color:'#B45309', h:'215px' },
  { id:12, n:'12', title:'Echo Agency',       cat:'Brand Guide',      year:'2024', color:'#7C3AED', h:'295px' },
];

const TOOLS = [
  { name:'Adobe Illustrator', slug:'adobeillustrator', cat:'Vector & Branding',    level:5, color:'#FF7C00', iconUrl:'https://upload.wikimedia.org/wikipedia/commons/f/fb/Adobe_Illustrator_CC_icon.svg' },
  { name:'Figma',             slug:'figma',             cat:'UI/UX & Prototyping',  level:5, color:'#F24E1E', iconUrl:'https://upload.wikimedia.org/wikipedia/commons/3/33/Figma-logo.svg' },
  { name:'Canva',             slug:'canva',             cat:'Social Media Design',  level:5, color:'#00C4CC', iconUrl:'https://upload.wikimedia.org/wikipedia/commons/0/08/Canva_icon_2021.svg' },
  { name:'Photoshop',         slug:'adobephotoshop',    cat:'Photo Editing',        level:4, color:'#31A8FF', iconUrl:'https://upload.wikimedia.org/wikipedia/commons/a/af/Adobe_Photoshop_CC_icon.svg' },
  { name:'InDesign',          slug:'adobeindesign',     cat:'Print & Editorial',    level:4, color:'#FF3366', iconUrl:'https://upload.wikimedia.org/wikipedia/commons/4/48/Adobe_InDesign_CC_icon.svg' },
  { name:'After Effects',     slug:'adobeaftereffects', cat:'Motion & Animation',   level:3, color:'#9999FF', iconUrl:'https://upload.wikimedia.org/wikipedia/commons/c/cb/Adobe_After_Effects_CC_icon.svg' },
  { name:'Procreate',         slug:'procreate',         cat:'Digital Illustration', level:4, color:'#1A1A1A', iconUrl:'https://www.google.com/s2/favicons?sz=64&domain=procreate.com' },
  { name:'Notion',            slug:'notion',            cat:'Project Management',   level:5, color:'#000000', iconUrl:'https://upload.wikimedia.org/wikipedia/commons/4/45/Notion_app_logo.png' },
];

const TESTIMONIALS = [
  { name:'Rahul Verma',  role:'Founder, AuraCo',           initials:'RV', color:'#FF5C35', text:'"Tanika transformed our brand from scratch. Her creative instinct and attention to detail are unmatched — our identity finally feels like us."' },
  { name:'Priya Singh',  role:'Marketing Manager, Bloom',  initials:'PS', color:'#8B5CF6', text:'"She understood our vision immediately and delivered a brand guide our entire team now swears by. An absolute pleasure to work with."' },
  { name:'Arjun Mehta',  role:'Creative Director, Studio M', initials:'AM', color:'#10B981', text:'"Her typography work on Verse was exceptional. Tanika brings both technical skill and artistic sensitivity — a rare combination."' },
  { name:'Sarah Jenkins',role:'CEO, Nexus Tech',           initials:'SJ', color:'#06B6D4', text:'"Working with Tanika was seamless. She captured our tech-forward aesthetic perfectly and delivered a UI that our users absolutely love."' },
];

const BLOG_POSTS = [
  { id:1, num:'01', title:'5 Things Every Brand Identity Needs (But Most Miss)', cat:'Branding', date:'Mar 2024', read:'4 min read', color:'#FF5C35', summary:'A strong brand is more than a logo. Here are the five foundational elements that separate memorable brands from forgettable ones.' },
  { id:2, num:'02', title:'Why Typography Is the Soul of Great Design', cat:'Typography', date:'Jan 2024', read:'5 min read', color:'#3366ff', summary:'Fonts communicate personality before a single word is read. Here\'s how I choose type that tells the right story for every brand.' },
  { id:3, num:'03', title:'My Workflow: Building a Social Media Kit in 3 Days', cat:'Process', date:'Nov 2023', read:'6 min read', color:'#10B981', summary:'Step-by-step: how I research, concept, design, and deliver cohesive social media systems that clients actually use.' },
  { id:4, num:'04', title:'The Psychology of Color in UI/UX Design', cat:'UI/UX', date:'Feb 2024', read:'7 min read', color:'#8B5CF6', summary:'Color choice is rarely arbitrary. Dive into how color theory actively shapes user behaviour, trust, and conversion rates on digital platforms.' },
  { id:5, num:'05', title:'Adding Warmth: When to Use Custom Illustrations', cat:'Illustration', date:'Dec 2023', read:'4 min read', color:'#F59E0B', summary:'Stock photos can feel cold. Learn how custom digital illustration injects personality and humanity into B2B and consumer brands alike.' },
  { id:6, num:'06', title:'Designing for Marketing vs. Designing for Product', cat:'Marketing', date:'Oct 2023', read:'5 min read', color:'#EC4899', summary:'The goals are fundamentally different. Here is how I shift my mindset when designing an ad campaign versus a dashboard interface.' },
  { id:7, num:'07', title:'How to Keep Your Instagram Grid Looking Fresh', cat:'Social Media', date:'Sep 2023', read:'3 min read', color:'#84CC16', summary:'Stop stressing over perfect checkerboards. A modern guide to building a flexible, engaging, and highly visual social media presence.' },
  { id:8, num:'08', title:'The Reality of Being a Freelance Designer', cat:'Freelancing', date:'Aug 2023', read:'8 min read', color:'#06B6D4', summary:'Beyond the aesthetic Instagram reels: managing client expectations, dealing with scope creep, and pricing your creative work confidently.' },
  { id:9, num:'09', title:'Why Your Business Needs a Design System', cat:'Design Systems', date:'Jul 2023', read:'6 min read', color:'#D97706', summary:'Scaling a business without a design system leads to visual chaos. Here is how creating reusable components saves thousands of dollars.' },
  { id:10, num:'10', title:'Case Study Breakdown: The Orbit App Redesign', cat:'Case Studies', date:'Jun 2023', read:'9 min read', color:'#0D9488', summary:'A deep dive into the UX audit, user testing, and visual overhaul that led to a 58% increase in task completion for Orbit.' },
  { id:11, num:'11', title:'Client Communication for Creatives', cat:'Process', date:'May 2023', read:'4 min read', color:'#7C3AED', summary:'How to present your designs so clients actually understand the rationale, reducing revisions and building trust.' },
  { id:12, num:'12', title:'Top 5 Figma Plugins I Use Daily', cat:'UI/UX', date:'Apr 2023', read:'3 min read', color:'#B45309', summary:'A quick roundup of the essential Figma plugins that speed up my workflow, from accessibility checkers to icon managers.' }
];

const MARQUEE = ['Brand Identity','Logo Design','Typography','Social Media','UI/UX Design','Illustration','Brand Guides','Figma','Adobe Suite','Canva'];

const CASE_STUDIES = [
  {
    id:1, n:'CS — 01', title:'Aurora Beverages',
    cat:'Brand Identity', year:'2024', color:'#FF5C35',
    challenge:'A new beverage startup needed a bold, shelf-ready identity that could stand out in a saturated market and communicate energy and freshness.',
    process:'Started with deep competitor research and mood-boarding. Developed 3 distinct directions, each with its own colour story. Iterated through 2 rounds of feedback before landing on the final system.',
    outcome:'Full brand system — logo, colour palette, typography, packaging guidelines, and social media templates. Launch resulted in a 40% higher-than-expected social engagement in week one.',
    deliverables:['Logo Suite','Brand Guidelines','Packaging Design','Social Templates'],
    duration:'3 weeks',
  },
  {
    id:2, n:'CS — 02', title:'Orbit App',
    cat:'UI/UX Design', year:'2024', color:'#3366ff',
    challenge:'A productivity app for freelancers needed a complete UI overhaul — the existing interface was cluttered and users were churning at the onboarding stage.',
    process:'Audited the existing UI with heuristic analysis, conducted user interviews, and mapped new user flows. Designed wireframes in Figma, tested with 8 users, then delivered polished high-fidelity screens.',
    outcome:'Redesigned onboarding and dashboard screens. Prototype user testing showed a 58% improvement in task completion rate and strong positive sentiment toward the new visual design.',
    deliverables:['UX Audit Report','Wireframes','High-Fidelity UI','Figma Prototype'],
    duration:'5 weeks',
  },
  {
    id:3, n:'CS — 03', title:'Bloom Skincare',
    cat:'Brand Guide', year:'2023', color:'#EC4899',
    challenge:'Bloom had grown organically but lacked a consistent visual language. Different designers were producing assets that felt disconnected and diluted the brand.',
    process:'Interviewed the founders to extract brand values. Audited all existing materials. Built a comprehensive brand guide from scratch — covering tone of voice, photography style, and every design component.',
    outcome:'A 42-page brand guide now used by the full marketing team and external agencies. Consistency across social, web, and print improved dramatically within 2 months of launch.',
    deliverables:['42-Page Brand Guide','Color & Type System','Imagery Guidelines','Component Library'],
    duration:'4 weeks',
  },
];

const SERVICES = [
  { icon:'✦', name:'Brand Identity', desc:'Logo, colours, type, and brand guidelines — a complete visual system that tells your story.' },
  { icon:'◈', name:'Social Media Design', desc:'Scroll-stopping templates, campaign assets, and visual content kits built for engagement.' },
  { icon:'◉', name:'UI/UX Design', desc:'Clean, user-centred digital interfaces — from wireframes to polished high-fidelity screens.' },
  { icon:'◇', name:'Illustration', desc:'Custom illustrations that add personality and depth to your brand or digital product.' },
  { icon:'▣', name:'Typography & Editorial', desc:'Type-led layouts for magazines, books, reports, and any print or digital publication.' },
  { icon:'◐', name:'Brand Guides', desc:'Comprehensive documentation so every designer, printer, or partner stays on-brand.' },
];

const FAQS = [
  { q:'How do we get started?', a:"Simply reach out via LinkedIn or WhatsApp with a brief about your project — what you need, your timeline, and any references you love. I'll respond within 24 hours with a short call invite to discuss further." },
  { q:'What information do you need from me before starting?', a:"A simple brief goes a long way: your business name, what you do, who your audience is, what you like/dislike visually, your timeline, and any examples of designs you admire. Don't worry — I'll guide you through this with a short questionnaire." },
  { q:'How many revisions are included?', a:"It depends on the package, but typically 2–3 structured revision rounds are included. Revisions are focused feedback sessions — not open-ended do-overs — which keeps the project moving efficiently." },
  { q:'Do you work with international clients?', a:"Absolutely. I work with clients across India and internationally. All communication is in English, and I'm comfortable working across time zones. Payments can be processed in INR or USD." },
  { q:'What file formats will I receive?', a:"You'll receive all the final files you need — typically PNG, SVG, PDF, and source files (AI or Figma). Everything is organized in a clearly named folder with a handoff document explaining each file." },
  { q:'How long does a typical project take?', a:"A logo design takes 1–2 weeks. A full brand identity system takes 3–5 weeks. UI/UX projects vary by scope. Rush timelines can sometimes be accommodated — just ask." },
  { q:'Do you sign NDAs?', a:"Yes, absolutely. I take confidentiality seriously and am happy to sign an NDA before any sensitive project details are shared." },
  { q:'What if I don\'t like any of the initial concepts?', a:"It rarely happens when the brief is clear, but if none of the initial directions feel right, we'll have a call to re-align. I'm committed to delivering something you're genuinely proud of." },
];

/* ─── Helper: Section Label ─── */
function SLabel({ num, text, theme }) {
  return (
    <div className="sec-label">
      <span className="sec-label-num" style={{color:theme.accent}}>{num}</span>
      <span className="sec-label-dash" style={{background:theme.border}}></span>
      <span className="sec-label-txt" style={{color:theme.muted}}>{text}</span>
    </div>
  );
}

/* ─── Helper: Dots ─── */
function Dots({ level, color, total=5 }) {
  return (
    <span style={{display:'inline-flex',gap:4,alignItems:'center'}}>
      {Array.from({length:total}).map((_,i) => (
        <span key={i} className="dot" style={{background: i < level ? color : color+'28'}}></span>
      ))}
    </span>
  );
}

/* ─── Placeholder image ─── */
function Placeholder({ color, h, num, numbered }) {
  const uid = useRef('ph'+Math.random().toString(36).slice(2,7)).current;
  return (
    <div style={{height:h, background:color+'15', position:'relative', overflow:'hidden'}}>
      <svg width="100%" height="100%" style={{position:'absolute',inset:0}} preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id={uid} patternUnits="userSpaceOnUse" width="30" height="30" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="30" stroke={color} strokeWidth="1" strokeOpacity="0.16"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill={`url(#${uid})`}/>
      </svg>
      <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center'}}>
        <div style={{width:56,height:56,borderRadius:'50%',background:color,opacity:.22}}></div>
      </div>
      {numbered && (
        <div style={{position:'absolute',top:14,left:16,fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:13,color:color,letterSpacing:'0.04em',opacity:.7}}>{num}</div>
      )}
    </div>
  );
}

/* ─── Nav ─── */
function Nav({ theme, isBlogPage = false }) {
  const T = theme;
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);
  return (
    <nav style={{
      position:'fixed', top:0, left:0, right:0, zIndex:300,
      height:60, padding:'0 var(--px)',
      display:'flex', alignItems:'center', justifyContent:'space-between',
      background: scrolled ? T.bg+'EE' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px)' : 'none',
      borderBottom: scrolled ? `1px solid ${T.border}` : 'none',
      transition:'all 0.3s ease',
    }}>
      {/* Monogram */}
      <a href="/" style={{display:'flex',alignItems:'center',gap:10,textDecoration:'none'}}>
        <div style={{width:34,height:34,borderRadius:'50%',background:T.accent,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
          <span style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:13,color:'#fff',letterSpacing:'-0.02em'}}>TS</span>
        </div>
        <span className="nav-name" style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:14,color:T.text,letterSpacing:'-0.01em'}}>Tanika Sharma</span>
      </a>
      <div style={{display:'flex',gap:16,alignItems:'center'}}>
        {isBlogPage ? (
          <>
            <span className="nav-journal-label" style={{fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:600,fontSize:13,color:T.muted,letterSpacing:'0.02em'}}>
              Journal
            </span>
            <a href="/" className="btn-premium primary btn-nav-cta">
              <span className="back-text">← Back to Portfolio</span>
              <span className="back-text-short">← Portfolio</span>
            </a>
          </>
        ) : (
          <>
            <div className="nav-links">
              {['Work','Cases','Tools','About','Services','Blog','FAQ','Contact'].map(l => (
                <a key={l} href={`#${l === 'Cases' ? 'casestudies' : l.toLowerCase()}`} className="nav-a" style={{color:T.text}}>{l}</a>
              ))}
            </div>
            <a href="https://cal.com" target="_blank" rel="noopener" className="btn-premium primary btn-nav-cta">
              Book a Call
            </a>
          </>
        )}
      </div>
    </nav>
  );
}

/* ─── Hero ─── */
function Hero({ theme }) {
  const T = theme;
  const [scrollY, setScrollY] = useState(0);
  useEffect(() => {
    const h = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  return (
    <section id="hero" style={{minHeight:'100svh',display:'flex',alignItems:'center',padding:'140px var(--px) 80px',position:'relative',overflowX:'hidden'}}>
      {/* Background shapes */}
      <div style={{position:'absolute',top:'8%',right:'-4%',width:420,height:420,borderRadius:'50%',background:T.accent,opacity:.06,filter:'blur(60px)',transform:`translateY(${scrollY*0.08}px)`,transition:'transform 0.1s'}}></div>
      <div style={{position:'absolute',bottom:'10%',left:'-6%',width:340,height:340,borderRadius:'50%',background:'#10B981',opacity:.05,filter:'blur(50px)',transform:`translateY(${-scrollY*0.05}px)`,transition:'transform 0.1s'}}></div>

      <div className="hero-grid" style={{maxWidth:1240,margin:'0 auto'}}>
        {/* Left: Text */}
        <div>
          {/* Available pill */}
          <div style={{display:'inline-flex',alignItems:'center',gap:8,padding:'5px 14px',borderRadius:100,border:`1px solid ${T.border}`,fontSize:12,color:T.muted,marginBottom:32,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:500}}>
            <span style={{width:7,height:7,borderRadius:'50%',background:'#22C55E',display:'inline-block',boxShadow:`0 0 0 3px #22C55E30`}}></span>
            Available globally · Based in India
          </div>

          {/* Giant name */}
          <h1 style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(46px,12vw,130px)',lineHeight:0.92,letterSpacing:'-0.04em',color:T.text,marginBottom:0}}>
            TANIKA<br/>
            <span style={{color:T.accent,fontWeight:400,fontStyle:'italic',letterSpacing:'-0.03em'}}>Sharma.</span>
          </h1>

          <div style={{display:'flex',alignItems:'center',gap:20,margin:'32px 0 20px',paddingTop:28,borderTop:`1px solid ${T.border}`}}>
            <div style={{fontFamily:"'Plus Jakarta Sans',sans-serif",fontSize:'clamp(14px,1.4vw,17px)',color:T.muted,lineHeight:1.65,maxWidth:460,fontWeight:400}}>
              Graphic designer crafting bold brand identities, expressive typography, and scroll-stopping visuals — 3+ years across India and beyond.
            </div>
          </div>

          <div className="hero-btns" style={{display:'flex',gap:16,flexWrap:'wrap',marginBottom:52}}>
            <a href="https://cal.com" target="_blank" rel="noopener" className="btn-premium primary">
              Book a Call <span className="icon-anim" style={{display:'inline-block'}}>→</span>
            </a>
            <a href="https://wa.me/917341101677" target="_blank" rel="noopener" className="btn-premium dark-pill">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
              WhatsApp Me
            </a>
          </div>

          {/* Stats */}
          <div className="hero-stats">
            {[['3+','Years Experience'],['50+','Projects Delivered'],['30+','Happy Clients']].map(([n,l]) => (
              <div key={l} className="stat-item">
                <div style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(24px,3.5vw,40px)',lineHeight:1,color:T.text}}>{n}</div>
                <div style={{fontSize:11,color:T.muted,marginTop:5,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:500,letterSpacing:'0.02em'}}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Right: Rotating TS circle */}
        <div style={{display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
          <div style={{position:'relative',width:220,height:220}}>
            {/* Rotating text ring */}
            <svg width="220" height="220" viewBox="0 0 220 220" style={{position:'absolute',inset:0,animation:'spin 22s linear infinite'}}>
              <defs>
                <path id="ring" d="M 110,110 m -88,0 a 88,88 0 1,1 176,0 a 88,88 0 1,1 -176,0"/>
              </defs>
              <text fontSize="10.5" fill={T.accent} fontFamily="'Syne',sans-serif" fontWeight="600" letterSpacing="5.5" opacity="0.8">
                <textPath href="#ring">GRAPHIC DESIGNER · INDIA & WORLDWIDE · 2021 – PRESENT ·&nbsp;</textPath>
              </text>
            </svg>
            {/* Center monogram */}
            <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center'}}>
              <div style={{width:120,height:120,borderRadius:'50%',background:T.accent,display:'flex',alignItems:'center',justifyContent:'center'}}>
                <span style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:38,color:'#fff',letterSpacing:'-0.03em'}}>TS</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Marquee ─── */
function Marquee({ theme }) {
  const T = theme;
  const items = [...MARQUEE,...MARQUEE];
  return (
    <div style={{borderTop:`1px solid ${T.border}`,borderBottom:`1px solid ${T.border}`,padding:'18px 0',overflow:'hidden',background:T.bg,color:T.text}}>
      <div className="mq-inner">
        {items.map((it,i) => (
          <span key={i} className="mq-item">
            {it}
            <span className="marquee-spark" style={{color:T.accent,fontSize:'0.5em',lineHeight:1,opacity:1,WebkitTextStroke:0,display:'inline-block'}}>✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

/* ─── Case Studies ─── */
function CaseStudies({ theme }) {
  const T = theme;
  const [ref, v] = useInView();
  const [active, setActive] = useState(null);
  const data = typeof window !== 'undefined' && window.WP_CASE_STUDIES && window.WP_CASE_STUDIES.length > 0 ? window.WP_CASE_STUDIES : CASE_STUDIES;

  return (
    <section id="casestudies" style={{padding:'var(--py) var(--px)',background:T.bgAlt,borderTop:`1px solid ${T.border}`,borderBottom:`1px solid ${T.border}`}}>
      <div style={{maxWidth:1200,margin:'0 auto'}}>
        <div ref={ref} className={`reveal${v?' in':''}`}>
          <SLabel num="02" text="Case Studies" theme={T}/>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:52,flexWrap:'wrap',gap:20}}>
            <h2 style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(32px,4.5vw,58px)',color:T.text,letterSpacing:'-0.03em',lineHeight:1.0}}>
              Behind the<br/><span style={{color:T.accent}}>work.</span>
            </h2>
            <p style={{fontSize:15,color:T.muted,maxWidth:360,lineHeight:1.7,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>
              A deeper look at the projects — the challenge, my process, and what we achieved together.
            </p>
          </div>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:2}}>
          {data.map((cs, i) => {
            const isOpen = active === cs.id;
            return (
              <div key={cs.id} className={`reveal${v?' in':''}`} style={{transitionDelay:`${i*0.1}s`,borderRadius:12,overflow:'hidden',border:`1px solid ${T.border}`}}>
                {/* Header row */}
                <button onClick={() => setActive(isOpen ? null : cs.id)}
                  style={{width:'100%',background:isOpen ? cs.color+'12' : T.bg,border:'none',cursor:'pointer',padding:'24px 28px',display:'flex',alignItems:'center',justifyContent:'space-between',gap:20,transition:'background 0.3s'}}>
                  <div className="cs-header">
                    <span style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:12,color:cs.color,letterSpacing:'0.06em',flexShrink:0}}>{cs.n}</span>
                    <span style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(16px,2vw,22px)',color:T.text,textAlign:'left'}}>{cs.title}</span>
                    <span className="cs-header-cat" style={{fontSize:11,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:500,padding:'3px 10px',border:`1px solid ${T.border}`,borderRadius:100,flexShrink:0}}>{cs.cat}</span>
                  </div>
                  <div style={{display:'flex',alignItems:'center',gap:16,flexShrink:0}}>
                    <span style={{fontSize:12,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>{cs.year}</span>
                    <div style={{width:28,height:28,borderRadius:'50%',background:cs.color+'20',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,transition:'transform 0.3s',transform:isOpen?'rotate(45deg)':'rotate(0deg)'}}>
                      <span style={{fontSize:18,color:cs.color,lineHeight:1,marginTop:-1}}>+</span>
                    </div>
                  </div>
                </button>
                {/* Expanded content */}
                {isOpen && (
                  <div style={{padding:'0 28px 32px',background:cs.color+'08',borderTop:`1px solid ${cs.color}30`}}>
                    <div className="cs-grid">
                      {[['The Challenge',cs.challenge],['My Process',cs.process],['The Outcome',cs.outcome]].map(([label,text]) => (
                        <div key={label}>
                          <div style={{fontSize:10,fontWeight:700,letterSpacing:'0.16em',color:cs.color,textTransform:'uppercase',fontFamily:"'Plus Jakarta Sans',sans-serif",marginBottom:10}}>{label}</div>
                          <p style={{fontSize:14,color:T.muted,lineHeight:1.72,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>{text}</p>
                        </div>
                      ))}
                    </div>
                    <div style={{display:'flex',alignItems:'center',gap:12,flexWrap:'wrap',paddingTop:20,borderTop:`1px solid ${cs.color}20`}}>
                      <span style={{fontSize:11,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:600,letterSpacing:'0.06em',marginRight:4}}>DELIVERABLES</span>
                      {cs.deliverables.map(d => (
                        <span key={d} style={{fontSize:12,color:cs.color,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:500,padding:'4px 12px',borderRadius:100,background:cs.color+'15',border:`1px solid ${cs.color}30`}}>{d}</span>
                      ))}
                      <span style={{marginLeft:'auto',fontSize:12,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>⏱ {cs.duration}</span>
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ─── Services / Custom Quote ─── */
function Services({ theme }) {
  const T = theme;
  const [ref, v] = useInView();
  return (
    <section id="services" style={{padding:'var(--py) var(--px)',borderTop:`1px solid ${T.border}`}}>
      <div style={{maxWidth:1200,margin:'0 auto'}}>
        <div ref={ref} className={`reveal${v?' in':''}`}>
          <SLabel num="07" text="Services" theme={T}/>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:56,flexWrap:'wrap',gap:20}}>
            <h2 style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(32px,4.5vw,58px)',color:T.text,letterSpacing:'-0.03em',lineHeight:1.0}}>
              What I<br/><span style={{color:T.accent}}>do best.</span>
            </h2>
            <p style={{fontSize:15,color:T.muted,maxWidth:380,lineHeight:1.75,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>
              Every engagement is custom-scoped. No fixed packages — just the right scope for your project.
            </p>
          </div>
        </div>
        <div className="grid-3" style={{marginBottom:44}}>
          {SERVICES.map((svc,i) => (
            <div key={svc.name} className={`reveal${v?' in':''}`} style={{transitionDelay:`${i*0.07}s`,padding:'28px 24px',background:T.bgAlt,border:`1px solid ${T.border}`,borderRadius:14,transition:'transform 0.25s, box-shadow 0.25s'}}
              onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-5px)';e.currentTarget.style.boxShadow='0 12px 32px rgba(0,0,0,0.08)'}}
              onMouseLeave={e=>{e.currentTarget.style.transform='';e.currentTarget.style.boxShadow=''}}>
              <div style={{fontSize:24,color:T.accent,marginBottom:16,lineHeight:1}}>{svc.icon}</div>
              <div style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:17,color:T.text,marginBottom:10}}>{svc.name}</div>
              <p style={{fontSize:13,color:T.muted,lineHeight:1.72,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>{svc.desc}</p>
            </div>
          ))}
        </div>
        {/* CTA strip */}
        <div className={`cta-box reveal${v?' in':''}`} style={{background:T.text}}>
          <div>
            <div style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(22px,3vw,36px)',color:T.bg,letterSpacing:'-0.02em',marginBottom:8}}>Every project gets a custom quote.</div>
            <p style={{fontSize:15,color:T.bg,opacity:.62,fontFamily:"'Plus Jakarta Sans',sans-serif",maxWidth:480,lineHeight:1.6}}>Tell me about your project — timeline, goals, references — and I'll get back to you within 24 hours.</p>
          </div>
          <div className="cta-box-btns" style={{display:'flex',gap:12,flexShrink:0,flexWrap:'wrap'}}>
            <a href="https://cal.com" target="_blank" rel="noopener" className="btn-premium primary cta-box-primary-btn">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
              Book a Free Call
            </a>
            <a href="https://www.linkedin.com/in/tanika-sharma-graphic-designer/" target="_blank" rel="noopener" className="btn-premium secondary cta-box-alt-btn">
              Get in Touch <span className="icon-anim" style={{display:'inline-block'}}>↗</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── FAQ ─── */
function FAQ({ theme }) {
  const T = theme;
  const [ref, v] = useInView();
  const [open, setOpen] = useState(null);
  const data = typeof window !== 'undefined' && window.WP_FAQS && window.WP_FAQS.length > 0 ? window.WP_FAQS : FAQS;

  return (
    <section id="faq" style={{padding:'var(--py) var(--px)',background:T.bgAlt,borderTop:`1px solid ${T.border}`,borderBottom:`1px solid ${T.border}`}}>
      <div style={{maxWidth:860,margin:'0 auto'}}>
        <div ref={ref} className={`reveal${v?' in':''}`}>
          <SLabel num="08" text="FAQ" theme={T}/>
          <h2 style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(30px,4vw,52px)',color:T.text,letterSpacing:'-0.025em',marginBottom:12}}>
            Questions I get<br/><span style={{color:T.accent}}>asked a lot.</span>
          </h2>
          <p style={{fontSize:15,color:T.muted,lineHeight:1.7,fontFamily:"'Plus Jakarta Sans',sans-serif",marginBottom:52,maxWidth:480}}>
            Everything you need to know before we start working together.
          </p>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:2}}>
          {data.map((faq, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`reveal${v?' in':''}`} style={{transitionDelay:`${i*0.05}s`,borderRadius:10,overflow:'hidden',border:`1px solid ${T.border}`,background: isOpen ? T.accent+'08' : T.bg,transition:'background 0.3s'}}>
                <button onClick={() => setOpen(isOpen ? null : i)}
                  style={{width:'100%',background:'transparent',border:'none',cursor:'pointer',padding:'20px 24px',display:'flex',alignItems:'center',justifyContent:'space-between',gap:16,textAlign:'left'}}>
                  <span style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:16,color:T.text,lineHeight:1.3}}>{faq.q}</span>
                  <div style={{width:26,height:26,borderRadius:'50%',background: isOpen ? T.accent : T.border,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,transition:'all 0.3s',transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)'}}>
                    <span style={{fontSize:16,color: isOpen ? '#fff' : T.muted,lineHeight:1,marginTop:-1}}>+</span>
                  </div>
                </button>
                {isOpen && (
                  <div style={{padding:'0 24px 22px'}}>
                    <p style={{fontSize:15,color:T.muted,lineHeight:1.78,fontFamily:"'Plus Jakarta Sans',sans-serif",borderTop:`1px solid ${T.accent}20`,paddingTop:16}}>{faq.a}</p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
        <div style={{marginTop:36,textAlign:'center'}}>
          <p style={{fontSize:15,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif",marginBottom:16}}>Still have questions?</p>
          <a href="https://cal.com" target="_blank" rel="noopener" className="btn-premium primary">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            Book a Free Call <span className="icon-anim" style={{display:'inline-block'}}>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ─── Work ─── */
function Work({ theme, numbered }) {
  const T = theme;
  const [ref, v] = useInView();
  
  const rawData = typeof window !== 'undefined' && window.WP_PORTFOLIO && window.WP_PORTFOLIO.length > 0 ? window.WP_PORTFOLIO : PROJECTS;
  const rawCats = typeof window !== 'undefined' && window.WP_PORTFOLIO_CATS ? window.WP_PORTFOLIO_CATS : ['Brand Identity','UI/UX Design','Social Media','Illustration'];
  
  const [filter, setFilter] = useState('All');
  const [batch, setBatch] = useState(0);
  const [isHovered, setIsHovered] = useState(false);
  const [lb, setLb] = useState(null);
  
  const filtered = filter === 'All' ? rawData : rawData.filter(d => (d.all_cats && d.all_cats.includes(filter)) || (d.cat && d.cat.includes(filter)));
  
  const BATCH_SIZE = 9;
  const numBatches = Math.ceil(filtered.length / BATCH_SIZE) || 1;
  const currentItems = filtered.slice(batch * BATCH_SIZE, (batch + 1) * BATCH_SIZE);
  
  useEffect(() => {
    setBatch(0);
  }, [filter]);

  useEffect(() => {
    // Auto-rotation removed to prevent page height jumping
  }, [numBatches, isHovered, lb]);

  const getEmbed = (type, url) => {
    if (!url) return '';
    if (type === 'short' || url.includes('youtube') || url.includes('youtu.be')) {
      const id = url.split('/').pop().split('?')[0].replace('watch', '');
      return `https://www.youtube.com/embed/${id}?autoplay=1`;
    }
    if (type === 'reel' || url.includes('instagram.com')) {
      const clean = url.split('?')[0].replace(/\/$/, '');
      return `${clean}/embed`;
    }
    if (type === 'vimeo' || url.includes('vimeo.com')) {
      const id = url.split('/').pop();
      return `https://player.vimeo.com/video/${id}?autoplay=1`;
    }
    if (type === 'figma' || url.includes('figma.com')) {
      return `https://www.figma.com/embed?embed_host=portfolio&url=${encodeURIComponent(url)}`;
    }
    return url;
  };

  const isPlayable = (type) => ['mp4','reel','short','vimeo','figma','gallery','before_after'].includes(type);

  return (
    <section id="work" style={{padding:'var(--py) var(--px) 80px',background:T.bg}}>
      <div style={{maxWidth:1300,margin:'0 auto'}}>
        <div ref={ref} className={`reveal${v?' in':''}`}>
          <SLabel num="01" text="Selected Work" theme={T}/>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:42,flexWrap:'wrap',gap:20}}>
            <h2 style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(42px,6vw,80px)',color:T.text,letterSpacing:'-0.04em',lineHeight:0.95}}>
              Work that<br/><span style={{color:T.accent,fontStyle:'italic',fontWeight:400}}>speaks.</span>
            </h2>
            <div style={{maxWidth:480}}>
              <p style={{fontSize:15,color:T.muted,lineHeight:1.75,fontFamily:"'Plus Jakarta Sans',sans-serif",marginBottom:16}}>
                A live showcase of recent projects spanning branding, digital design, and interactive media. 
                {numBatches > 1 && " Auto-rotating to show more work."}
              </p>
              <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
                {['All', ...rawCats].map(f => (
                  <button key={f} onClick={() => setFilter(f)}
                    style={{
                      background: filter === f ? T.accent : 'transparent',
                      color: filter === f ? '#fff' : T.muted,
                      border: `1px solid ${filter === f ? T.accent : T.border}`,
                      fontSize:11,fontWeight:600,letterSpacing:'0.08em',textTransform:'uppercase',
                      padding:'6px 14px',borderRadius:100,fontFamily:"'Plus Jakarta Sans',sans-serif",
                      cursor:'pointer', transition:'all 0.2s'
                    }}>
                    {f}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Dashboard Grid Container */}
        <div 
          key={filter + batch} 
          style={{minHeight:600}}
          onMouseEnter={() => setIsHovered(true)}
          onMouseLeave={() => setIsHovered(false)}
        >
          <div className="masonry">
            {currentItems.map((p,i) => {
              const playable = isPlayable(p.media_type);
              return (
                <div key={p.id} className="card-break reveal in" style={{transitionDelay:`${i*0.05}s`}}>
                  <div className="pcard" onClick={() => playable && setLb(p)} style={{cursor: playable ? 'pointer' : 'default'}}>
                    <div className="pcard-img" style={{background: p.color+'15'}}>
                      {p.thumb ? (
                        <img src={p.thumb} alt={p.title} style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}} />
                      ) : (
                        <Placeholder color={p.color} h={p.h || '300px'} num={p.n} numbered={numbered}/>
                      )}
                      {playable && (
                        <div style={{position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)',width:56,height:56,borderRadius:'50%',background:'rgba(0,0,0,0.6)',display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',backdropFilter:'blur(4px)',zIndex:2}}>
                          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </div>
                      )}
                    </div>
                    <div className="pcard-hover">
                      <div style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:15,color:'#fff',marginBottom:3}}>{p.title}</div>
                      <div style={{fontSize:11,color:'rgba(255,255,255,0.7)',fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:500,letterSpacing:'0.04em'}}>{p.first_cat || p.cat} · {p.year}</div>
                      {p.ext_link && (
                        <a href={p.ext_link} target="_blank" rel="noopener" onClick={e => e.stopPropagation()} style={{display:'inline-block',marginTop:12,fontSize:12,color:'#fff',borderBottom:'1px solid #fff',textDecoration:'none',paddingBottom:2}}>View Live ↗</a>
                      )}
                    </div>
                  </div>
                  <div style={{padding:'12px 14px',display:'flex',justifyContent:'space-between',background:T.bgAlt,borderRadius:'0 0 10px 10px',border:`1px solid ${T.border}`,borderTop:'none'}}>
                    <div>
                      <div style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:13,color:T.text}}>{p.title}</div>
                      <div style={{fontSize:11,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif",marginTop:2}}>{p.first_cat || p.cat}</div>
                    </div>
                    <span style={{fontSize:11,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif",alignSelf:'flex-start',marginTop:2}}>{p.year}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Pagination Dots */}
        {numBatches > 1 && (
          <div style={{display:'flex',justifyContent:'center',gap:8,marginTop:32}}>
            {Array.from({length: numBatches}).map((_, i) => (
              <button key={i} onClick={() => setBatch(i)}
                style={{width:i===batch?24:8,height:8,borderRadius:4,background:i===batch?T.accent:T.border,border:'none',cursor:'pointer',transition:'all 0.3s'}}
                aria-label={`Go to page ${i+1}`}
              />
            ))}
          </div>
        )}

      </div>

      {/* Lightbox */}
      {lb && (
        <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.9)',zIndex:9999,display:'flex',alignItems:'center',justifyContent:'center',backdropFilter:'blur(10px)',padding:20}}>
          <button onClick={() => setLb(null)} style={{position:'absolute',top:30,right:30,background:'rgba(255,255,255,0.1)',border:'none',color:'#fff',width:44,height:44,borderRadius:'50%',cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center',fontSize:24}}>&times;</button>
          <div style={{width:'100%',maxWidth: lb.media_type==='reel' || lb.media_type==='short' ? 400 : 1000, height: lb.media_type==='reel' || lb.media_type==='short' ? '80vh' : 'auto', maxHeight:'90vh', background:'#000', borderRadius:16, overflow:'hidden', boxShadow:'0 20px 60px rgba(0,0,0,0.5)'}}>
            
            {lb.media_type === 'mp4' && (
              <video src={lb.media_url} controls autoPlay style={{width:'100%',height:'100%',display:'block'}}></video>
            )}

            {['reel','short','vimeo','figma'].includes(lb.media_type) && (
              <iframe src={getEmbed(lb.media_type, lb.media_url)} style={{width:'100%',height:'100%',minHeight: lb.media_type==='reel' || lb.media_type==='short' ? '80vh' : 600, border:'none'}} allow="autoplay; fullscreen" allowFullScreen></iframe>
            )}

            {lb.media_type === 'gallery' && lb.gallery && (
              <div style={{padding:20,overflowY:'auto',maxHeight:'85vh',display:'flex',flexDirection:'column',gap:20}}>
                {lb.gallery.map((g,i) => <img key={i} src={g} alt="" style={{width:'100%',borderRadius:8,display:'block'}}/>)}
              </div>
            )}

            {lb.media_type === 'before_after' && (
              <div style={{display:'flex',width:'100%',height:'auto'}}>
                <div style={{flex:1,borderRight:'2px solid #fff',position:'relative'}}>
                  <div style={{position:'absolute',top:10,left:10,background:'rgba(0,0,0,0.7)',color:'#fff',padding:'4px 8px',fontSize:12,borderRadius:4,fontFamily:'sans-serif'}}>Before</div>
                  <img src={lb.before_img} alt="Before" style={{width:'100%',display:'block'}}/>
                </div>
                <div style={{flex:1,position:'relative'}}>
                  <div style={{position:'absolute',top:10,right:10,background:'rgba(0,0,0,0.7)',color:'#fff',padding:'4px 8px',fontSize:12,borderRadius:4,fontFamily:'sans-serif'}}>After</div>
                  <img src={lb.after_img} alt="After" style={{width:'100%',display:'block'}}/>
                </div>
              </div>
            )}

          </div>
        </div>
      )}
    </section>
  );
}

/* ─── Tools ─── */
function Tools({ theme }) {
  const T = theme;
  const [ref, v] = useInView();
  return (
    <section id="tools" style={{padding:'var(--py) var(--px)'}}>
      <div style={{maxWidth:1200,margin:'0 auto'}}>
        <div ref={ref} className={`reveal${v?' in':''}`}>
          <SLabel num="03" text="Tools & Software" theme={T}/>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:44,flexWrap:'wrap',gap:20}}>
            <h2 style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(30px,4vw,52px)',color:T.text,letterSpacing:'-0.025em',lineHeight:1.1}}>
              The toolkit<br/><span style={{color:T.accent}}>behind the magic.</span>
            </h2>
          </div>
        </div>
        <div className="tools-grid">
          {TOOLS.map((tool,i) => (
            <div key={tool.name} className={`tool-card reveal${v?' in':''}`}
              style={{padding:'22px 20px',background:T.bgAlt,border:`1px solid ${T.border}`,transitionDelay:`${i*0.06}s`}}>
              <div style={{width:46,height:46,borderRadius:10,background:tool.color+'18',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:14,border:`1px solid ${tool.color}30`}}>
                <img src={tool.iconUrl} alt={tool.name} width="24" height="24" style={{display:'block',objectFit:'contain'}} onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex'}}/>
                <span style={{display:'none',fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:13,color:tool.color}}>{tool.name.slice(0,2)}</span>
              </div>
              <div style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:15,color:T.text,marginBottom:3}}>{tool.name}</div>
              <div style={{fontSize:11,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif",marginBottom:12,fontWeight:500}}>{tool.cat}</div>
              <Dots level={tool.level} color={tool.color}/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── About ─── */
function About({ theme }) {
  const T = theme;
  const [ref, v] = useInView();
  const uid = useRef('ab'+Math.random().toString(36).slice(2,6)).current;
  return (
    <section id="about" style={{padding:'var(--py) var(--px)',background:T.bgAlt,borderTop:`1px solid ${T.border}`,borderBottom:`1px solid ${T.border}`}}>
      <div className="about-grid" style={{maxWidth:1200,margin:'0 auto'}}>
        <div ref={ref} className={`reveal${v?' in':''}`}>
          <div style={{aspectRatio:'3/4',borderRadius:16,overflow:'hidden',position:'relative',background:T.border}}>
            <svg width="100%" height="100%" style={{position:'absolute',inset:0}}>
              <defs>
                <pattern id={uid} patternUnits="userSpaceOnUse" width="22" height="22" patternTransform="rotate(45)">
                  <line x1="0" y1="0" x2="0" y2="22" stroke={T.accent} strokeWidth="1" strokeOpacity="0.25"/>
                </pattern>
              </defs>
              <rect width="100%" height="100%" fill={`url(#${uid})`}/>
            </svg>
            <div style={{position:'absolute',inset:0,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:16}}>
              <div style={{width:90,height:90,borderRadius:'50%',background:T.accent,opacity:.25}}></div>
              <div style={{fontSize:10,letterSpacing:'0.14em',color:T.muted,textTransform:'uppercase',fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:600}}>Photo of Tanika</div>
            </div>
          </div>
        </div>
        <div className={`reveal${v?' in':''}`} style={{transitionDelay:'0.15s',paddingTop:6}}>
          <SLabel num="04" text="About" theme={T}/>
          <h2 style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(28px,3.5vw,46px)',color:T.text,letterSpacing:'-0.025em',lineHeight:1.1,marginBottom:24}}>
            Designing with<br/><span className="hero-italic" style={{color:T.accent}}>purpose & play</span>
          </h2>
          <p style={{fontSize:16,lineHeight:1.82,color:T.muted,marginBottom:14,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>
            Creative Graphic Designer with 3+ years of experience designing visually engaging digital assets for brands across web and marketing platforms.
          </p>
          <p style={{fontSize:16,lineHeight:1.82,color:T.muted,marginBottom:36,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>
            Skilled in Adobe Illustrator, Canva, Figma, and modern design principles — with a strong focus on clean, impactful visuals that enhance brand identity and audience engagement.
          </p>
          <div className="grid-2">
            {[['📍 Location','India & Worldwide'],['💼 Experience','3+ Years'],['🌐 Languages','Hindi, English'],['✉️ Status','Open to work']].map(([k,val]) => (
              <div key={k} style={{padding:'14px 16px',background:T.bg,borderRadius:10,border:`1px solid ${T.border}`}}>
                <div style={{fontSize:11,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:600,letterSpacing:'0.04em',marginBottom:4}}>{k}</div>
                <div style={{fontSize:14,color:T.text,fontFamily:"'Syne',sans-serif",fontWeight:600}}>{val}</div>
              </div>
            ))}
          </div>
          <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
            <a href="https://www.linkedin.com/in/tanika-sharma-graphic-designer/" target="_blank" rel="noopener" className="btn-premium primary">
              LinkedIn <span className="icon-anim" style={{display:'inline-block'}}>↗</span>
            </a>
            <a href="https://wa.me/917341101677" target="_blank" rel="noopener" className="btn-premium dark-pill">
              WhatsApp
            </a>
            <a href="#" download className="btn-premium secondary">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
              Download CV
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Testimonials ─── */
function Testimonials({ theme }) {
  const T = theme;
  const [ref, v] = useInView();
  const data = typeof window !== 'undefined' && window.WP_TESTIMONIALS && window.WP_TESTIMONIALS.length > 0 ? window.WP_TESTIMONIALS : TESTIMONIALS;

  const [currentIndex, setCurrentIndex] = useState(0);
  const [itemsToShow, setItemsToShow] = useState(3);
  const [isHovered, setIsHovered] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 768) setItemsToShow(1);
      else if (window.innerWidth < 1024) setItemsToShow(2);
      else setItemsToShow(3);
    };
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const canSlide = data.length > itemsToShow;
  const maxIndex = Math.max(0, data.length - itemsToShow);

  useEffect(() => {
    if (!canSlide || isHovered) return;
    const timer = setInterval(() => {
      setCurrentIndex((prev) => (prev >= maxIndex ? 0 : prev + 1));
    }, 3500);
    return () => clearInterval(timer);
  }, [canSlide, maxIndex, isHovered]);

  // Handle manual navigation
  const nextSlide = () => setCurrentIndex(prev => (prev >= maxIndex ? 0 : prev + 1));
  const prevSlide = () => setCurrentIndex(prev => (prev <= 0 ? maxIndex : prev - 1));

  const gap = 18;
  const reduction = (gap * (itemsToShow - 1)) / itemsToShow;
  const itemWidthPercent = 100 / itemsToShow;

  return (
    <section 
      style={{padding:'var(--py) var(--px)', overflow: 'hidden'}}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div style={{maxWidth:1200,margin:'0 auto'}}>
        <div ref={ref} className={`reveal${v?' in':''}`}>
          <SLabel num="05" text="Testimonials" theme={T}/>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:48,flexWrap:'wrap',gap:20}}>
            <h2 style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(30px,4vw,52px)',color:T.text,letterSpacing:'-0.025em',margin:0}}>
              What clients say.
            </h2>
            {canSlide && (
              <div style={{display:'flex',gap:12}}>
                <button onClick={prevSlide} style={{width:44,height:44,borderRadius:'50%',border:`1px solid ${T.border}`,background:T.bgAlt,color:T.text,cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center',transition:'all 0.2s'}}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
                </button>
                <button onClick={nextSlide} style={{width:44,height:44,borderRadius:'50%',border:`1px solid ${T.border}`,background:T.bgAlt,color:T.text,cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center',transition:'all 0.2s'}}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
                </button>
              </div>
            )}
          </div>
        </div>
        
        <div style={{overflow:'hidden', padding:'10px 0'}}>
          <div style={{
            display:'flex',
            gap: gap,
            transition:'transform 0.6s cubic-bezier(0.22, 1, 0.36, 1)',
            transform: `translateX(calc(-${currentIndex} * (${itemWidthPercent}% - ${reduction}px + ${gap}px)))`
          }}>
            {data.map((t,i) => (
              <div key={t.name + i} className={`tcard reveal${v?' in':''}`}
                style={{
                  flex: `0 0 calc(${itemWidthPercent}% - ${reduction}px)`,
                  padding:'30px',background:T.bgAlt,border:`1px solid ${T.border}`,
                  transitionDelay:`${i*0.1}s`
                }}>
                <div style={{fontSize:44,fontFamily:'Georgia,serif',lineHeight:1,color:t.color,marginBottom:18,opacity:.75}}>"</div>
                <p style={{fontSize:15,lineHeight:1.78,color:T.text,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:400,marginBottom:28,fontStyle:'italic'}}>{t.text}</p>
                <div style={{display:'flex',alignItems:'center',gap:12,paddingTop:18,borderTop:`1px solid ${T.border}`}}>
                  {t.pic ? (
                    <img src={t.pic} alt={t.name} style={{width:40,height:40,borderRadius:'50%',objectFit:'cover',flexShrink:0}}/>
                  ) : (
                    <div style={{width:40,height:40,borderRadius:'50%',background:t.color,display:'flex',alignItems:'center',justifyContent:'center',fontSize:13,fontWeight:700,color:'#fff',fontFamily:"'Syne',sans-serif",flexShrink:0}}>{t.initials}</div>
                  )}
                  <div>
                    <div style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:13,color:T.text}}>{t.name}</div>
                    <div style={{fontSize:11,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif",marginTop:1}}>{t.role}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Single Post ─── */
function SinglePost({ theme }) {
  const T = theme;
  const post = (typeof window !== 'undefined' && window.WP_POST_DATA) ? window.WP_POST_DATA : null;

  // Reading progress bar
  const [progress, setProgress] = useState(0);
  // TOC: list of { id, text }
  const [toc, setToc] = useState([]);
  // Active TOC heading
  const [activeId, setActiveId] = useState('');
  // Mobile TOC open state
  const [tocOpen, setTocOpen] = useState(false);
  // Copied state for share
  const [copied, setCopied] = useState(false);

  const articleRef = useRef(null);

  // Reading progress
  useEffect(() => {
    const onScroll = () => {
      const el = document.documentElement;
      const scrolled = el.scrollTop || document.body.scrollTop;
      const total = el.scrollHeight - el.clientHeight;
      setProgress(total > 0 ? Math.min(100, (scrolled / total) * 100) : 0);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Build TOC from rendered H2s
  useEffect(() => {
    if (!articleRef.current) return;
    const headings = articleRef.current.querySelectorAll('h2');
    const items = [];
    headings.forEach((h, i) => {
      const slug = 'section-' + i + '-' + h.textContent.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
      h.id = slug;
      items.push({ id: slug, text: h.textContent.trim() });
    });
    setToc(items);
    if (items.length > 0) setActiveId(items[0].id);
  }, [post]);

  // IntersectionObserver to track active heading
  useEffect(() => {
    if (toc.length === 0) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach(e => { if (e.isIntersecting) setActiveId(e.target.id); });
      },
      { rootMargin: '-20% 0px -70% 0px', threshold: 0 }
    );
    toc.forEach(item => {
      const el = document.getElementById(item.id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, [toc]);

  const scrollToSection = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 90;
      window.scrollTo({ top: y, behavior: 'smooth' });
      setTocOpen(false);
    }
  };

  const copyLink = () => {
    navigator.clipboard.writeText(window.location.href).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  };

  useEffect(() => { window.scrollTo(0, 0); }, []);

  if (!post) {
    return (
      <div style={{minHeight:'100vh',display:'flex',alignItems:'center',justifyContent:'center',background:T.bg}}>
        <div style={{textAlign:'center'}}>
          <div style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:48,color:T.muted,marginBottom:16}}>404</div>
          <p style={{color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif",marginBottom:24}}>Post not found.</p>
          <a href="/blog/" style={{color:T.accent,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:600}}>← Back to Blog</a>
        </div>
      </div>
    );
  }

  const related = post.related || [];

  return (
    <div style={{minHeight:'100vh',background:T.bg,color:T.text}}>
      {/* Reading Progress Bar */}
      <div style={{position:'fixed',top:0,left:0,right:0,zIndex:500,height:3,background:T.border}}>
        <div style={{height:'100%',background:post.color,width:progress+'%',transition:'width 0.1s linear',borderRadius:'0 100px 100px 0'}}/>
      </div>

      {/* ── POST HEADER ── */}
      <div style={{paddingTop:120,paddingBottom:60,padding:'120px var(--px) 60px',maxWidth:1240,margin:'0 auto'}}>
        <div style={{maxWidth:760,margin:'0 auto'}}>
          {/* Back + Category */}
          <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:28,flexWrap:'wrap'}}>
            <a href="/blog/" style={{display:'inline-flex',alignItems:'center',gap:6,fontSize:13,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:500,textDecoration:'none',transition:'color 0.2s'}}>
              ← Journal
            </a>
            <span style={{color:T.border}}>·</span>
            <span style={{fontSize:11,fontWeight:700,letterSpacing:'0.14em',textTransform:'uppercase',color:post.color,fontFamily:"'Plus Jakarta Sans',sans-serif",padding:'4px 12px',borderRadius:100,background:post.color+'15'}}>
              {post.cat}
            </span>
          </div>

          {/* Title */}
          <h1 style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(26px,3.8vw,42px)',color:T.text,letterSpacing:'-0.03em',lineHeight:1.1,marginBottom: post.tldr ? 20 : 24}}>
            {post.title}
          </h1>

          {/* TLDR — shown only if set via the WP custom field */}
          {post.tldr && (
            <div style={{marginBottom:28,padding:'16px 20px',borderLeft:`3px solid ${post.color}`,background:post.color+'0D',borderRadius:'0 10px 10px 0'}}>
              <div style={{fontSize:10,fontWeight:700,letterSpacing:'0.14em',textTransform:'uppercase',color:post.color,fontFamily:"'Plus Jakarta Sans',sans-serif",marginBottom:6}}>TL;DR</div>
              <p style={{fontSize:16,color:T.text,lineHeight:1.65,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:400,margin:0}}>{post.tldr}</p>
            </div>
          )}


          {/* Meta row */}
          <div style={{display:'flex',alignItems:'center',gap:20,paddingTop:24,borderTop:`1px solid ${T.border}`,flexWrap:'wrap'}}>
            <div style={{display:'flex',alignItems:'center',gap:10}}>
              <div style={{width:36,height:36,borderRadius:'50%',background:post.color,display:'flex',alignItems:'center',justifyContent:'center'}}>
                <span style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:12,color:'#fff'}}>TS</span>
              </div>
              <div>
                <div style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:13,color:T.text}}>Tanika Sharma</div>
                <div style={{fontSize:11,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>Graphic Designer</div>
              </div>
            </div>
            <span style={{color:T.border}}>·</span>
            <span style={{fontSize:13,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>{post.date}</span>
            <span style={{color:T.border}}>·</span>
            <span style={{display:'flex',alignItems:'center',gap:5,fontSize:13,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
              {post.read}
            </span>
          </div>
        </div>
      </div>

      {/* ── FEATURED IMAGE ── */}
      {post.thumb && (
        <div style={{maxWidth:960,margin:'0 auto 60px',padding:'0 var(--px)'}}>
          <img src={post.thumb} alt={post.title} style={{width:'100%',height:'auto',maxHeight:500,objectFit:'cover',borderRadius:16,display:'block',border:`1px solid ${T.border}`}}/>
        </div>
      )}

      {/* ── MOBILE TOC ACCORDION ── */}
      {toc.length > 0 && (
        <div className="toc-mobile" style={{maxWidth:760,margin:'0 auto 40px',padding:'0 var(--px)'}}>
          <button onClick={() => setTocOpen(!tocOpen)}
            style={{width:'100%',display:'flex',justifyContent:'space-between',alignItems:'center',padding:'14px 20px',background:T.bgAlt,border:`1px solid ${T.border}`,borderRadius:10,cursor:'pointer',fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:600,fontSize:13,color:T.text}}>
            <span>📋 Table of Contents</span>
            <span style={{transform: tocOpen ? 'rotate(180deg)' : 'none', transition:'transform 0.2s', fontSize:10}}>▼</span>
          </button>
          {tocOpen && (
            <div style={{padding:'12px 0',border:`1px solid ${T.border}`,borderTop:'none',borderRadius:'0 0 10px 10px',background:T.bgAlt}}>
              {toc.map(item => (
                <button key={item.id} onClick={() => scrollToSection(item.id)}
                  style={{display:'block',width:'100%',textAlign:'left',padding:'10px 20px',background:'none',border:'none',cursor:'pointer',
                    fontFamily:"'Plus Jakarta Sans',sans-serif",fontSize:13,fontWeight:500,
                    color: activeId === item.id ? post.color : T.muted,
                    borderLeft: activeId === item.id ? `3px solid ${post.color}` : '3px solid transparent',
                    transition:'all 0.2s'}}>
                  {item.text}
                </button>
              ))}
            </div>
          )}
        </div>
      )}

      {/* ── TWO COLUMN: Article + Sticky TOC ── */}
      <div className="post-layout" style={{maxWidth:1200,margin:'0 auto',padding:'0 var(--px)',display:'grid',gridTemplateColumns: toc.length > 0 ? '1fr 280px' : '1fr',gap:60,alignItems:'start'}}>
        
        {/* Article Body */}
        <article style={{minWidth:0}}>
          <div ref={articleRef} className="post-content" style={{fontFamily:"'Plus Jakarta Sans',sans-serif",fontSize:17,lineHeight:1.85,color:T.text}}
            dangerouslySetInnerHTML={{__html: post.content}} />

          {/* Tags */}
          {post.tags && post.tags.length > 0 && (
            <div style={{marginTop:48,paddingTop:32,borderTop:`1px solid ${T.border}`}}>
              <div style={{display:'flex',gap:8,flexWrap:'wrap',alignItems:'center'}}>
                <span style={{fontSize:12,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:600,letterSpacing:'0.08em',textTransform:'uppercase',marginRight:4}}>Tags:</span>
                {post.tags.map(tag => (
                  <span key={tag} style={{fontSize:11,fontWeight:600,letterSpacing:'0.06em',textTransform:'uppercase',color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif",padding:'4px 12px',borderRadius:100,border:`1px solid ${T.border}`,background:T.bgAlt}}>
                    {tag}
                  </span>
                ))}
              </div>
            </div>
          )}

          {/* Share Row */}
          <div style={{marginTop:36,paddingTop:28,borderTop:`1px solid ${T.border}`,display:'flex',gap:10,flexWrap:'wrap',alignItems:'center'}}>
            <span style={{fontSize:12,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:600,letterSpacing:'0.08em',textTransform:'uppercase',marginRight:4}}>Share:</span>
            <a href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(post.title)}&url=${encodeURIComponent(post.url)}`} target="_blank" rel="noopener"
              style={{display:'inline-flex',alignItems:'center',gap:6,padding:'8px 16px',borderRadius:100,border:`1px solid ${T.border}`,background:T.bgAlt,fontSize:12,fontWeight:600,color:T.text,textDecoration:'none',fontFamily:"'Plus Jakarta Sans',sans-serif",transition:'all 0.2s'}}>
              𝕏 Twitter
            </a>
            <a href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(post.url)}`} target="_blank" rel="noopener"
              style={{display:'inline-flex',alignItems:'center',gap:6,padding:'8px 16px',borderRadius:100,border:`1px solid ${T.border}`,background:T.bgAlt,fontSize:12,fontWeight:600,color:T.text,textDecoration:'none',fontFamily:"'Plus Jakarta Sans',sans-serif",transition:'all 0.2s'}}>
              LinkedIn
            </a>
            <a href={`https://wa.me/?text=${encodeURIComponent(post.title + ' ' + post.url)}`} target="_blank" rel="noopener"
              style={{display:'inline-flex',alignItems:'center',gap:6,padding:'8px 16px',borderRadius:100,border:`1px solid ${T.border}`,background:T.bgAlt,fontSize:12,fontWeight:600,color:T.text,textDecoration:'none',fontFamily:"'Plus Jakarta Sans',sans-serif",transition:'all 0.2s'}}>
              WhatsApp
            </a>
            <button onClick={copyLink}
              style={{display:'inline-flex',alignItems:'center',gap:6,padding:'8px 16px',borderRadius:100,border:`1px solid ${copied ? post.color : T.border}`,background: copied ? post.color+'15' : T.bgAlt,fontSize:12,fontWeight:600,color: copied ? post.color : T.text,cursor:'pointer',fontFamily:"'Plus Jakarta Sans',sans-serif",transition:'all 0.2s'}}>
              {copied ? '✓ Copied!' : '🔗 Copy Link'}
            </button>
          </div>
        </article>

        {/* Sticky TOC Sidebar */}
        {toc.length > 0 && (
          <aside className="toc-desktop">
            <div style={{background:T.bgAlt,border:`1px solid ${T.border}`,borderRadius:14,padding:'24px 20px'}}>
              <div style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:11,letterSpacing:'0.16em',textTransform:'uppercase',color:T.muted,marginBottom:16}}>
                On This Page
              </div>
              <nav>
                {toc.map(item => (
                  <button key={item.id} onClick={() => scrollToSection(item.id)}
                    style={{display:'block',width:'100%',textAlign:'left',padding:'9px 12px',marginBottom:2,background:'none',border:'none',cursor:'pointer',
                      fontFamily:"'Plus Jakarta Sans',sans-serif",fontSize:13,fontWeight: activeId === item.id ? 600 : 400,lineHeight:1.4,
                      color: activeId === item.id ? post.color : T.muted,
                      borderLeft: activeId === item.id ? `2px solid ${post.color}` : '2px solid transparent',
                      borderRadius:'0 6px 6px 0',
                      background: activeId === item.id ? post.color+'10' : 'transparent',
                      transition:'all 0.2s'}}>
                    {item.text}
                  </button>
                ))}
              </nav>
              <div style={{marginTop:20,paddingTop:16,borderTop:`1px solid ${T.border}`}}>
                <div style={{height:3,background:T.border,borderRadius:100,overflow:'hidden'}}>
                  <div style={{height:'100%',background:post.color,width:progress+'%',transition:'width 0.2s',borderRadius:100}}/>
                </div>
                <div style={{fontSize:11,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif",marginTop:6,textAlign:'right'}}>
                  {Math.round(progress)}% read
                </div>
              </div>
            </div>
          </aside>
        )}
      </div>

      {/* ── CTA STRIP ── */}
      <div style={{margin:'80px auto 0',maxWidth:1200,padding:'0 var(--px)'}}>
        <div style={{background:T.text,borderRadius:18,padding:'48px 52px',display:'flex',alignItems:'center',justifyContent:'space-between',gap:28,flexWrap:'wrap'}}>
          <div>
            <div style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(22px,4vw,36px)',color:T.bg,letterSpacing:'-0.025em',lineHeight:1.1,marginBottom:10}}>
              Enjoyed this? Let's work together.
            </div>
            <p style={{fontSize:15,color:T.bg,opacity:.62,fontFamily:"'Plus Jakarta Sans',sans-serif",maxWidth:480,lineHeight:1.6}}>
              Tell me about your project and I'll get back to you within 24 hours.
            </p>
          </div>
          <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
            <a href="https://cal.com" target="_blank" rel="noopener" className="btn-premium primary cta-box-primary-btn">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
              Book a Free Call
            </a>
            <a href="/blog/" className="btn-premium secondary cta-box-alt-btn">
              ← More Posts
            </a>
          </div>
        </div>
      </div>

      {/* ── RELATED POSTS ── */}
      {related.length > 0 && (
        <div style={{maxWidth:1200,margin:'80px auto 0',padding:'0 var(--px) 80px'}}>
          <div style={{marginBottom:36}}>
            <div style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(24px,4vw,40px)',color:T.text,letterSpacing:'-0.025em'}}>
              More from the <span style={{color:post.color}}>Journal.</span>
            </div>
          </div>
          <div className="grid-3">
            {related.map((r, i) => (
              <a key={r.id} href={r.url} style={{textDecoration:'none'}} className="blog-card reveal in" style={{background:T.bgAlt,border:`1px solid ${T.border}`,borderRadius:14,overflow:'hidden',display:'block',transitionDelay:`${i*0.07}s`}}>
                {r.thumb && <img src={r.thumb} alt={r.title} style={{width:'100%',height:160,objectFit:'cover',display:'block'}}/>}
                {!r.thumb && <div style={{height:4,background:r.color}}/>}
                <div style={{padding:'20px 20px 24px'}}>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12}}>
                    <span style={{fontSize:10,fontWeight:700,letterSpacing:'0.14em',textTransform:'uppercase',color:r.color,fontFamily:"'Plus Jakarta Sans',sans-serif",padding:'3px 10px',borderRadius:100,background:r.color+'15'}}>{r.cat}</span>
                    <span style={{fontSize:11,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>{r.date}</span>
                  </div>
                  <h3 style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:16,color:T.text,lineHeight:1.35,marginBottom:10,letterSpacing:'-0.01em'}}>{r.title}</h3>
                  <div style={{fontSize:12,color:r.color,fontWeight:600,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>Read More →</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

/* ─── Blog Main Page ─── */
function BlogPage({ theme }) {
  const T = theme;
  const [filter, setFilter] = useState('All');
  
  // Use data from window or fallback to BLOG_POSTS
  const data = typeof window !== 'undefined' && window.WP_BLOG_POSTS && window.WP_BLOG_POSTS.length > 0 ? window.WP_BLOG_POSTS : BLOG_POSTS;
  const cats = ['All', ...new Set(data.map(p => p.cat))];
  const filtered = filter === 'All' ? data : data.filter(p => p.cat === filter);

  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return (
    <div style={{minHeight:'100vh', background:T.bg, color:T.text, paddingTop:140, paddingBottom:80}}>
      <div style={{maxWidth:1200, margin:'0 auto', padding:'0 var(--px)'}}>
        <div className="reveal in" style={{marginBottom:60}}>
          <h1 style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(42px,8vw,80px)',color:T.text,letterSpacing:'-0.04em',lineHeight:0.95,marginBottom:24}}>
            Ideas worth<br/><span style={{color:T.accent}}>sharing.</span>
          </h1>
          <p style={{fontSize:17,color:T.muted,maxWidth:500,lineHeight:1.65,fontFamily:"'Plus Jakarta Sans',sans-serif",marginBottom:44}}>
            Thoughts, insights, and behind-the-scenes looks into my design process, industry trends, and creative freelance life.
          </p>
          <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
            {cats.map(f => (
              <button key={f} onClick={() => setFilter(f)}
                style={{
                  background: filter === f ? T.accent : 'transparent',
                  color: filter === f ? '#fff' : T.muted,
                  border: `1px solid ${filter === f ? T.accent : T.border}`,
                  fontSize:12,fontWeight:600,letterSpacing:'0.04em',textTransform:'uppercase',
                  padding:'8px 18px',borderRadius:100,fontFamily:"'Plus Jakarta Sans',sans-serif",
                  cursor:'pointer', transition:'all 0.2s'
                }}>
                {f}
              </button>
            ))}
          </div>
        </div>

        <div className="grid-3">
          {filtered.map((post,i) => (
            <a key={post.id} href={post.url} className="blog-card reveal in"
              style={{background:T.bgAlt,border:`1px solid ${T.border}`,borderRadius:14,overflow:'hidden',textDecoration:'none',display:'block',transitionDelay:`${i*0.05}s`}}>
              <div style={{height:4,background:post.color}}></div>
              <div style={{padding:'24px 24px 28px'}}>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
                  <span style={{fontSize:10,fontWeight:700,letterSpacing:'0.14em',textTransform:'uppercase',color:post.color,fontFamily:"'Plus Jakarta Sans',sans-serif",padding:'3px 10px',borderRadius:100,background:post.color+'15'}}>{post.cat}</span>
                  <span style={{fontSize:11,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>{post.date}</span>
                </div>
                <h3 style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:18,color:T.text,lineHeight:1.3,marginBottom:14,letterSpacing:'-0.01em'}}>{post.title}</h3>
                <p style={{fontSize:13,color:T.muted,lineHeight:1.7,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:400,marginBottom:20}}>{post.summary}</p>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',paddingTop:16,borderTop:`1px solid ${T.border}`}}>
                  <span style={{fontSize:11,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>{post.read}</span>
                  <span style={{fontSize:13,color:post.color,fontWeight:600,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>Read More →</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ─── Blog ─── */
function Blog({ theme }) {
  const T = theme;
  const [ref, v] = useInView();
  return (
    <section id="blog" style={{padding:'var(--py) var(--px)',background:T.bgAlt,borderTop:`1px solid ${T.border}`,borderBottom:`1px solid ${T.border}`}}>
      <div style={{maxWidth:1200,margin:'0 auto'}}>
        <div ref={ref} className={`reveal${v?' in':''}`}>
          <SLabel num="06" text="Blog & Thoughts" theme={T}/>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:44,flexWrap:'wrap',gap:16}}>
            <h2 style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(30px,4vw,52px)',color:T.text,letterSpacing:'-0.025em',lineHeight:1.1}}>
              Ideas worth<br/><span style={{color:T.accent}}>sharing.</span>
            </h2>
            <a href="/blog/" style={{fontSize:13,color:T.accent,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:600,textDecoration:'none',borderBottom:`1px solid ${T.accent}`,paddingBottom:2}}>
              All Posts →
            </a>
          </div>
        </div>
        <div className="grid-3">
          {(typeof window !== 'undefined' && window.WP_BLOG_POSTS && window.WP_BLOG_POSTS.length > 0 ? window.WP_BLOG_POSTS : BLOG_POSTS).slice(0, 3).map((post,i) => (
            <a key={post.id} href={post.url} className={`blog-card reveal${v?' in':''}`}
              style={{background:T.bg,border:`1px solid ${T.border}`,textDecoration:'none',display:'block',transitionDelay:`${i*0.1}s`}}>
              {/* Color bar */}
              <div style={{height:4,background:post.color,borderRadius:'14px 14px 0 0'}}></div>
              <div style={{padding:'24px 24px 28px'}}>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
                  <span style={{fontSize:10,fontWeight:700,letterSpacing:'0.14em',textTransform:'uppercase',color:post.color,fontFamily:"'Plus Jakarta Sans',sans-serif",padding:'3px 10px',borderRadius:100,background:post.color+'15'}}>{post.cat}</span>
                  <span style={{fontSize:11,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>{post.date}</span>
                </div>
                <div style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:13,color:T.muted,letterSpacing:'0.04em',marginBottom:10}}>{post.num}</div>
                <h3 style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:18,color:T.text,lineHeight:1.3,marginBottom:14,letterSpacing:'-0.01em'}}>{post.title}</h3>
                <p style={{fontSize:13,color:T.muted,lineHeight:1.7,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:400,marginBottom:20}}>{post.summary}</p>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',paddingTop:16,borderTop:`1px solid ${T.border}`}}>
                  <span style={{fontSize:11,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>{post.read}</span>
                  <span style={{fontSize:13,color:post.color,fontWeight:600,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>Read More →</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Contact ─── */
function Contact({ theme }) {
  const T = theme;
  const [ref, v] = useInView();
  return (
    <section id="contact" style={{padding:'100px var(--px)'}}>
      <div style={{maxWidth:1000,margin:'0 auto',textAlign:'center'}}>
        <div ref={ref} className={`reveal${v?' in':''}`}>
          <SLabel num="09" text="Contact" theme={{...T, border:T.border}} />
          <h2 style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(36px,10vw,96px)',color:T.text,letterSpacing:'-0.04em',lineHeight:0.95,marginBottom:28}}>
            Let's make<br/>something<br/><span style={{color:T.accent}}>great.</span>
          </h2>
          <p style={{fontSize:17,color:T.muted,marginBottom:52,lineHeight:1.65,fontFamily:"'Plus Jakarta Sans',sans-serif",maxWidth:480,margin:'0 auto 52px'}}>
            Open for freelance projects, brand collaborations, and creative partnerships — working with clients across India and globally.
          </p>
          <div style={{display:'flex',gap:14,justifyContent:'center',flexWrap:'wrap'}}>
            <a href="https://cal.com" target="_blank" rel="noopener" className="btn-premium primary">
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
              Book a Free Consultation
            </a>
            <a href="https://www.linkedin.com/in/tanika-sharma-graphic-designer/" target="_blank" rel="noopener" className="btn-premium secondary">
              <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
              LinkedIn
            </a>
            <a href="https://wa.me/917341101677" target="_blank" rel="noopener" className="btn-premium dark-pill">
              <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
              WhatsApp
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Footer ─── */
function Footer({ theme }) {
  const T = theme;
  return (
    <footer className="footer-flex" style={{padding:'26px var(--px)',borderTop:`1px solid ${T.border}`,background:T.bgAlt}}>
      <div style={{display:'flex',alignItems:'center',gap:10}}>
        <div style={{width:28,height:28,borderRadius:'50%',background:T.accent,display:'flex',alignItems:'center',justifyContent:'center'}}>
          <span style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:10,color:'#fff'}}>TS</span>
        </div>
        <span style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:14,color:T.text}}>Tanika Sharma</span>
      </div>
      <span style={{fontSize:12,color:T.muted,fontFamily:"'Plus Jakarta Sans',sans-serif"}}>© {new Date().getFullYear()} · Graphic Designer · India & Worldwide</span>
      <a href="https://www.linkedin.com/in/tanika-sharma-graphic-designer/" target="_blank" rel="noopener"
        style={{fontSize:12,color:T.accent,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:600,textDecoration:'none'}}>LinkedIn ↗</a>
    </footer>
  );
}

/* ─── Hero Variations Test ─── */
function HeroVariationsTest({ theme }) {
  const T = theme;
  return (
    <div style={{background:T.bg, color:T.text, minHeight:'100vh'}}>
      <div style={{padding:'40px var(--px)', background:T.text, color:T.bg}}>
        <h1 style={{fontFamily:"'Syne',sans-serif", fontSize:32}}>Current Hero - Polished Variations</h1>
        <p style={{opacity:0.8}}>Refining the current live layout to be more attractive and minimal.</p>
        <a href="/" style={{color:T.bg, textDecoration:'underline', marginTop:20, display:'inline-block'}}>← Back to Live Site</a>
      </div>

      {/* Variation 1: Ultra-Clean Monochromatic */}
      <div style={{minHeight:'100vh', position:'relative', borderBottom:`2px solid ${T.border}`, padding:'100px var(--px) 60px', display:'flex', alignItems:'center'}}>
        <div style={{position:'absolute', top:20, left:44, fontSize:10, fontWeight:700, letterSpacing:'0.2em', color:T.muted, textTransform:'uppercase', fontFamily:"'Plus Jakarta Sans',sans-serif"}}>Variation 1: Ultra-Clean Monochromatic</div>
        <div style={{maxWidth:1240,margin:'0 auto',width:'100%',display:'grid',gridTemplateColumns:'1fr auto',gap:60,alignItems:'center'}}>
          <div>
            <div style={{display:'inline-flex',alignItems:'center',gap:8,padding:'6px 16px',borderRadius:100,background:'#f4f4f4',fontSize:12,color:'#000',marginBottom:32,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:600}}>
              <span style={{width:6,height:6,borderRadius:'50%',background:'#22C55E'}}></span>
              Available globally · Based in India
            </div>

            <h1 style={{fontFamily:"'Syne',sans-serif",fontSize:'clamp(60px,10vw,130px)',lineHeight:0.92,letterSpacing:'-0.04em',color:T.text,marginBottom:0}}>
              <span style={{fontWeight:800}}>TANIKA</span><br/>
              <span style={{fontWeight:300,letterSpacing:'-0.03em'}}>Sharma.</span>
            </h1>

            <div style={{display:'flex',alignItems:'center',gap:20,margin:'32px 0 20px',paddingTop:28}}>
              <div style={{fontFamily:"'Plus Jakarta Sans',sans-serif",fontSize:'clamp(14px,1.4vw,17px)',color:T.muted,lineHeight:1.65,maxWidth:460,fontWeight:400}}>
                <span style={{fontWeight:600, color:T.text}}>Graphic designer.</span> Crafting bold brand identities, expressive typography, and scroll-stopping visuals — 3+ years across India and beyond.
              </div>
            </div>

            <div style={{display:'flex',gap:16,flexWrap:'wrap',marginBottom:52}}>
              <a href="#" className="btn-premium primary">Book a Call <span className="icon-anim" style={{display:'inline-block'}}>→</span></a>
              <a href="#" className="btn-premium secondary">WhatsApp Me</a>
            </div>

            <div style={{display:'flex',gap:44}}>
              {[['3+','Years Experience'],['50+','Projects Delivered'],['30+','Happy Clients']].map(([n,l]) => (
                <div key={l}>
                  <div style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(24px,3.5vw,40px)',lineHeight:1,color:T.text}}>{n}</div>
                  <div style={{fontSize:11,color:T.muted,marginTop:5,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:600,letterSpacing:'0.02em'}}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{position:'relative',width:160,height:160,display:'flex',alignItems:'center',justifyContent:'center'}}>
            <div style={{position:'absolute',inset:0,border:`1px solid ${T.border}`,borderRadius:'50%',animation:'spin 10s linear infinite',borderStyle:'dashed'}}></div>
            <div style={{width:80,height:80,borderRadius:'50%',background:T.text,color:T.bg,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:24}}>TS</div>
          </div>
        </div>
      </div>

      {/* Variation 2: Negative Overlap & High Contrast */}
      <div style={{minHeight:'100vh', position:'relative', borderBottom:`2px solid ${T.border}`, padding:'100px var(--px) 60px', display:'flex', alignItems:'center'}}>
        <div style={{position:'absolute', top:20, left:44, fontSize:10, fontWeight:700, letterSpacing:'0.2em', color:T.muted, textTransform:'uppercase', fontFamily:"'Plus Jakarta Sans',sans-serif"}}>Variation 2: Typography Overlap & Accent Focus</div>
        <div style={{maxWidth:1240,margin:'0 auto',width:'100%',display:'grid',gridTemplateColumns:'1fr auto',gap:60,alignItems:'center'}}>
          <div>
            <div style={{display:'inline-flex',alignItems:'center',gap:8,fontSize:11,color:T.accent,marginBottom:20,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase'}}>
              <span style={{width:8,height:8,borderRadius:'50%',background:T.accent,animation:'pulse 2s infinite'}}></span>
              Available for new projects
            </div>

            <h1 style={{fontFamily:"'Syne',sans-serif",fontSize:'clamp(60px,10vw,130px)',lineHeight:0.8,letterSpacing:'-0.05em',color:T.text,marginBottom:0}}>
              <span style={{fontWeight:800}}>TANIKA</span><br/>
              <span style={{fontWeight:800,color:T.accent,marginLeft:'1em',display:'inline-block'}}>SHARMA</span>
            </h1>

            <div style={{margin:'40px 0 32px',maxWidth:420}}>
              <div style={{fontFamily:"'Plus Jakarta Sans',sans-serif",fontSize:'clamp(15px,1.5vw,18px)',color:T.muted,lineHeight:1.7,fontWeight:400}}>
                Graphic designer crafting bold brand identities and expressive typography.
              </div>
            </div>

            <div style={{display:'flex',gap:16,flexWrap:'wrap',marginBottom:52}}>
              <a href="#" className="btn-premium primary" style={{borderRadius:8}}>Book a Call</a>
            </div>

            <div style={{display:'flex',gap:44,paddingTop:32,borderTop:`2px solid ${T.text}`}}>
              {[['3+','Years'],['50+','Projects'],['30+','Clients']].map(([n,l]) => (
                <div key={l}>
                  <div style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(20px,3vw,32px)',lineHeight:1,color:T.text}}>{n}</div>
                  <div style={{fontSize:10,color:T.muted,marginTop:5,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:700,letterSpacing:'0.06em',textTransform:'uppercase'}}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{position:'relative',width:180,height:180,display:'flex',alignItems:'center',justifyContent:'center',background:T.bgAlt,borderRadius:'50%'}}>
             <span style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:56,color:T.accent}}>TS.</span>
          </div>
        </div>
      </div>

      {/* Variation 3: Soft Glassmorphism */}
      <div style={{minHeight:'100vh', position:'relative', padding:'100px var(--px) 60px', display:'flex', alignItems:'center', background:'#f8f9fa'}}>
        <div style={{position:'absolute', top:20, left:44, fontSize:10, fontWeight:700, letterSpacing:'0.2em', color:'#6c757d', textTransform:'uppercase', fontFamily:"'Plus Jakarta Sans',sans-serif"}}>Variation 3: Soft & Minimal Glass</div>
        
        {/* Soft background glow */}
        <div style={{position:'absolute',top:'20%',right:'20%',width:500,height:500,background:'#3366ff15',borderRadius:'50%',filter:'blur(80px)'}}></div>

        <div style={{maxWidth:1240,margin:'0 auto',width:'100%',display:'grid',gridTemplateColumns:'1fr auto',gap:60,alignItems:'center',position:'relative',zIndex:2}}>
          <div>
            <div style={{display:'inline-flex',alignItems:'center',gap:8,padding:'6px 14px',borderRadius:100,border:'1px solid rgba(0,0,0,0.05)',background:'rgba(255,255,255,0.6)',backdropFilter:'blur(10px)',fontSize:12,color:'#495057',marginBottom:32,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:500}}>
              <span style={{width:6,height:6,borderRadius:'50%',background:'#22C55E'}}></span>
              Based in India
            </div>

            <h1 style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(60px,10vw,130px)',lineHeight:0.95,letterSpacing:'-0.03em',color:'#212529',marginBottom:0}}>
              TANIKA<br/>
              <span style={{fontWeight:400,fontStyle:'italic',color:'#adb5bd'}}>Sharma.</span>
            </h1>

            <div style={{margin:'32px 0 40px',paddingTop:32,borderTop:'1px solid rgba(0,0,0,0.05)'}}>
              <div style={{fontFamily:"'Plus Jakarta Sans',sans-serif",fontSize:'clamp(15px,1.5vw,18px)',color:'#6c757d',lineHeight:1.65,maxWidth:460,fontWeight:400}}>
                Graphic designer crafting bold brand identities and scroll-stopping visuals.
              </div>
            </div>

            <div style={{display:'flex',gap:16,flexWrap:'wrap',marginBottom:52}}>
              <a href="#" className="btn-premium primary" style={{background:'#212529',boxShadow:'0 8px 24px rgba(33,37,41,0.2)'}}>Book a Call</a>
            </div>

            <div style={{display:'flex',gap:32}}>
              {[['3+','Years Experience'],['50+','Projects Delivered']].map(([n,l]) => (
                <div key={l} style={{padding:'16px 24px',background:'rgba(255,255,255,0.6)',backdropFilter:'blur(10px)',border:'1px solid rgba(0,0,0,0.05)',borderRadius:16}}>
                  <div style={{fontFamily:"'Syne',sans-serif",fontWeight:800,fontSize:'clamp(20px,3vw,32px)',lineHeight:1,color:'#212529'}}>{n}</div>
                  <div style={{fontSize:11,color:'#6c757d',marginTop:5,fontFamily:"'Plus Jakarta Sans',sans-serif",fontWeight:500}}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{position:'relative',width:200,height:200,display:'flex',alignItems:'center',justifyContent:'center',background:'rgba(255,255,255,0.4)',backdropFilter:'blur(20px)',border:'1px solid rgba(255,255,255,0.8)',borderRadius:'50%',boxShadow:'0 20px 40px rgba(0,0,0,0.05)'}}>
             <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#212529" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
          </div>
        </div>
      </div>

    </div>
  );
}

/* ─── App ─── */
function App({ initialPage = 'home' }) {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState(initialPage);

  useEffect(() => {
    // If we are on the home page and there's a hash, let browser scroll natively
    // We do NOT use hash routing for the blog page anymore, since it's a legit WP page.
    const handleHash = () => {
      // no-op for actual page routing
    };
    window.addEventListener('hashchange', handleHash);
    return () => window.removeEventListener('hashchange', handleHash);
  }, []);

  const isDark = tweaks.direction === 'dark';
  const accent = tweaks.accent || '#3366ff';

  const T = {
    bg:    isDark ? '#0A0A0A' : '#FAFAF8',
    bgAlt: isDark ? '#131313' : '#F1EDE6',
    text:  isDark ? '#EDEAE4' : '#0D0D0B',
    muted: isDark ? '#6E6B64' : '#6B6560',
    border:isDark ? '#222220' : '#E0DBD4',
    accent,
  };

  const isTest = typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('test') === 'hero';

  if (isTest) {
    return <HeroVariationsTest theme={T} />;
  }

  const isBlogPage = route === 'blog';
  const isSinglePost = route === 'single-post';

  return (
    <div style={{
      '--accent': T.accent,
      '--bg': T.bg,
      '--text': T.text,
      '--muted': T.muted,
      background:T.bg, color:T.text, minHeight:'100vh', fontFamily:"'Plus Jakarta Sans', sans-serif", width:'100%', overflowX:'clip'
    }}>
      <style>{`
        :root { --px: 44px; --py: 90px; }
        @media (max-width: 768px) { :root { --px: 20px; --py: 60px; } }
        .sec-pad { padding: var(--py) var(--px); }
        .btn-nav-cta { padding: 10px 20px !important; font-size: 12px !important; }
        @media (max-width: 480px) { .btn-nav-cta { padding: 8px 14px !important; font-size: 11px !important; width: auto !important; } }
        .tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
        @media (max-width: 480px) { .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
        .footer-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
        @media (max-width: 480px) { .footer-flex { justify-content: center; text-align: center; flex-direction: column; } }
        .nav-name { display: block; }
        @media (max-width: 380px) { .nav-name { display: none; } }
        .cs-header { display: flex; align-items: center; gap: 24px; flex: 1; min-width: 0; }
        @media (max-width: 768px) { .cs-header { gap: 12px; flex-wrap: wrap; } .cs-header-cat { display: none; } }
        /* TRUE Premium Button Redesign */
        a.btn-premium, button.btn-premium {
          display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
          padding: 16px 32px !important; border-radius: 100px !important; font-family: 'Plus Jakarta Sans', sans-serif !important;
          font-weight: 600 !important; font-size: 15px !important; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; 
          border: 1px solid transparent !important; text-decoration: none !important; cursor: pointer !important;
        }
        
        a.btn-premium.primary, button.btn-premium.primary { 
          background: var(--accent) !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(0,0,0,0.1) !important;
        }
        a.btn-premium.primary:hover, button.btn-premium.primary:hover {
          transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; opacity: 0.95 !important; color: #ffffff !important;
        }
        
        a.btn-premium.secondary, button.btn-premium.secondary { 
          background: transparent !important; color: var(--text) !important; border: 1px solid var(--border) !important; 
        }
        a.btn-premium.secondary:hover, button.btn-premium.secondary:hover { 
          background: var(--border) !important; transform: translateY(-2px) !important; color: var(--text) !important;
        }
        
        a.btn-premium.dark-pill, button.btn-premium.dark-pill { 
          background: var(--text) !important; color: var(--bg) !important; border: 1px solid transparent !important;
        }
        a.btn-premium.dark-pill:hover, button.btn-premium.dark-pill:hover {
          opacity: 0.85 !important; transform: translateY(-2px) !important; color: var(--bg) !important;
        }

        a.btn-premium.btn-nav-cta { padding: 10px 24px !important; font-size: 13px !important; border-radius: 100px !important; }
        
        @media (max-width: 480px) {
          a.btn-premium:not(.btn-nav-cta), button.btn-premium:not(.btn-nav-cta) { 
            width: 100% !important; padding: 14px 20px !important; font-size: 14px !important; justify-content: center !important;
          }
          a.btn-premium.btn-nav-cta { padding: 8px 18px !important; font-size: 12px !important; width: auto !important; }
        }

        /* Services CTA Box */
        .cta-box { padding: 50px 52px; border-radius: 18px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
        @media (max-width: 768px) { .cta-box { padding: 32px 24px; flex-direction: column; text-align: center; } .cta-box-btns { width: 100%; justify-content: center; } }
        
        #services a.btn-premium.cta-box-alt-btn { color: var(--bg) !important; border-color: rgba(255,255,255,0.3) !important; }
        #services a.btn-premium.cta-box-alt-btn:hover { background: rgba(255,255,255,0.2) !important; border-color: transparent !important; color: var(--bg) !important; }
        
        #services a.btn-premium.cta-box-primary-btn { background: var(--bg) !important; color: var(--text) !important; }
        #services a.btn-premium.cta-box-primary-btn:hover { opacity: 0.85 !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(255,255,255,0.15) !important; }

        /* Post Content Typography */
        .post-content h2 { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; font-size: clamp(20px, 3vw, 28px) !important; color: var(--text) !important; letter-spacing: -0.025em !important; line-height: 1.2 !important; margin: 44px 0 16px !important; }
        .post-content h3 { font-family: 'Syne', sans-serif !important; font-weight: 700 !important; font-size: clamp(17px, 2.5vw, 20px) !important; color: var(--text) !important; margin: 32px 0 12px !important; line-height: 1.3 !important; }
        .post-content p { margin-bottom: 22px !important; overflow-wrap: break-word !important; }
        .post-content a { color: var(--accent) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }
        .post-content ul, .post-content ol { margin: 0 0 22px 24px !important; overflow-wrap: break-word !important; }
        .post-content li { margin-bottom: 8px !important; }
        .post-content blockquote { border-left: 3px solid var(--accent) !important; margin: 32px 0 !important; padding: 16px 24px !important; background: var(--bgAlt, #F1EDE6) !important; border-radius: 0 8px 8px 0 !important; font-style: italic !important; color: var(--muted) !important; }
        .post-content img, .post-content figure, .post-content iframe, .post-content video { max-width: 100% !important; height: auto !important; border-radius: 10px !important; margin: 24px 0 !important; display: block !important; }
        .post-content figure { width: 100% !important; margin: 24px 0 !important; padding: 0 !important; }
        .post-content img { width: 100% !important; object-fit: cover !important; }
        .post-content code { font-family: 'Courier New', monospace !important; background: var(--border) !important; padding: 2px 6px !important; border-radius: 4px !important; font-size: 0.9em !important; word-break: break-all !important; }
        .post-content pre { background: #0D0D0B !important; color: #EDEAE4 !important; padding: 20px !important; border-radius: 10px !important; overflow-x: auto !important; margin: 24px 0 !important; max-width: 100% !important; }
        .post-content pre code { background: none !important; padding: 0 !important; word-break: normal !important; }
        .post-content strong { font-weight: 700 !important; color: var(--text) !important; }
        .post-content hr { border: none !important; border-top: 1px solid var(--border) !important; margin: 32px 0 !important; }
        .post-content * { max-width: 100% !important; box-sizing: border-box !important; }

        /* Nav optimizations */
        .back-text-short { display: none; }
        @media (max-width: 540px) {
          .nav-journal-label { display: none !important; }
          .back-text { display: none !important; }
          .back-text-short { display: inline !important; }
        }

        /* Post layout responsive */
        .post-layout { grid-template-columns: 1fr 280px !important; align-items: start !important; }
        .post-layout > aside { align-self: start !important; position: sticky !important; top: 80px !important; }
        @media (max-width: 1024px) { .post-layout { grid-template-columns: 1fr !important; gap: 0 !important; } }
        .toc-mobile { display: none !important; }
        @media (max-width: 1024px) { .toc-mobile { display: block !important; } .toc-desktop { display: none !important; } }
      `}</style>
      <Nav theme={T} isBlogPage={isBlogPage} />
      
      {isSinglePost ? (
        <SinglePost theme={T} />
      ) : isBlogPage ? (
        <BlogPage theme={T} />
      ) : (
        <>
          <Hero theme={T}/>
          <Marquee theme={T}/>
          <Work theme={T} numbered={tweaks.cardStyle === 'numbered'}/>
          <CaseStudies theme={T}/>
          <Tools theme={T}/>
          <About theme={T}/>
          <Testimonials theme={T}/>
          {tweaks.showBlog && <Blog theme={T}/>}
          <Services theme={T}/>
          <FAQ theme={T}/>
          <Contact theme={T}/>
        </>
      )}

      <Footer theme={T}/>

      <TweaksPanel>
        <TweakSection title="Direction">
          <TweakRadio id="direction" value={tweaks.direction} onChange={v => setTweak('direction',v)}
            options={[{value:'light',label:'Light'},{value:'dark',label:'Dark'}]}/>
        </TweakSection>
        <TweakSection title="Accent Color">
          <TweakColor id="accent" value={tweaks.accent} onChange={v => setTweak('accent',v)}/>
        </TweakSection>
        <TweakSection title="Blog Section">
          <TweakToggle id="showBlog" value={tweaks.showBlog} onChange={v => setTweak('showBlog',v)} label="Show blog posts"/>
        </TweakSection>
        <TweakSection title="Project Cards">
          <TweakRadio id="cardStyle" value={tweaks.cardStyle} onChange={v => setTweak('cardStyle',v)}
            options={[{value:'numbered',label:'Numbered'},{value:'clean',label:'Clean'}]}/>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

const rootEl = document.getElementById('root');
const initialPage = rootEl ? rootEl.getAttribute('data-page') || 'home' : 'home';
ReactDOM.createRoot(rootEl).render(<App initialPage={initialPage} />);