// ── HOME PAGE ─────────────────────────────────────────
const { useState, useEffect } = React;

const API_BASE = 'https://metera-api.holovchanskyi.workers.dev';

function truncate(text, max = 160) {
  if (!text || text.length <= max) return text || '';
  const trimmed = text.slice(0, max);
  return trimmed.slice(0, trimmed.lastIndexOf(' ')) + '…';
}

function HomePage({ navigate, tweaks }) {
  const gold = tweaks.accentColor;

  // Hero entrance
  const [loaded, setLoaded] = useState(false);
  useEffect(() => { const t = setTimeout(() => setLoaded(true), 80); return () => clearTimeout(t); }, []);

  useReveal();

  const [approachHover, setApproachHover] = useState(null);
  const [activeStep, setActiveStep]       = useState(0);
  const [faqOpen, setFaqOpen]             = useState(null);
  const [blogHover, setBlogHover]         = useState(null);

  const approachCards = [
    { num:'01', title:'Systems & CRM', body:"A strong sales system starts with the right CRM. Let's build both and put your revenue on autopilot.",
      icon:<svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" width="34" height="34"><rect x="6" y="10" width="28" height="22" rx="2"/><path d="M14 10V8M20 10V8M26 10V8"/><path d="M6 18h28"/><circle cx="13" cy="25" r="2"/><path d="M20 24h8M20 27h5"/></svg> },
    { num:'02', title:'Lead Follow-Up', body:"Every warm lead is an opportunity. Let's make sure not one of them goes unanswered.",
      icon:<svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" width="34" height="34"><rect x="6" y="12" width="28" height="20" rx="2"/><path d="M6 12l14 11 14-11"/><circle cx="28" cy="13" r="5" fill={gold} stroke="none"/><path d="M28 11v2l1.5 1.5" stroke="var(--paper)" strokeWidth="1.2"/></svg> },
    { num:'03', title:'Right People, Right Seats', body:"The right people in the right seats drives everything. Let's make sure your team is built to win.",
      icon:<svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" width="34" height="34"><circle cx="16" cy="14" r="5"/><path d="M6 33c0-5.5 4.5-10 10-10s10 4.5 10 10"/><circle cx="30" cy="14" r="4"/><path d="M34 20c2 1 3.5 3.5 3.5 6"/></svg> },
    { num:'04', title:'Accountability', body:"Clear metrics change everything. Let's give you the visibility to see where you're winning and where to grow.",
      icon:<svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" width="34" height="34"><path d="M8 32V22M15 32V16M22 32V11M29 32V7"/><path d="M5 22l8-8 7 4 10-10"/><polyline points="26,7 32,7 32,13"/></svg> },
  ];

  const methodSteps = [
    { num:'01', title:'Listen First', body:'Before anything is built, we start by listening. We take the time to understand your business, your team, and the gaps that may be holding growth back.' },
    { num:'02', title:'Build the System', body:'We design and implement the right sales infrastructure for your business — including CRM, pipeline, follow-up, and process. Strategy becomes structure.' },
    { num:'03', title:'Drive the Results', body:'We work alongside you to execute, measure, and refine so revenue becomes more consistent, scalable, and predictable.' },
  ];

  const faqs = [
    { q:'What is Metera Collective?', a:'Metera Collective is a fractional sales development firm founded by Brenda Richey. We help founder-led businesses and small companies build structured sales systems, CRM processes, and AI-powered workflows that convert more leads and create predictable revenue growth.' },
    { q:'What does a fractional sales development firm do?', a:'A fractional sales development firm gives you access to experienced sales leadership without the cost of a full-time hire. At Metera Collective, we design and implement scalable sales systems, automate repetitive tasks using AI, and build processes that help your team consistently generate and convert leads.' },
    { q:'Who is Metera Collective for?', a:"Metera Collective is built for founder-led businesses, startups, and small teams that are ready to move beyond inconsistent sales. If you're looking to implement AI, streamline your CRM, and build a predictable revenue engine, Metera is designed for you." },
    { q:'How is Metera different from a sales coach or consultant?', a:"Unlike traditional sales coaches or consultants who focus on advice, Metera Collective focuses on execution. We don't just guide you — we build your sales infrastructure, implement AI tools, and create systems your team can actually use day-to-day." },
  ];

  const [blogs, setBlogs] = React.useState([]);
  React.useEffect(() => {
    fetch(`${API_BASE}/api/posts`)
      .then(r => r.json())
      .then(data => {
        if (!Array.isArray(data)) { setBlogs([]); return; }
        const featured = data.filter(p => p.featured === 1 || p.featured === true);
        const rest = data.filter(p => !(p.featured === 1 || p.featured === true));
        // Build list: featured posts first, then rest, capped at 4 total
        setBlogs([...featured, ...rest].slice(0, 4));
      })
      .catch(() => {});
  }, []);

  const A = (props) => (
    <button {...props} style={{ background:'none', border:'none', cursor:'pointer', padding:0, ...(props.style||{}) }} />
  );

  return (
    <div>
      {/* ── HERO ── */}
      <section style={{ position:'relative', overflow:'hidden', background:'var(--ink)', backgroundImage:"url('/assets/images/home/hero-banner.png')", backgroundSize:'cover', backgroundPosition:'center' }}>
        <div style={{ position:'absolute', inset:0, background:'linear-gradient(105deg,rgba(12,12,12,0.55) 0%,rgba(12,12,12,0.2) 55%,rgba(12,12,12,0.05) 100%)' }} />
        <div style={{ position:'absolute', left:0, top:'15%', bottom:'15%', width:'3px', background:`linear-gradient(to bottom,transparent,${gold},transparent)`, opacity: loaded ? 1 : 0, transition:'opacity 1.4s ease 0.6s' }} />

        <div style={{ maxWidth:'1280px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)', paddingTop:'140px', paddingBottom:'100px', position:'relative', zIndex:1, width:'100%' }}>
          <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-start', maxWidth:'900px', gap:'0' }}>
            <p className="t-eyebrow" style={{ color:gold, marginBottom:'22px', opacity:loaded?1:0, transition:'opacity 0.7s cubic-bezier(0.16,1,0.3,1) 0.2s' }}>Fractional Sales Leadership</p>
            <h1 style={{ fontFamily:'var(--serif)', fontSize:'clamp(28px,3vw,48px)', fontWeight:'300', lineHeight:1.15, letterSpacing:'-0.01em', color:'var(--paper)', marginBottom:'22px', opacity:loaded?1:0, transition:'opacity 0.8s cubic-bezier(0.16,1,0.3,1) 0.35s' }}>
              Built to Convert. <span style={{ color:gold }}>Designed to Scale.</span>
            </h1>
            <p className="t-subhead" style={{ color:'rgba(248,245,239,0.7)', maxWidth:'480px', marginBottom:'40px', opacity:loaded?1:0, transition:'opacity 0.8s cubic-bezier(0.16,1,0.3,1) 0.5s' }}>
              Fractional Sales Leadership Without the Full-Time Cost
            </p>
            <div style={{ display:'flex', gap:'14px', flexWrap:'wrap', opacity:loaded?1:0, transition:'opacity 0.8s cubic-bezier(0.16,1,0.3,1) 0.65s' }}>
              <button onClick={() => navigate('contact')} className="btn-gold">
                {tweaks.ctaLabel}
                <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="2" y1="7" x2="12" y2="7"/><polyline points="8,3 12,7 8,11"/></svg>
              </button>
              <button onClick={() => navigate('approach')} className="btn-ghost" style={{ color:'var(--paper)', borderColor:'rgba(248,245,239,0.35)' }}
                onMouseEnter={e=>{e.currentTarget.style.background='var(--paper)';e.currentTarget.style.color='var(--ink)';}}
                onMouseLeave={e=>{e.currentTarget.style.background='transparent';e.currentTarget.style.color='var(--paper)';}}>
                Our Approach
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ── STATS ── */}
      {tweaks.showStats && (
        <section style={{ background:'var(--ink)' }}>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', borderTop:'1px solid rgba(184,150,46,0.2)' }} className="stats-grid">
            {[
              { num:'18', label:'Years of Real-World Sales Experience' },
              { num:'$110M+', label:'In Closed Revenue' },
              { num:'AI-Powered', label:'Leading AI Tool Expertise' },
              { num:'9% → 32%', label:'Client Conversion Rate Increase in Under 6 Months' },
            ].map((s, i) => (
              <div key={i} className={`reveal reveal-delay-${i+1}`} style={{ padding:'clamp(28px,3.5vw,48px) clamp(16px,2.5vw,36px)', borderRight: i < 3 ? '1px solid rgba(184,150,46,0.12)' : 'none', textAlign:'center' }}>
                <div style={{ fontFamily:'var(--serif)', fontSize:'clamp(26px,3vw,44px)', fontWeight:'300', color:gold, lineHeight:1 }}>{s.num}</div>
                <div style={{ fontFamily:'var(--sans)', fontSize:'12px', fontWeight:'300', color:'rgba(248,245,239,0.55)', marginTop:'10px', lineHeight:1.5 }}>{s.label}</div>
              </div>
            ))}
          </div>
          <style>{`@media(max-width:600px){.stats-grid{grid-template-columns:repeat(2,1fr)!important;}}`}</style>
        </section>
      )}

      {/* ── APPROACH ── */}
      <section style={{ background:'var(--paper)', padding:'clamp(80px,10vw,140px) 0' }}>
        <div style={{ maxWidth:'1280px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)' }}>
          <div className="reveal" style={{ textAlign:'center', marginBottom:'clamp(48px,6vw,72px)' }}>
            <p className="t-eyebrow" style={{ color:gold, marginBottom:'14px' }}>What We Do</p>
            <h2 className="t-h2">Our Approach</h2>
            <div style={{ width:'44px', height:'1px', background:gold, margin:'22px auto 0' }} />
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))', gap:'2px', background:'var(--fog)' }}>
            {approachCards.map((c, i) => (
              <div key={i} className={`reveal reveal-delay-${i+1}`}
                onMouseEnter={() => setApproachHover(i)} onMouseLeave={() => setApproachHover(null)}
                style={{ background: approachHover===i ? 'var(--ink)' : 'var(--paper)', padding:'clamp(32px,4vw,48px) clamp(24px,3vw,36px)', transition:'background 0.35s cubic-bezier(0.16,1,0.3,1)', cursor:'default' }}>
                <div style={{ color:gold, marginBottom:'20px', transition:'color 0.3s' }}>{c.icon}</div>
                <p style={{ fontFamily:'var(--sans)', fontSize:'10px', fontWeight:'500', letterSpacing:'0.18em', textTransform:'uppercase', color: approachHover===i ? 'rgba(184,150,46,0.6)' : 'var(--taupe)', marginBottom:'10px' }}>{c.num}</p>
                <h3 className="t-h3" style={{ color: approachHover===i ? 'var(--paper)' : 'var(--ink)', marginBottom:'14px', transition:'color 0.3s' }}>{c.title}</h3>
                <p className="t-body" style={{ color: approachHover===i ? 'rgba(248,245,239,0.6)' : 'var(--ink-soft)', transition:'color 0.3s' }}>{c.body}</p>
              </div>
            ))}
          </div>
          <div className="reveal" style={{ textAlign:'center', marginTop:'44px' }}>
            <button onClick={() => navigate('approach')} className="btn-ghost">Explore Our Approach</button>
          </div>
        </div>
      </section>

      {/* ── BRAND STATEMENT ── */}
      {/* ── BRAND STATEMENT ── */}
      <section style={{ background:'var(--paper-warm)', padding:'clamp(64px,8vw,100px) 0' }}>
        <div style={{ maxWidth:'860px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)', textAlign:'center' }} className="reveal">
          <div style={{ width:'44px', height:'1px', background:gold, margin:'0 auto 32px' }} />
          <blockquote style={{ fontFamily:'var(--serif)', fontStyle:'italic', fontSize:'clamp(22px,2.8vw,36px)', fontWeight:'300', lineHeight:1.5, color:'var(--ink)' }}>
            "We are a fractional sales development firm built for startups and small companies looking to scale and grow — meeting every client exactly where they are."
          </blockquote>
          <div style={{ width:'44px', height:'1px', background:gold, margin:'32px auto 0' }} />
        </div>
      </section>

      {/* ── METHOD ── */}
      <section style={{ background:'var(--ink)', padding:'clamp(80px,10vw,140px) 0', position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', inset:0, backgroundImage:`radial-gradient(ellipse at 70% 50%,rgba(184,150,46,0.06) 0%,transparent 60%)`, pointerEvents:'none' }} />
        <div style={{ maxWidth:'1280px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)', position:'relative', zIndex:1 }}>
          <div className="reveal" style={{ marginBottom:'clamp(48px,6vw,72px)' }}>
            <p className="t-eyebrow" style={{ color:gold, marginBottom:'14px' }}>How We Work</p>
            <h2 className="t-h2" style={{ color:'var(--paper)', maxWidth:'500px' }}>Our Method</h2>
            <div style={{ width:'44px', height:'1px', background:gold, marginTop:'22px' }} />
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(40px,6vw,96px)', alignItems:'start' }} className="two-col">
            <div>
              {methodSteps.map((s, i) => (
                <div key={i} onClick={() => setActiveStep(i)} className={`reveal reveal-delay-${i+1}`}
                  style={{ padding:'clamp(24px,3vw,36px) 0', borderBottom: i < 2 ? '1px solid rgba(184,150,46,0.12)' : 'none', cursor:'pointer', display:'grid', gridTemplateColumns:'56px 1fr', gap:'20px', alignItems:'start', opacity: activeStep===i ? 1 : 0.45, transition:'opacity 0.25s' }}
                  onMouseEnter={e => { if(activeStep!==i) e.currentTarget.style.opacity='0.7'; }}
                  onMouseLeave={e => { e.currentTarget.style.opacity = activeStep===i ? '1' : '0.45'; }}>
                  <div style={{ fontFamily:'var(--serif)', fontSize:'40px', fontWeight:'300', color: activeStep===i ? gold : 'rgba(184,150,46,0.22)', lineHeight:1, transition:'color 0.3s' }}>{s.num}</div>
                  <div>
                    <h3 className="t-h3" style={{ color:'var(--paper)', marginBottom:'10px' }}>{s.title}</h3>
                    {activeStep===i && <div style={{ width:'28px', height:'1px', background:gold, marginTop:'16px' }} />}
                  </div>
                </div>
              ))}
              <div className="reveal" style={{ marginTop:'36px' }}>
                <button onClick={() => navigate('method')} className="btn-gold">Learn Our Method</button>
              </div>
            </div>

            <div className="reveal reveal-delay-2" style={{ position:'sticky', top:'100px' }}>
              <div style={{ position:'relative', background:'rgba(255,255,255,0.04)', border:'1px solid rgba(184,150,46,0.18)', padding:'clamp(28px,4vw,48px)', overflow:'hidden' }}>
                <div style={{ position:'absolute', top:'-20px', right:'-10px', fontFamily:'var(--serif)', fontSize:'160px', fontWeight:'300', color:'rgba(184,150,46,0.05)', lineHeight:1, userSelect:'none', pointerEvents:'none' }}>{methodSteps[activeStep].num}</div>
                <p className="t-eyebrow" style={{ color:gold, marginBottom:'18px' }}>Step {methodSteps[activeStep].num}</p>
                <h3 style={{ fontFamily:'var(--serif)', fontSize:'clamp(26px,3vw,38px)', fontWeight:'300', color:'var(--paper)', marginBottom:'20px', lineHeight:1.2 }}>{methodSteps[activeStep].title}</h3>
                <p className="t-body-lg" style={{ color:'rgba(248,245,239,0.68)', lineHeight:1.8 }}>{methodSteps[activeStep].body}</p>
                <div style={{ display:'flex', gap:'8px', marginTop:'36px' }}>
                  {methodSteps.map((_,i) => (
                    <div key={i} onClick={() => setActiveStep(i)} style={{ width: i===activeStep?'28px':'7px', height:'3px', background: i===activeStep?gold:'rgba(184,150,46,0.22)', transition:'width 0.3s cubic-bezier(0.16,1,0.3,1),background 0.3s', cursor:'pointer' }} />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── FOUNDER ── */}
      <section style={{ background:'var(--paper)', padding:'clamp(80px,10vw,140px) 0', overflow:'hidden' }}>
        <div style={{ maxWidth:'1280px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)' }}>
          <div style={{ display:'grid', gridTemplateColumns:'5fr 7fr', gap:'clamp(40px,6vw,96px)', alignItems:'center' }} className="two-col">
            <div className="reveal reveal-delay-1" style={{ position:'relative' }}>
              <img src="assets/images/about/Brenda-Richey.png" alt="Brenda Richey" style={{ width:'100%', display:'block', aspectRatio:'3/4', objectFit:'cover' }} onError={e => e.target.style.display='none'} />
              <div style={{ position:'absolute', bottom:'-16px', right:'-16px', width:'72px', height:'72px', border:`2px solid ${gold}`, zIndex:1 }} />
            </div>
            <div className="reveal">
              <p className="t-eyebrow" style={{ color:gold, marginBottom:'18px' }}>The Founder</p>
              <h2 className="t-h2" style={{ marginBottom:'20px' }}>Meet Brenda Richey</h2>
              <div style={{ width:'44px', height:'1px', background:gold, marginBottom:'28px' }} />
              <blockquote style={{ fontFamily:'var(--serif)', fontStyle:'italic', fontSize:'clamp(18px,2vw,26px)', fontWeight:'300', lineHeight:1.45, marginBottom:'28px', paddingLeft:'22px', borderLeft:`2px solid ${gold}` }}>
                "I have always been drawn to the builders — the founders who bet on themselves and refuse to quit."
              </blockquote>
              <p className="t-body" style={{ marginBottom:'18px' }}>With $110M+ in closed transactions and the founding of Southeastern Oklahoma's first luxury gated second-home community — 800 acres and $12M in first-year sales — Brenda Richey built Metera to give growing companies the sales leadership they deserve.</p>
              <p className="t-body" style={{ marginBottom:'32px' }}>Today, with AI as a co-pilot, Brenda brings senior-level strategy, proven systems, and hands-on execution to founders who are ready to scale.</p>
              <button onClick={() => navigate('brenda')} className="btn-primary">
                Read Brenda's Story
                <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="2" y1="7" x2="12" y2="7"/><polyline points="8,3 12,7 8,11"/></svg>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ── FAQ STRIP ── */}
      <section style={{ background:'var(--paper-warm)', padding:'clamp(80px,10vw,140px) 0' }}>
        <div style={{ maxWidth:'1280px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)' }}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 2fr', gap:'clamp(40px,6vw,96px)', alignItems:'start' }} className="two-col">
            <div className="reveal">
              <p className="t-eyebrow" style={{ color:gold, marginBottom:'18px' }}>Common Questions</p>
              <h2 className="t-h2" style={{ marginBottom:'20px' }}>Frequently Asked</h2>
              <div style={{ width:'44px', height:'1px', background:gold, marginBottom:'28px' }} />
              <p className="t-body" style={{ marginBottom:'32px' }}>Can't find what you're looking for? We'd love to talk.</p>
              <button onClick={() => navigate('faqs')} className="btn-ghost">See All FAQ</button>
            </div>
            <div className="reveal reveal-delay-1">
              {faqs.map((f, i) => (
                <div key={i} style={{ borderBottom:'1px solid var(--fog)' }}>
                  <button onClick={() => setFaqOpen(faqOpen===i ? null : i)} style={{ width:'100%', display:'flex', justifyContent:'space-between', alignItems:'center', gap:'16px', padding:'clamp(18px,2.5vw,26px) 0', background:'none', border:'none', cursor:'pointer', textAlign:'left' }} aria-expanded={faqOpen===i}>
                    <span style={{ fontFamily:'var(--serif)', fontSize:'clamp(16px,1.8vw,21px)', fontWeight:'400', color:'var(--ink)', lineHeight:1.3 }}>{f.q}</span>
                    <span style={{ flexShrink:0, width:'26px', height:'26px', border:`1px solid ${faqOpen===i?gold:'var(--fog)'}`, display:'flex', alignItems:'center', justifyContent:'center', color:faqOpen===i?gold:'var(--taupe)', transition:'border-color 0.2s,color 0.2s,transform 0.3s', transform:faqOpen===i?'rotate(45deg)':'none', fontSize:'17px', lineHeight:1 }}>+</span>
                  </button>
                  <div style={{ maxHeight:faqOpen===i?'260px':'0', overflow:'hidden', transition:'max-height 0.4s cubic-bezier(0.16,1,0.3,1)' }}>
                    <p className="t-body" style={{ paddingBottom:'22px', paddingRight:'44px', color:'var(--taupe)' }}>{f.a}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── BLOG STRIP ── */}
      <section style={{ background:'var(--paper)', padding:'clamp(80px,10vw,140px) 0' }}>
        {blogs.length > 0 && (
          <>
            <div style={{ maxWidth:'1280px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:'clamp(36px,5vw,60px)', flexWrap:'wrap', gap:'20px' }}>
                <div>
                  <p className="t-eyebrow" style={{ color:gold, marginBottom:'14px' }}>Insights & Strategy</p>
                  <h2 className="t-h2">Our Blog</h2>
                </div>
                <button onClick={() => navigate('blogs')} className="btn-ghost">View All Posts</button>
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'auto auto', gap:0 }} className="blog-grid">
                {/* Featured */}
                <div onMouseEnter={() => setBlogHover(0)} onMouseLeave={() => setBlogHover(null)} onClick={() => navigate('post/' + blogs[0].id)} style={{ gridRow:'1/3', gridColumn:'1/2', background:blogHover===0?'var(--ink)':'var(--paper)', transition:'background 0.35s cubic-bezier(0.16,1,0.3,1)', display:'flex', flexDirection:'column', minHeight:'400px', borderRight:'1px solid var(--fog)', border:'1px solid var(--fog)', cursor:'pointer', overflow:'hidden', position:'relative' }}>
                  {blogs[0].image_url && (
                    <div style={{ width:'100%', aspectRatio:'4/3', overflow:'hidden', flexShrink:0 }}>
                      <img src={blogs[0].image_url} alt={blogs[0].title} style={{ width:'100%', height:'100%', objectFit:'cover', objectPosition:'center', display:'block' }} />
                    </div>
                  )}
                  <div style={{ padding:'clamp(32px,4vw,48px)', display:'flex', flexDirection:'column', flex:1 }}>
                    {(blogs[0]?.featured === 1 || blogs[0]?.featured === true) && (
                      <span style={{ display:'inline-block', padding:'5px 11px', background:gold, color:'var(--paper)', fontFamily:'var(--sans)', fontSize:'10px', fontWeight:'500', letterSpacing:'0.14em', textTransform:'uppercase', marginBottom:'16px', width:'fit-content' }}>Featured</span>
                    )}
                    <div style={{ marginTop:'auto' }}>
                      <div style={{ display:'flex', flexWrap:'wrap', gap:'6px', marginBottom:'10px' }}>{blogs[0].tag && blogs[0].tag.split(',').map((t,i) => <span key={i} style={{ fontFamily:'var(--sans)', fontSize:'10px', fontWeight:'400', letterSpacing:'0.06em', color:blogHover===0?'rgba(248,245,239,0.4)':'var(--taupe)', transition:'color 0.3s' }}>#{t.trim()}</span>)}</div>
                      <h3 style={{ fontFamily:'var(--serif)', fontSize:'clamp(22px,2.5vw,30px)', fontWeight:'400', color:blogHover===0?'var(--paper)':'var(--ink)', lineHeight:1.25, marginBottom:'14px', transition:'color 0.3s' }}>{blogs[0].title}</h3>
                      <p className="t-body" style={{ color:blogHover===0?'rgba(248,245,239,0.58)':'var(--taupe)', marginBottom:'24px', transition:'color 0.3s' }}>{truncate(blogs[0]?.body)}</p>
                      <span style={{ background:'none', border:'none', cursor:'pointer', fontFamily:'var(--sans)', fontSize:'12px', fontWeight:'500', letterSpacing:'0.1em', textTransform:'uppercase', color:gold, display:'flex', alignItems:'center', gap:'8px', padding:0 }}>
                        Read Article <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="2" y1="7" x2="12" y2="7"/><polyline points="8,3 12,7 8,11"/></svg>
                      </span>
                    </div>
                  </div>
                </div>
                {/* Smaller posts */}
                {blogs.slice(1).map((b, i) => (
                  <div key={i} onMouseEnter={() => setBlogHover(i+1)} onMouseLeave={() => setBlogHover(null)} onClick={() => navigate('post/' + b.id)} style={{ background:blogHover===i+1?'var(--ink)':'var(--paper)', padding:'clamp(24px,3vw,36px)', transition:'background 0.35s cubic-bezier(0.16,1,0.3,1)', minHeight:'160px', display:'flex', flexDirection:'column', justifyContent:'space-between', cursor:'pointer', borderBottom: i < blogs.slice(1).length - 1 ? '1px solid var(--fog)' : 'none', border:'1px solid var(--fog)' }}>
                    <div>
                      <div style={{ display:'flex', flexWrap:'wrap', gap:'6px', marginBottom:'10px' }}>{b.tag && b.tag.split(',').map((t,i) => <span key={i} style={{ fontFamily:'var(--sans)', fontSize:'10px', fontWeight:'400', letterSpacing:'0.06em', color:blogHover===i+1?'rgba(248,245,239,0.4)':'var(--taupe)', transition:'color 0.3s' }}>#{t.trim()}</span>)}</div>
                      <h3 style={{ fontFamily:'var(--serif)', fontSize:'clamp(17px,1.7vw,21px)', fontWeight:'400', color:blogHover===i+1?'var(--paper)':'var(--ink)', lineHeight:1.3, transition:'color 0.3s' }}>{b.title}</h3>
                    </div>
                    <span style={{ fontFamily:'var(--sans)', fontSize:'11px', fontWeight:'500', letterSpacing:'0.1em', textTransform:'uppercase', color:gold, display:'flex', alignItems:'center', gap:'6px', marginTop:'14px' }}>
                      Read <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="2" y1="7" x2="12" y2="7"/><polyline points="8,3 12,7 8,11"/></svg>
                    </span>
                  </div>
                ))}
              </div>
            </div>
            <style>{`@media(max-width:640px){.blog-grid{grid-template-columns:1fr!important;} .blog-grid>div:first-child{grid-row:auto!important;grid-column:auto!important;}}`}</style>
          </>
        )}
      </section>

      {/* ── CTA ── */}
      <CTABand navigate={navigate} accentColor={gold} />
    </div>
  );
}

Object.assign(window, { HomePage });