/* global React, Icon, BlogArt, ProductArt, fmtMXN */
// Pages: About, Blog, Contact

const { useState: useStateInfo, useEffect: useEffectInfo } = React;

// ============ ABOUT ============
function PageAbout({ navigate, accent }) {
  return (
    <>
      <section style={{padding:'80px 0', borderBottom:'1px solid var(--line)', position:'relative', overflow:'hidden'}}>
        <div className="wrap" style={{position:'relative'}}>
          <div className="eyebrow">El garage detrás de la marca</div>
          <h1 className="display" style={{fontSize:'clamp(60px, 10vw, 160px)', lineHeight:.85, margin:'14px 0 24px'}}>
            HECHO POR<br/>
            <span style={{color:accent||'#E60023'}}>RIDERS.</span><br/>
            PARA RIDERS.
          </h1>
          <p style={{fontSize:18, maxWidth:620, color:'var(--text-muted)'}}>
            BK MOTO nació en 2014 en un taller de Roma Norte. Hoy somos seis sucursales, catorce marcas oficiales y miles de pedidos al año — pero seguimos siendo, en esencia, el mismo grupo de tres locos que quería refacciones honestas y servicio que no insulte tu inteligencia.
          </p>
        </div>
      </section>

      {/* NUMBERS */}
      <section className="section">
        <div className="wrap">
          <div className="stats-row-4">
            {[
              { n:'12K+', l:'Riders activos' },
              { n:'6', l:'Sucursales' },
              { n:'14', l:'Marcas oficiales' },
              { n:'98%', l:'Satisfacción' },
            ].map((s,i)=>(
              <div key={i} style={{padding:'40px 32px', borderRight:i<3?'1px solid var(--line)':'0'}}>
                <div className="display" style={{fontSize:'clamp(48px, 6vw, 88px)', color:'var(--blood)', lineHeight:1}}>{s.n}</div>
                <div className="mono" style={{fontSize:11, marginTop:8, color:'var(--text-muted)'}}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* MANIFESTO */}
      <section className="section" style={{background:'var(--ink)', color:'var(--bone)'}}>
        <div className="wrap split-2" style={{gap:80, alignItems:'center'}}>
          <div>
            <div className="eyebrow" style={{color:'#ffffff80'}}>Manifiesto</div>
            <h2 className="display" style={{fontSize:'clamp(40px, 5vw, 64px)', lineHeight:.95, margin:'12px 0', color:'var(--bone)'}}>
              No vendemos cosas.<br/>
              Vendemos <span style={{color:accent||'#E60023'}}>kilómetros.</span>
            </h2>
          </div>
          <div style={{display:'grid', gap:18, fontSize:16, color:'#ffffffc0', lineHeight:1.7}}>
            <p>Cada casco que sale por la puerta es uno con el que alguien va a llegar a casa. Cada pastilla de freno es una emergencia que no va a pasar. Cada chamarra es una caída que no va a ser noticia.</p>
            <p>Por eso solo trabajamos con marcas que respetamos, productos que probamos en pista, y un equipo que rueda lo que vende. No hay reseña de un casco que no nos hayamos puesto. No hay refacción que no hayamos instalado.</p>
            <p style={{fontFamily:'var(--f-display)', fontSize:28, color:'var(--bone)', lineHeight:1.1, marginTop:14}}>"Si no rodaríamos con ello — no lo vendemos."</p>
            <p className="mono" style={{fontSize:11, color:'#ffffff60'}}>— DAVID KROLA, FUNDADOR</p>
          </div>
        </div>
      </section>

      {/* TIMELINE */}
      <section className="section">
        <div className="wrap">
          <div className="section-head"><div><div className="eyebrow">Línea de tiempo</div><h2>12 años en marcha</h2></div></div>
          <div className="timeline-grid">
            {[
              { y:'2014', t:'El primer taller', d:'En un local de Roma Norte. Tres personas. Una motocicleta de exposición — prestada.' },
              { y:'2017', t:'Primer ecommerce', d:'Lanzamos bkmoto.mx. El primer pedido — un casco a Tijuana — tardó una semana en salir.' },
              { y:'2020', t:'Tres sucursales', d:'Polanco, Satélite y Guadalajara. Más mecánicos que vendedores.' },
              { y:'2024', t:'Movilidad eléctrica', d:'Sumamos bicis eléctricas y scooters. Las dos ruedas son las dos ruedas.' },
            ].map((m,i)=>(
              <div key={i} style={{borderTop:'2px solid var(--blood)', paddingTop:20}}>
                <div className="display" style={{fontSize:48, lineHeight:1}}>{m.y}</div>
                <h3 className="display" style={{fontSize:18, textTransform:'uppercase', margin:'12px 0 6px'}}>{m.t}</h3>
                <p style={{fontSize:13, color:'var(--text-muted)', lineHeight:1.6}}>{m.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* VALUES */}
      <section className="section tight" style={{background:'var(--bg-2)'}}>
        <div className="wrap">
          <div className="grid-3" style={{gap:24}}>
            {[
              { icon:Icon.shield, t:'Productos verificados', d:'Cada SKU pasa por taller. Si no nos convence, no lo subimos al sitio.' },
              { icon:Icon.truck, t:'Envíos honestos', d:'Sin costos sorpresa, sin retrasos sin avisar. Si algo se atrasa, te llamamos.' },
              { icon:Icon.bolt, t:'Soporte que sabe', d:'Quien te contesta es un mecánico, no un guion. Asesoría real antes y después de comprar.' },
            ].map((v,i)=>(
              <div key={i} style={{padding:32, background:'var(--bg)', border:'1px solid var(--line)'}}>
                <span style={{color:'var(--blood)'}}>{v.icon({width:32, height:32})}</span>
                <h3 className="display" style={{fontSize:24, margin:'16px 0 8px'}}>{v.t}</h3>
                <p style={{fontSize:14, color:'var(--text-muted)'}}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TEAM */}
      <section className="section">
        <div className="wrap">
          <div className="section-head"><div><div className="eyebrow">El equipo</div><h2>Quién rueda</h2></div></div>
          <div className="grid-3">
            {[
              { n:'David Krola', r:'Founder · Tester', tag:'Mt-09 Tracer', y:'2014', helmetColor:'#E60023', jacketColor:'#0A0A0A' },
              { n:'Sofía Reyes', r:'Operaciones · Logística', tag:'Z400', y:'2017', helmetColor:'#0A0A0A', jacketColor:'#3A3A3A' },
              { n:'Iván Tovar', r:'Jefe de taller', tag:'Ducati Panigale', y:'2019', helmetColor:'#FFFFFF', jacketColor:'#7c2a1f' },
            ].map((p,i)=>(
              <div key={i}>
                <div style={{aspectRatio:'4/5', background:'var(--surface)', border:'1px solid var(--line)', position:'relative', overflow:'hidden'}}>
                  <svg viewBox="0 0 240 300" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
                    {/* background */}
                    <rect width="240" height="300" fill="var(--bg-2)"/>
                    <g stroke="var(--text)" strokeOpacity=".06" strokeWidth="1">
                      {[50,100,150,200,250].map(y=> <line key={y} x1="0" y1={y} x2="240" y2={y}/>)}
                      {[40,80,120,160,200].map(x=> <line key={x} y1="0" x1={x} y2="300" x2={x}/>)}
                    </g>
                    {/* enso accent in corner */}
                    <circle cx="200" cy="50" r="22" fill="none" stroke={accent||'#E60023'} strokeWidth="4" strokeDasharray="80 8" transform="rotate(-30 200 50)"/>

                    {/* rider silhouette — jacket/shoulders */}
                    <g transform="translate(0 80)">
                      {/* jacket body */}
                      <path d="M30 220 L40 130 Q50 110 80 100 L120 96 L160 100 Q190 110 200 130 L210 220 Z"
                            fill={p.jacketColor} stroke="var(--text)" strokeWidth="1.5"/>
                      {/* jacket collar/zipper */}
                      <path d="M105 110 L120 130 L135 110" fill="none" stroke="var(--bone)" strokeOpacity=".4" strokeWidth="1.5"/>
                      <line x1="120" y1="130" x2="120" y2="220" stroke="var(--bone)" strokeOpacity=".3" strokeWidth="1"/>
                      {/* shoulder seams */}
                      <path d="M55 130 Q75 115 90 110" fill="none" stroke="var(--bone)" strokeOpacity=".3" strokeWidth="1"/>
                      <path d="M185 130 Q165 115 150 110" fill="none" stroke="var(--bone)" strokeOpacity=".3" strokeWidth="1"/>

                      {/* HELMET */}
                      {/* outer shell */}
                      <path d="M55 50 Q55 0 120 0 Q185 0 185 50 L185 80 Q185 95 165 100 L75 100 Q55 95 55 80 Z"
                            fill={p.helmetColor} stroke="var(--text)" strokeWidth="2"/>
                      {/* visor */}
                      <path d="M70 42 Q70 22 120 22 Q170 22 170 42 L170 64 Q170 70 162 70 L78 70 Q70 70 70 64 Z"
                            fill="#1A1A1A" stroke="var(--text)" strokeWidth="1.5"/>
                      {/* visor reflection */}
                      <path d="M75 30 L100 28 L85 60 L75 58 Z" fill="#F4F1EA" fillOpacity=".18"/>
                      <path d="M150 30 L165 32 L160 60 L150 58 Z" fill="#F4F1EA" fillOpacity=".1"/>
                      {/* top vent */}
                      <rect x="110" y="6" width="20" height="6" fill="var(--text)" opacity=".3" rx="1"/>
                      {/* chin bar line */}
                      <path d="M70 75 L170 75" stroke="var(--text)" strokeOpacity=".25" strokeWidth="1"/>
                      {/* helmet edge highlight */}
                      <path d="M58 40 Q60 12 95 4" fill="none" stroke="var(--bone)" strokeOpacity={p.helmetColor==='#FFFFFF' ? '0' : '.25'} strokeWidth="1.5"/>
                      {/* brand stripe on helmet */}
                      <rect x="55" y="85" width="130" height="3" fill={accent||'#E60023'}/>
                    </g>

                    {/* index */}
                    <text x="14" y="22" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="var(--text)" opacity=".5" letterSpacing="1.5">RIDER · 0{i+1}</text>
                    <text x="120" y="285" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="var(--text)" opacity=".4" letterSpacing="2">SINCE {p.y} · {p.tag.toUpperCase()}</text>
                  </svg>
                </div>
                <div className="mt-16">
                  <h3 className="display" style={{fontSize:24, margin:0, textTransform:'uppercase'}}>{p.n}</h3>
                  <div className="mono" style={{fontSize:11, color:'var(--text-muted)', marginTop:4}}>{p.r}</div>
                  <div className="mono" style={{fontSize:11, marginTop:10, color:'var(--blood)'}}>● Rueda una {p.tag}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{background:'var(--ink)', color:'var(--bone)', padding:'80px 0'}}>
        <div className="wrap" style={{textAlign:'center'}}>
          <div className="eyebrow" style={{color:'#ffffff80'}}>Te esperamos</div>
          <h2 className="display" style={{fontSize:'clamp(48px, 6vw, 88px)', margin:'14px 0', color:'var(--bone)'}}>VEN AL <span style={{color:accent||'#E60023'}}>TALLER</span></h2>
          <p style={{color:'#ffffffa0', maxWidth:480, margin:'0 auto 32px'}}>Pasa a tu sucursal más cercana. Café gratis para riders. Asesoría sin compromiso.</p>
          <button className="btn primary lg" onClick={()=>navigate('contact')}>Ver sucursales →</button>
        </div>
      </section>
    </>
  );
}

// ============ BLOG ============
function PageBlog({ navigate, accent }) {
  const posts = window.BK_DATA.BLOG;
  const [filter, setFilter] = useStateInfo('Todos');
  const cats = ['Todos', ...new Set(posts.map(p=>p.cat))];
  const filtered = filter==='Todos' ? posts : posts.filter(p=>p.cat===filter);
  const featured = posts[0];
  const rest = filtered.filter(p=>p.id!==featured.id || filter!=='Todos');

  return (
    <>
      <section style={{padding:'60px 0 40px', borderBottom:'1px solid var(--line)'}}>
        <div className="wrap">
          <div className="eyebrow">Bitácora · BK MOTO</div>
          <h1 className="display" style={{fontSize:'clamp(60px, 9vw, 144px)', lineHeight:.9, margin:'14px 0'}}>
            BITÁCORA<br/>DE <span style={{color:accent||'#E60023'}}>RODADA</span>
          </h1>
          <p style={{fontSize:18, color:'var(--text-muted)', maxWidth:520}}>Técnica, rutas, taller. Lo que aprendimos por las malas para que tú no tengas que.</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="row mb-32" style={{gap:8, flexWrap:'wrap', marginBottom:32}}>
            {cats.map(c => (
              <button key={c} className={`chip ${filter===c?'on':''}`} onClick={()=>setFilter(c)}>{c}</button>
            ))}
          </div>

          {filter==='Todos' && (
            <article className="blog-hero-article" style={{marginBottom:60, alignItems:'center', cursor:'pointer'}}>
              <div style={{aspectRatio:'4/3', background:'var(--surface)', border:'1px solid var(--line)', position:'relative', overflow:'hidden'}}>
                <BlogArt seed={featured.id} accent={accent} image={featured.image}/>
                <span className="pcard-badge blood" style={{position:'absolute', top:16, left:16}}>DESTACADO</span>
              </div>
              <div>
                <div className="eyebrow">{featured.cat} · {featured.date} · {featured.read}</div>
                <h2 className="display" style={{fontSize:'clamp(36px, 4vw, 56px)', lineHeight:1, margin:'16px 0', textTransform:'none', letterSpacing:'-0.005em'}}>{featured.title}</h2>
                <p style={{fontSize:16, color:'var(--text-muted)', lineHeight:1.6}}>{featured.excerpt} Recopilamos los criterios que sí te van a importar a la hora de elegir, contados sin marketing y con números reales del taller.</p>
                <div className="row mt-24" style={{gap:14}}>
                  <div style={{width:40, height:40, borderRadius:'50%', background:'var(--bg-2)', display:'grid', placeItems:'center', fontFamily:'var(--f-mono)', fontSize:11}}>{featured.author.split(' ').map(n=>n[0]).join('')}</div>
                  <div>
                    <div style={{fontSize:13, fontWeight:500}}>{featured.author}</div>
                    <div className="mono" style={{fontSize:10, color:'var(--text-muted)'}}>JEFE DE TALLER</div>
                  </div>
                  <button className="btn ghost sm" style={{marginLeft:'auto'}}>Leer artículo →</button>
                </div>
              </div>
            </article>
          )}

          <div className="grid-3">
            {(filter==='Todos' ? rest.filter(p=>p.id!==featured.id) : filtered).map(post => (
              <article key={post.id} style={{cursor:'pointer'}}>
                <div style={{aspectRatio:'16/10', background:'var(--surface)', border:'1px solid var(--line)', position:'relative', overflow:'hidden'}}>
                  <BlogArt seed={post.id} accent={accent} image={post.image}/>
                  <span className="pcard-badge" style={{position:'absolute', top:12, left:12, background:'var(--ink)', color:'var(--bone)'}}>{post.cat}</span>
                </div>
                <div className="mt-16">
                  <div className="eyebrow">{post.date} · {post.read}</div>
                  <h3 className="display" style={{fontSize:24, lineHeight:1.1, margin:'8px 0', textTransform:'none', letterSpacing:'-0.005em'}}>{post.title}</h3>
                  <p style={{fontSize:14, color:'var(--text-muted)'}}>{post.excerpt}</p>
                  <div className="mono mt-16" style={{fontSize:11, color:'var(--blood)'}}>Leer artículo →</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

// ============ CONTACT ============
function PageContact({ navigate, accent }) {
  const stores = window.BK_DATA.STORES;
  const [active, setActive] = useStateInfo(0);
  const [sent, setSent] = useStateInfo(false);

  return (
    <>
      <section style={{padding:'60px 0 40px', borderBottom:'1px solid var(--line)'}}>
        <div className="wrap">
          <div className="eyebrow">Contacto · Sucursales</div>
          <h1 className="display" style={{fontSize:'clamp(56px, 8vw, 128px)', lineHeight:.9, margin:'14px 0'}}>
            VEN AL <span style={{color:accent||'#E60023'}}>TALLER.</span>
          </h1>
          <p style={{fontSize:18, color:'var(--text-muted)', maxWidth:520}}>6 sucursales en México. WhatsApp 24/7. Y si todo lo demás falla — la puerta siempre está abierta.</p>
        </div>
      </section>

      {/* MAP + STORE LIST */}
      <section className="section">
        <div className="wrap">
          <div className="contact-grid">
            <div style={{display:'grid', gap:8}}>
              {stores.map((s,i) => (
                <button key={i} onClick={()=>setActive(i)} style={{textAlign:'left', padding:20, border:`1px solid ${active===i?'var(--line-strong)':'var(--line)'}`, background: active===i?'var(--bg-2)':'transparent', cursor:'pointer', display:'grid', gap:6}}>
                  <div className="between">
                    <h3 className="display" style={{fontSize:22, margin:0}}>{s.name.replace('BK MOTO ','').toUpperCase()}</h3>
                    {active===i && <span className="mono" style={{fontSize:10, color:'var(--blood)'}}>● SELECCIONADO</span>}
                  </div>
                  <div className="row" style={{gap:8, fontSize:13, color:'var(--text-muted)'}}>{Icon.pin()} <span>{s.addr}</span></div>
                  <div className="row" style={{gap:14, fontSize:12}}>
                    <span className="row" style={{gap:6}}>{Icon.phone()} {s.tel}</span>
                    <span style={{color:'var(--ok)'}}>● Abierto · {s.hours}</span>
                  </div>
                </button>
              ))}
            </div>
            <div style={{aspectRatio:'4/3', background:'var(--bg-2)', border:'1px solid var(--line-strong)', position:'relative', overflow:'hidden'}}>
              <svg viewBox="0 0 100 80" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
                {/* fake mexico map silhouette */}
                <rect width="100" height="80" fill="var(--bg-2)"/>
                <g stroke="var(--text)" strokeOpacity=".08">
                  {Array.from({length:8}).map((_,i)=> <line key={i} x1="0" y1={i*10} x2="100" y2={i*10}/>)}
                  {Array.from({length:10}).map((_,i)=> <line key={i} y1="0" x1={i*10} y2="80" x2={i*10}/>)}
                </g>
                <path d="M5 35 Q10 28 18 26 L22 22 L30 18 L42 14 L58 12 L72 16 L82 22 L92 28 L94 36 L88 42 L82 48 L78 56 L70 62 L60 68 L52 70 L42 66 L32 60 L24 54 L18 48 L12 42 Z"
                  fill="var(--text)" fillOpacity=".08" stroke="var(--text)" strokeOpacity=".3" strokeWidth=".4"/>
                {stores.map((s,i)=>(
                  <g key={i} transform={`translate(${s.x} ${s.y})`} style={{cursor:'pointer'}} onClick={()=>setActive(i)}>
                    {active===i && <circle r="6" fill={accent||'#E60023'} opacity=".3"><animate attributeName="r" values="4;8;4" dur="2s" repeatCount="indefinite"/></circle>}
                    <circle r="2" fill={active===i ? accent||'#E60023' : 'var(--text)'}/>
                    <circle r="1" fill="var(--bg)"/>
                  </g>
                ))}
                <text x="50" y="78" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="2.2" fill="var(--text)" opacity=".5" letterSpacing=".3">MX · 6 SUCURSALES · CDMX → GDL → MTY</text>
              </svg>
              <div style={{position:'absolute', left:20, bottom:20, right:20, background:'var(--bg)', border:'1px solid var(--line-strong)', padding:16}}>
                <div className="eyebrow">Sucursal seleccionada</div>
                <div className="display" style={{fontSize:24, marginTop:4}}>{stores[active].name.toUpperCase()}</div>
                <div style={{fontSize:13, color:'var(--text-muted)', marginTop:6}}>{stores[active].addr}</div>
                <button className="btn primary sm mt-16">Cómo llegar →</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CONTACT FORM */}
      <section className="section" style={{background:'var(--bg-2)'}}>
        <div className="wrap">
          <div className="split-2" style={{gap:60}}>
            <div>
              <div className="eyebrow">¿Tienes un brete?</div>
              <h2 className="display" style={{fontSize:'clamp(36px, 4.5vw, 56px)', margin:'14px 0', lineHeight:.95}}>Escríbenos.<br/>Nosotros sí <span style={{color:'var(--blood)'}}>contestamos.</span></h2>
              <p style={{color:'var(--text-muted)', maxWidth:380}}>Soporte técnico, garantías, asesoría de compra, mayoreo. Lo respondemos un humano — normalmente en menos de 2 horas.</p>
              <div style={{display:'grid', gap:18, marginTop:32}}>
                <div className="row" style={{gap:14}}>{Icon.phone()} <span><strong>WhatsApp:</strong> +52 55 1234 0023</span></div>
                <div className="row" style={{gap:14}}>{Icon.mail()} <span><strong>Email:</strong> hola@bkmoto.mx</span></div>
                <div className="row" style={{gap:14}}>{Icon.pin()} <span><strong>Oficina central:</strong> Av. Álvaro Obregón 152, Roma Nte., CDMX</span></div>
              </div>
            </div>
            <form onSubmit={(e)=>{e.preventDefault(); setSent(true); setTimeout(()=>setSent(false), 4000);}} style={{padding:32, background:'var(--bg)', border:'1px solid var(--line-strong)', display:'grid', gap:16}}>
              <h3 className="display" style={{fontSize:28, margin:0}}>FORMULARIO</h3>
              <div className="grid-2">
                <div><label className="field-label">Nombre *</label><input className="field" required/></div>
                <div><label className="field-label">Email *</label><input className="field" type="email" required/></div>
              </div>
              <div><label className="field-label">Asunto</label>
                <select className="field"><option>Soporte de pedido</option><option>Asesoría de compra</option><option>Garantía / devolución</option><option>Mayoreo</option><option>Otro</option></select>
              </div>
              <div><label className="field-label">Mensaje *</label><textarea className="field" rows="5" required/></div>
              <button className="btn primary block lg" type="submit">{sent ? '✓ Mensaje enviado' : 'Enviar mensaje →'}</button>
              <div className="mono center" style={{fontSize:10, color:'var(--text-muted)'}}>Respuesta promedio: 2H · Soporte L–S</div>
            </form>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="wrap">
          <div className="section-head"><div><div className="eyebrow">Preguntas frecuentes</div><h2>Lo que más nos preguntan</h2></div></div>
          <div style={{display:'grid', gap:0, maxWidth:780}}>
            {[
              ['¿Cuánto tardan los envíos?', 'Pedidos en CDMX: 24h. Resto del país: 2–4 días hábiles con Estafeta, DHL o Paquetexpress. Express en 1–2 días por $349.'],
              ['¿Puedo cambiar la talla de un casco?', 'Sí. Tienes 30 días naturales con el producto sin uso, en su empaque original. El primer envío de cambio corre por nuestra cuenta.'],
              ['¿Manejan 12 MSI?', 'Sí, con la mayoría de tarjetas bancarias. También Kueski Pay para clientes sin tarjeta de crédito.'],
              ['¿Instalan refacciones?', 'En todas las sucursales tenemos taller. Pide cita por WhatsApp. Si compraste la pieza con nosotros, la mano de obra es a precio de costo.'],
              ['¿Las bicis y scooters tienen garantía?', 'Sí. 2 años por defectos de fabricación + 1 año de servicio gratuito en taller.'],
            ].map(([q,a],i) => <FAQItem key={i} q={q} a={a}/>)}
          </div>
        </div>
      </section>
    </>
  );
}

function FAQItem({ q, a }) {
  const [open, setOpen] = useStateInfo(false);
  return (
    <div style={{borderBottom:'1px solid var(--line)'}}>
      <button onClick={()=>setOpen(!open)} style={{width:'100%', padding:'24px 0', display:'flex', justifyContent:'space-between', alignItems:'center', textAlign:'left'}}>
        <span style={{fontFamily:'var(--f-display)', fontSize:22, textTransform:'uppercase'}}>{q}</span>
        <span style={{transform: open?'rotate(45deg)':'rotate(0)', transition:'transform .2s', fontSize:24, color:'var(--blood)'}}>+</span>
      </button>
      {open && <div style={{padding:'0 0 24px', fontSize:15, color:'var(--text-muted)', maxWidth:680, lineHeight:1.7}}>{a}</div>}
    </div>
  );
}

Object.assign(window, { PageAbout, PageBlog, PageContact });