// app.jsx — Site ALIAD main app
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "warm",
  "heroStyle": "collage",
  "density": "regular",
  "showTopBar": true
}/*EDITMODE-END*/;

// Palette presets — values applied as CSS vars
const PALETTES = {
  warm:    { paper:'#FFFCF5', paper2:'#F8F1E1', ink:'#1A1410', ink2:'#534538', ink3:'#8A7763',
             blue:'#1F5673', gold:'#E5B73B', terracotta:'#C25A30' },
  sober:   { paper:'#FFFFFF', paper2:'#F4F5F7', ink:'#0F1620', ink2:'#3D4754', ink3:'#7B8593',
             blue:'#0F3B52', gold:'#D9A02C', terracotta:'#B84A1F' },
  night:   { paper:'#0F2330', paper2:'#163040', ink:'#FBF6EC', ink2:'#D7CCB6', ink3:'#9E8E73',
             blue:'#5FA9CC', gold:'#E5B73B', terracotta:'#E07A4D' },
};

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES.warm;
  const r = document.documentElement;
  r.style.setProperty('--paper', p.paper);
  r.style.setProperty('--paper-2', p.paper2);
  r.style.setProperty('--ink', p.ink);
  r.style.setProperty('--ink-2', p.ink2);
  r.style.setProperty('--ink-3', p.ink3);
  r.style.setProperty('--blue', p.blue);
  r.style.setProperty('--gold', p.gold);
  r.style.setProperty('--terracotta', p.terracotta);
  r.style.setProperty('--line', `${p.ink}1f`);
  r.style.setProperty('--line-2', `${p.ink}0d`);
}

// ─── Top contact bar ─────────────────────────────────────────────────────
function TopBar() {
  return (
    <div style={{
      background:'var(--ink)', color:'var(--paper)',
      fontSize:13, padding:'9px 0', borderBottom:'1px solid var(--line)',
    }}>
      <div className="wrap topbar-wrap" style={{display:'flex', justifyContent:'space-between', alignItems:'center', gap:24, flexWrap:'wrap'}}>
        <div style={{display:'flex', gap:22, alignItems:'center', flexWrap:'wrap'}}>
          <span style={{display:'flex', alignItems:'center', gap:6, opacity:.95}}>
            <Icon name="pin" size={13} color="var(--gold)"/> 36 rue de la Liberté, 97213 Gros-Morne
          </span>
          <span style={{display:'flex', alignItems:'center', gap:6, opacity:.95}}>
            <Icon name="clock" size={13} color="var(--gold)"/> Lun–Ven · 8h–16h
          </span>
        </div>
        <div style={{display:'flex', gap:18, alignItems:'center'}}>
          <a href="tel:0596480512" style={{display:'flex', alignItems:'center', gap:6}}>
            <Icon name="phone" size={13} color="var(--gold)"/> 0596 48 05 12
          </a>
          <a href="mailto:aliadassociation@gmail.com" style={{display:'flex', alignItems:'center', gap:6, opacity:.85}}>
            <Icon name="mail" size={13} color="var(--gold)"/> aliadassociation@gmail.com
          </a>
        </div>
      </div>
    </div>
  );
}

// ─── Nav ─────────────────────────────────────────────────────────────────
function Nav() {
  const [open, setOpen] = useState(false);
  const links = [
    ['Nos services', '#services'],
    ['L\u2019association', '#mission'],
    ['Actualités', '#actu'],
    ['Le journal', '#journal'],
    ['Contact', '#contact'],
  ];
  return (
    <header style={{
      position:'sticky', top:0, zIndex:50,
      background:'color-mix(in srgb, var(--paper) 88%, transparent)',
      backdropFilter:'blur(14px) saturate(140%)',
      borderBottom:'1px solid var(--line-2)',
    }}>
      <div className="wrap nav-row" style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'18px 32px', position:'relative'}}>
        <a href="#top" onClick={()=>setOpen(false)}><Logo size={36}/></a>
        <nav className={`nav-links${open ? ' open' : ''}`} style={{display:'flex', gap:32, alignItems:'center'}}>
          {links.map(([label, href]) => (
            <a key={href} href={href} onClick={()=>setOpen(false)} style={{fontSize:15, fontWeight:500, color:'var(--ink-2)'}}>{label}</a>
          ))}
        </nav>
        <a href="#contact" className="nav-cta" style={{
          display:'inline-flex', alignItems:'center', gap:8,
          background:'var(--terracotta)', color:'#fff', padding:'11px 18px',
          borderRadius:99, fontWeight:600, fontSize:14,
        }}>
          Nous contacter <Icon name="arrow" size={14} color="#fff"/>
        </a>
        <button className="nav-burger" aria-label="Menu" onClick={()=>setOpen(o=>!o)}><span/></button>
      </div>
    </header>
  );
}

// ─── Hero ────────────────────────────────────────────────────────────────
function Hero({ style }) {
  return (
    <section id="top" className="section" style={{paddingTop:80, paddingBottom:60, position:'relative', overflow:'hidden'}}>
      {/* big background dots */}
      <div style={{position:'absolute', top:-60, right:-80, opacity:.6, pointerEvents:'none'}}>
        <DotsField color="var(--gold)" opacity={0.35} w={520} h={520}/>
      </div>
      <div className="wrap hero-grid" style={{display:'grid', gridTemplateColumns:'1.05fr 1fr', gap:64, alignItems:'center', position:'relative'}}>
        <div>
          <div className="eyebrow">Association loi 1901 · Martinique</div>
          <h1 className="serif hero-h" style={{
            fontSize:'clamp(56px, 7.5vw, 104px)', lineHeight: 0.98, marginTop: 18,
            letterSpacing:'-0.02em',
          }}>
            Au service de <span style={{color:'var(--terracotta)', fontStyle:'italic'}}>tous les âges</span><span></span>
          </h1>
          <p style={{fontSize: 19, color:'var(--ink-2)', maxWidth: 540, marginTop: 28, lineHeight:1.55}}>
            L'<b>ALIAD</b> accompagne au quotidien les <b>personnes âgées</b>, les <b>familles</b> et les <b>aidants</b> : aide à domicile,
            portage de repas, médiation familiale, ateliers de prévention et de bien-être.
          </p>
          <div style={{display:'flex', gap:14, marginTop:36, flexWrap:'wrap'}}>
            <a href="#services" style={btnPrimary}>Découvrir nos services <Icon name="arrow" size={15} color="#fff"/></a>
            <a href="tel:0596480512" style={btnGhost}>
              <Icon name="phone" size={15} color="var(--terracotta)"/> 0596 48 05 12
            </a>
          </div>

          <div className="hero-stats" style={{display:'flex', gap:36, marginTop:56, paddingTop:28, borderTop:'1px solid var(--line)'}}>
            <Stat n="20+" label="années d'engagement"/>
            <Stat n="2" label="pôles d'accompagnement"/>
            <Stat n="100%" label="loi 1901, non lucratif"/>
          </div>
        </div>

        <HeroVisual style={style}/>
      </div>
    </section>
  );
}

function Stat({ n, label }) {
  return (
    <div>
      <div className="serif" style={{fontSize:44, lineHeight:1, color:'var(--blue)'}}>{n}</div>
      <div style={{fontSize:13, color:'var(--ink-3)', marginTop:6, fontWeight:500}}>{label}</div>
    </div>
  );
}

function HeroVisual({ style }) {
  if (style === 'mark') {
    return (
      <div style={{position:'relative', aspectRatio:'1/1', display:'grid', placeItems:'center'}}>
        <div style={{position:'absolute', inset:0, background:'var(--paper-2)', borderRadius:'50%'}}/>
        <div style={{position:'relative', transform:'scale(2.4)'}}>
          <LogoMark size={140}/>
        </div>
      </div>
    );
  }
  if (style === 'single') {
    return (
      <div style={{position:'relative'}}>
        <PhotoSlot slotId="hero-single" kind="caregiver" tone="blue" ratio="4/5"
          label="Accompagnement à domicile" radius={24}/>
        <div style={{
          position:'absolute', bottom:-24, left:-24, background:'var(--paper)',
          padding:'18px 22px', borderRadius:18, boxShadow:'0 18px 40px -20px rgba(0,0,0,.25)',
          border:'1px solid var(--line)', display:'flex', alignItems:'center', gap:14, maxWidth:280,
        }}>
          <div style={{width:48, height:48, borderRadius:'50%', background:'var(--gold)', display:'grid', placeItems:'center'}}>
            <Icon name="home" size={26} color="var(--ink)"/>
          </div>
          <div>
            <div style={{fontSize:13, color:'var(--ink-3)', fontWeight:600, letterSpacing:'.08em', textTransform:'uppercase'}}>Pour les aînés</div>
            <div style={{fontSize:15, fontWeight:600}}>Rester chez soi, en sécurité.</div>
          </div>
        </div>
      </div>
    );
  }
  // collage (default)
  return (
    <div className="hero-collage" style={{
      display:'grid',
      gridTemplateColumns:'1.1fr 0.9fr',
      gridTemplateRows:'1.1fr 0.9fr',
      gap:14, aspectRatio:'1/1.05', position:'relative',
    }}>
      <PhotoSlot slotId="hero-elder" kind="elder-woman" tone="blue" ratio="auto"
        label="Aide à domicile" radius={24}
        style={{ gridRow:'1 / span 2' }}/>
      <PhotoSlot slotId="hero-family" kind="grandma-child" tone="gold" ratio="auto"
        label="Familles" radius={20}/>
      <PhotoSlot slotId="hero-meal" kind="elder-man" tone="terracotta" ratio="auto"
        label="Portage de repas" radius={20}/>
      <div style={{
        position:'absolute', top:'42%', left:'-8%', transform:'translateY(-50%)',
        background:'var(--paper)', borderRadius:'50%', padding:18, border:'1px solid var(--line)',
        boxShadow:'0 14px 36px -18px rgba(0,0,0,.25)',
      }}>
        <LogoMark size={64}/>
      </div>
    </div>
  );
}

const btnPrimary = {
  display:'inline-flex', alignItems:'center', gap:10,
  background:'var(--ink)', color:'#fff', padding:'15px 22px',
  borderRadius:99, fontWeight:600, fontSize:15,
};
const btnGhost = {
  display:'inline-flex', alignItems:'center', gap:10,
  background:'transparent', color:'var(--ink)', padding:'14px 21px',
  borderRadius:99, fontWeight:600, fontSize:15, border:'1px solid var(--line)',
};

// ─── Services ────────────────────────────────────────────────────────────
function Services() {
  const cards = [
    { tone:'blue',       icon:'home',       eyebrow:'Personnes âgées', title:'Aide au maintien à domicile', desc:'Accompagnement pour les gestes du quotidien — préparation des repas, courses, entretien, soutien moral — afin de rester chez soi avec sérénité.' },
    { tone:'terracotta', icon:'meal',       eyebrow:'Service repas', title:'Portage de repas à domicile', desc:'Des repas équilibrés livrés chaque jour, adaptés aux régimes alimentaires et aux goûts locaux.' },
    { tone:'gold',       icon:'mediation',  eyebrow:'Familles', title:'Médiation familiale', desc:'Espace d\u2019écoute neutre pour renouer le dialogue, prévenir et résoudre les conflits familiaux.' },
    { tone:'paper',      icon:'family',     eyebrow:'Parentalité', title:'Soutien à la parentalité', desc:'Groupes d\u2019échange, soutien psychologique et ateliers ados pour accompagner les familles.' },
    { tone:'gold',       icon:'wellbeing',  eyebrow:'Prévention', title:'Bien-être & prévention', desc:'Ateliers de prévention santé, activité physique adaptée et bien-être pour les aînés.' },
    { tone:'blue',       icon:'youth',      eyebrow:'Jeunesse', title:'Insertion & accompagnement', desc:'Accompagnement à l\u2019insertion sociale et professionnelle, ateliers d\u2019orientation pour les jeunes.' },
  ];
  return (
    <section id="services" className="section" style={{background:'var(--paper-2)'}}>
      <div className="wrap">
        <div className="services-head" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:60, alignItems:'end', marginBottom:64}}>
          <div>
            <div className="eyebrow">Nos services</div>
            <h2 className="serif" style={{fontSize:'clamp(40px, 5vw, 68px)', lineHeight:1.02, marginTop:14}}>
              Six manières d'<span style={{fontStyle:'italic', color:'var(--terracotta)'}}>être présents</span>,
              à chaque étape de la vie.
            </h2>
          </div>
          <p style={{color:'var(--ink-2)', fontSize:17, maxWidth:480, justifySelf:'end'}}>
            Du nouveau-né accompagné en famille à l'aîné qui souhaite rester chez lui : nos équipes interviennent
            sur l'ensemble du Nord-Atlantique de la Martinique.
          </p>
        </div>

        <div className="services-grid" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
          {cards.map((c, i) => <ServiceCard key={i} {...c} idx={i+1}/>)}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ tone, icon, eyebrow, title, desc, idx }) {
  const accents = { blue:'var(--blue)', gold:'var(--gold)', terracotta:'var(--terracotta)', paper:'var(--ink-2)' };
  const accent = accents[tone];
  return (
    <article style={{
      background:'var(--paper)', border:'1px solid var(--line)',
      borderRadius:'var(--radius)', padding:'28px 26px 30px',
      display:'flex', flexDirection:'column', gap:18, position:'relative',
      transition:'transform .25s ease, box-shadow .25s ease',
    }}
    onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-4px)';e.currentTarget.style.boxShadow='0 24px 50px -30px rgba(0,0,0,.25)'}}
    onMouseLeave={e=>{e.currentTarget.style.transform='';e.currentTarget.style.boxShadow=''}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
        <div style={{
          width:60, height:60, borderRadius:16,
          background:`color-mix(in srgb, ${accent} 18%, transparent)`,
          display:'grid', placeItems:'center', color:accent,
        }}>
          <Icon name={icon} size={32} color={accent}/>
        </div>
        <span className="serif" style={{fontSize:24, color:'var(--ink-3)', opacity:.5}}>0{idx}</span>
      </div>
      <div>
        <div style={{fontSize:11, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', color:accent, marginBottom:8}}>{eyebrow}</div>
        <h3 className="serif" style={{fontSize:26, lineHeight:1.1, marginBottom:10}}>{title}</h3>
        <p style={{fontSize:15, color:'var(--ink-2)', lineHeight:1.55}}>{desc}</p>
      </div>
      <a href="#contact" style={{
        marginTop:'auto', display:'inline-flex', alignItems:'center', gap:8,
        fontSize:14, fontWeight:600, color:'var(--ink)',
      }}>
        En savoir plus <Icon name="arrow" size={14} color="var(--ink)"/>
      </a>
    </article>
  );
}

// ─── Mission ─────────────────────────────────────────────────────────────
function Mission() {
  return (
    <section id="mission" className="section">
      <div className="wrap mission-grid" style={{display:'grid', gridTemplateColumns:'0.9fr 1.1fr', gap:80, alignItems:'center'}}>
        <div style={{position:'relative'}}>
          <PhotoSlot slotId="mission-team" kind="caregiver" tone="terracotta" ratio="4/5"
            label="L'équipe ALIAD" radius={24}/>
          <div className="mission-quote" style={{
            position:'absolute', right:-30, bottom:-30, background:'var(--blue)', color:'var(--paper)',
            padding:'22px 26px', borderRadius:18, maxWidth:260,
            boxShadow:'0 24px 50px -28px rgba(0,0,0,.4)',
          }}>
            <div className="serif" style={{fontSize:42, lineHeight:1, color:'var(--gold)'}}>“</div>
            <p style={{fontSize:14, marginTop:-12, lineHeight:1.5}}>
              Être au service de tous les âges, c'est tisser des liens entre les générations &mdash; et redonner
              du temps, de l'écoute, de la dignité.
            </p>
            <div style={{fontSize:12, marginTop:14, opacity:.8, fontWeight:600}}>— L'équipe de l'ALIAD</div>
          </div>
        </div>

        <div>
          <div className="eyebrow">Notre mission</div>
          <h2 className="serif" style={{fontSize:'clamp(36px, 4.5vw, 60px)', lineHeight:1.04, marginTop:14}}>
            Une association loi 1901 ancrée dans le Nord de la Martinique.
          </h2>
          <p style={{color:'var(--ink-2)', fontSize:17, marginTop:24, lineHeight:1.65}}>
            L'<b>Association pour l'Accompagnement à l'Insertion et l'Aide à Domicile</b> intervient depuis Gros-Morne
            pour soutenir au quotidien <b>les personnes âgées</b>, <b>les familles</b> et <b>les aidants</b>. Notre approche
            combine écoute, respect et solidarité, avec l'engagement de salariés formés et de bénévoles investis.
          </p>
          <div className="mission-values" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, marginTop:36}}>
            <ValueBullet n="01" title="Écoute" body="Comprendre les besoins de chaque personne avant tout."/>
            <ValueBullet n="02" title="Respect" body="Respecter le rythme, l\u2019histoire et le choix de chacun."/>
            <ValueBullet n="03" title="Proximité" body="Une équipe locale, présente sur tout le Nord-Atlantique."/>
            <ValueBullet n="04" title="Solidarité" body="Un engagement collectif, sans but lucratif."/>
          </div>
        </div>
      </div>
    </section>
  );
}

function ValueBullet({ n, title, body }) {
  return (
    <div style={{borderTop:'1px solid var(--line)', paddingTop:14}}>
      <div style={{display:'flex', alignItems:'baseline', gap:10}}>
        <span className="serif" style={{fontSize:18, color:'var(--terracotta)'}}>{n}</span>
        <h4 style={{fontSize:17, fontWeight:600}}>{title}</h4>
      </div>
      <p style={{fontSize:14, color:'var(--ink-2)', marginTop:6, lineHeight:1.5}}>{body}</p>
    </div>
  );
}

// ─── Actualités (Instagram) ──────────────────────────────────────────────
function Actualites() {
  const posts = [
    { slotId:'ig-1', kind:'elder-woman',    caption:'Atelier prévention chutes — un moment riche avec nos aînés.',         date:'12 mai 2026',  postType:'photo' },
    { slotId:'ig-2', kind:'elder-man',      caption:'Portage de repas : nos équipes sur le terrain ce matin.',             date:'5 mai 2026',   postType:'photo' },
    { slotId:'ig-3', kind:'ateliers',       caption:'Groupe de parole parents-ados : on se retrouve mercredi prochain.',   date:'28 avr. 2026', postType:'photo' },
    { slotId:'ig-4', kind:'family',         caption:'Journée porte ouverte au siège de Gros-Morne, merci à tous !',        date:'15 avr. 2026', postType:'video' },
    { slotId:'ig-5', kind:'grandma-child',  caption:'Atelier mémoire & bien-être avec Mme Joseph.',                        date:'2 avr. 2026',  postType:'photo' },
    { slotId:'ig-6', kind:'caregiver',      caption:'Médiation familiale : pourquoi en parler ? Notre brochure est en ligne.', date:'24 mars 2026', postType:'photo' },
  ];
  return (
    <section id="actu" className="section" style={{background:'var(--paper-2)'}}>
      <div className="wrap">
        <div className="actu-header" style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap:24, marginBottom:48}}>
          <div>
            <div className="eyebrow">Actualités</div>
            <h2 className="serif" style={{fontSize:'clamp(36px, 4.5vw, 60px)', lineHeight:1.04, marginTop:14}}>
              La vie de l'association,<br/>
              <span style={{fontStyle:'italic', color:'var(--terracotta)'}}>au jour le jour.</span>
            </h2>
          </div>
          <a href="https://www.instagram.com/aliadassociation" target="_blank" rel="noreferrer" style={{
            display:'inline-flex', alignItems:'center', gap:10, padding:'13px 20px',
            background:'var(--ink)', color:'var(--paper)', borderRadius:99, fontWeight:600, fontSize:14,
          }}>
            <Icon name="insta" size={16} color="var(--paper)"/> @aliadassociation
          </a>
        </div>

        <div className="actu-grid" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
          {posts.map((p, i) => <InstaTile key={i} {...p}/>)}
        </div>
      </div>
    </section>
  );
}

// ─── Journal (Instagram reel) ────────────────────────────────────────────
function Journal() {
  return (
    <section id="journal" className="section">
      <div className="wrap journal-grid" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:60, alignItems:'center'}}>
        <div>
          <div className="eyebrow">Le journal de l'ALIAD</div>
          <h2 className="serif" style={{fontSize:'clamp(36px, 4.5vw, 60px)', lineHeight:1.04, marginTop:14}}>
            Un aperçu en vidéo<br/>de nos actions sur le terrain.
          </h2>
          <p style={{color:'var(--ink-2)', fontSize:17, marginTop:22, lineHeight:1.6}}>
            Découvrez en images le quotidien de nos équipes, la parole de nos bénéficiaires
            et les missions concrètes que mène l'ALIAD au cœur du territoire martiniquais.
          </p>
          <div style={{display:'flex', gap:14, marginTop:28, flexWrap:'wrap'}}>
            <a href="https://www.instagram.com/reel/DYC2O1Pp7bd/" target="_blank" rel="noreferrer" style={btnPrimary}>
              Voir sur Instagram <Icon name="arrow" size={15} color="#fff"/>
            </a>
            <a href="https://www.instagram.com/aliadassociation" target="_blank" rel="noreferrer" style={btnGhost}>
              <Icon name="insta" size={15} color="var(--terracotta)"/> @aliadassociation
            </a>
          </div>
        </div>

        <div style={{display:'flex', justifyContent:'center'}}>
          <div style={{position:'relative', width:'100%', maxWidth:380}}>
            {/* terracotta accent shape behind */}
            <div style={{
              position:'absolute', inset:'-18px -18px -18px 18px',
              background:'var(--gold)', borderRadius:'var(--radius)', opacity:0.55, zIndex:0,
            }}/>
            <div style={{
              position:'relative', zIndex:1, borderRadius:'var(--radius)', overflow:'hidden',
              aspectRatio:'9/16', background:'var(--ink)',
              boxShadow:'0 24px 60px -28px rgba(0,0,0,.35)',
              border:'1px solid var(--line)',
            }}>
              <iframe
                src="https://www.instagram.com/reel/DYC2O1Pp7bd/embed/"
                title="Reel ALIAD"
                style={{width:'100%', height:'100%', border:'none', display:'block', background:'#000'}}
                allow="encrypted-media; picture-in-picture; web-share"
                allowFullScreen
                scrolling="no"
                loading="lazy"
              />
            </div>
            <div style={{
              position:'relative', zIndex:1, marginTop:14, display:'flex', alignItems:'center', gap:8,
              fontSize:13, color:'var(--ink-3)', justifyContent:'center', fontWeight:500,
            }}>
              <Icon name="insta" size={14} color="var(--terracotta)"/> Reel @aliadassociation
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Contact ─────────────────────────────────────────────────────────────
function Contact() {
  return (
    <section id="contact" className="section" style={{background:'var(--ink)', color:'var(--paper)'}}>
      <div className="wrap">
        <div className="contact-grid" style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:80, alignItems:'start'}}>
          <div>
            <div className="eyebrow" style={{color:'var(--gold)'}}>Nous écrire, nous appeler, venir nous voir</div>
            <h2 className="serif" style={{fontSize:'clamp(40px, 5vw, 72px)', lineHeight:1.02, marginTop:14}}>
              Une question, un besoin ? <span style={{fontStyle:'italic', color:'var(--gold)'}}>Parlons-en.</span>
            </h2>
            <p style={{color:'var(--ink-3)', fontSize:17, marginTop:24, lineHeight:1.6, maxWidth:520}}>
              Nous répondons à chaque sollicitation. Vous pouvez nous joindre par téléphone,
              par e-mail, ou venir nous rencontrer à Gros-Morne.
            </p>

            <div className="contact-blocks" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, marginTop:44}}>
              <ContactBlock icon="phone" title="Standard" lines={['0596 48 05 12']}/>
              <ContactBlock icon="phone" title="Lignes directes" lines={['0696 37 25 68', '0696 31 65 31']}/>
              <ContactBlock icon="mail" title="E-mail" lines={['aliadassociation@gmail.com']}/>
              <ContactBlock icon="pin" title="Adresse" lines={['36 rue de la Liberté', '97213 Gros-Morne, Martinique']}/>
              <ContactBlock icon="clock" title="Horaires" lines={['Lun–Ven · 8h–16h', 'Sur rendez-vous le samedi']}/>
              <ContactBlock icon="insta" title="Réseaux" lines={['@aliadassociation']}/>
            </div>
          </div>

          <form style={{
            background:'var(--paper)', color:'var(--ink)',
            padding:'34px 32px', borderRadius:'var(--radius)',
          }} onSubmit={e=>e.preventDefault()}>
            <h3 className="serif" style={{fontSize:28, marginBottom:6}}>Écrivez-nous</h3>
            <p style={{fontSize:14, color:'var(--ink-3)', marginBottom:22}}>Nous revenons vers vous sous 48 h ouvrées.</p>
            <Field label="Nom" placeholder="Votre nom"/>
            <Field label="Téléphone ou e-mail" placeholder="0696… ou nom@exemple.fr"/>
            <Field label="Concerne" type="select" options={['Aide à domicile', 'Portage de repas', 'Médiation familiale', 'Soutien à la parentalité', 'Bien-être & prévention', 'Recrutement', 'Autre']}/>
            <Field label="Votre message" type="textarea" placeholder="Décrivez en quelques mots votre situation ou votre question."/>
            <button type="submit" style={{
              width:'100%', marginTop:8,
              background:'var(--terracotta)', color:'#fff', border:'none',
              padding:'15px 22px', borderRadius:99, fontWeight:600, fontSize:15, cursor:'pointer',
            }}>Envoyer le message</button>
          </form>
        </div>
      </div>
    </section>
  );
}

function ContactBlock({ icon, title, lines }) {
  return (
    <div>
      <div style={{display:'flex', alignItems:'center', gap:10, color:'var(--gold)'}}>
        <Icon name={icon} size={16} color="var(--gold)"/>
        <span style={{fontSize:11, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase'}}>{title}</span>
      </div>
      <div style={{marginTop:8, fontSize:16, color:'var(--paper)', lineHeight:1.55}}>
        {lines.map((l, i) => <div key={i} style={{fontWeight: i===0?600:400, opacity: i===0?1:0.85}}>{l}</div>)}
      </div>
    </div>
  );
}

function Field({ label, type='text', placeholder, options }) {
  const baseStyle = {
    width:'100%', padding:'12px 14px', borderRadius:10,
    border:'1px solid var(--line)', background:'var(--paper)',
    fontSize:15, fontFamily:'inherit', color:'var(--ink)',
    outline:'none',
  };
  return (
    <label style={{display:'block', marginBottom:14}}>
      <span style={{display:'block', fontSize:12, fontWeight:600, color:'var(--ink-2)', marginBottom:6, letterSpacing:'.04em'}}>{label}</span>
      {type === 'textarea' ? (
        <textarea rows="4" placeholder={placeholder} style={{...baseStyle, resize:'vertical'}}/>
      ) : type === 'select' ? (
        <select style={baseStyle}>{options.map(o => <option key={o}>{o}</option>)}</select>
      ) : (
        <input type={type} placeholder={placeholder} style={baseStyle}/>
      )}
    </label>
  );
}

// ─── Footer ──────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{background:'var(--paper-2)', padding:'60px 0 32px', borderTop:'1px solid var(--line)'}}>
      <div className="wrap footer-grid" style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap:48, marginBottom:48}}>
        <div>
          <Logo size={34}/>
          <p style={{fontSize:14, color:'var(--ink-2)', marginTop:18, maxWidth:300, lineHeight:1.55}}>
            Association loi 1901 — Association pour l'Accompagnement à l'Insertion et l'Aide à Domicile.
            Au service de tous les âges en Martinique.
          </p>
          <div style={{display:'flex', gap:10, marginTop:18}}>
            <a href="https://www.instagram.com/aliadassociation" target="_blank" rel="noreferrer" style={socialBtn}><Icon name="insta" size={16} color="var(--ink)"/></a>
            <a href="#" style={socialBtn}><Icon name="fb" size={16} color="var(--ink)"/></a>
          </div>
        </div>
        <FootCol title="Services" links={['Aide à domicile', 'Portage de repas', 'Médiation familiale', 'Soutien à la parentalité', 'Bien-être & prévention']}/>
        <FootCol title="L'association" links={['Notre mission', 'L\u2019équipe', 'Le journal', 'Recrutement', 'Faire un don']}/>
        <FootCol title="Contact" links={['36 rue de la Liberté', '97213 Gros-Morne', '0596 48 05 12', 'aliadassociation@gmail.com']}/>
      </div>
      <div className="wrap footer-bottom" style={{display:'flex', justifyContent:'space-between', alignItems:'center',
        paddingTop:24, borderTop:'1px solid var(--line)', fontSize:13, color:'var(--ink-3)', flexWrap:'wrap', gap:12}}>
        <span>© {new Date().getFullYear()} Association ALIAD — Tous droits réservés.</span>
        <div style={{display:'flex', gap:24}}>
          <a href="#">Mentions légales</a>
          <a href="#">Politique de confidentialité</a>
          <a href="#">Plan du site</a>
        </div>
      </div>
    </footer>
  );
}

const socialBtn = {
  width:38, height:38, borderRadius:'50%', display:'grid', placeItems:'center',
  background:'var(--paper)', border:'1px solid var(--line)',
};

function FootCol({ title, links }) {
  return (
    <div>
      <h4 style={{fontSize:11, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--ink-3)', marginBottom:14}}>{title}</h4>
      <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10}}>
        {links.map(l => <li key={l}><a href="#" style={{fontSize:14, color:'var(--ink-2)'}}>{l}</a></li>)}
      </ul>
    </div>
  );
}

// ─── App ─────────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { applyPalette(t.palette); }, [t.palette]);

  return (
    <div className={t.density === 'compact' ? 'compact' : ''}>
      {t.showTopBar && <TopBar/>}
      <Nav/>
      <Hero style={t.heroStyle}/>
      <Services/>
      <Mission/>
      <Actualites/>
      <Journal/>
      <Contact/>
      <Footer/>

      <TweaksPanel>
        <TweakSection label="Apparence"/>
        <TweakRadio label="Palette" value={t.palette}
          options={[{value:'warm', label:'Chaleur'}, {value:'sober', label:'Sobre'}, {value:'night', label:'Nuit'}]}
          onChange={v => setTweak('palette', v)}/>
        <TweakRadio label="Densité" value={t.density}
          options={[{value:'regular', label:'Aéré'}, {value:'compact', label:'Compact'}]}
          onChange={v => setTweak('density', v)}/>
        <TweakSection label="Hero"/>
        <TweakRadio label="Style" value={t.heroStyle}
          options={[{value:'collage', label:'Collage'}, {value:'single', label:'Photo'}, {value:'mark', label:'Logo XL'}]}
          onChange={v => setTweak('heroStyle', v)}/>
        <TweakToggle label="Bandeau contact" value={t.showTopBar}
          onChange={v => setTweak('showTopBar', v)}/>
      </TweaksPanel>
    </div>
  );
}

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