// wf/utility.jsx — Utility screens: Wi-Fi, Règles, Urgences, Check-in

const Wifi = () => (
  <Phone height={720}>
    <PhoneHeader />
    <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
      <Icon name="arrow-l" size={16} />
      <span className="sans" style={{ fontSize: 11, color:'var(--wf-ink-soft)', letterSpacing:'0.08em' }}>RETOUR AU MENU</span>
    </div>

    <div className="serif" style={{ fontSize: 38, fontWeight: 400, lineHeight: 1, marginTop: 28 }}>
      Wi-Fi.
    </div>
    <div className="serif" style={{ fontSize: 16, fontStyle:'italic', color:'var(--wf-ink-soft)', marginTop: 4 }}>
      Vous êtes à la maison.
    </div>

    <div style={{ marginTop: 28 }}>
      <Eyebrow>Réseau</Eyebrow>
      <div className="serif" style={{ fontSize: 22, marginTop: 4, fontWeight: 400 }}>VILLA_SOUVENIRS</div>
      <button style={{
        marginTop: 6, background:'none', border:'none', padding: 0,
        fontFamily:'var(--wf-sans)', fontSize: 11, color:'var(--wf-accent-deep)',
        borderBottom:'1px solid var(--wf-accent-deep)', cursor:'pointer'
      }}>Copier</button>
    </div>

    <div style={{ marginTop: 22 }}>
      <Eyebrow>Mot de passe</Eyebrow>
      <div className="serif" style={{ fontSize: 22, marginTop: 4, fontWeight: 400, letterSpacing: '0.05em' }}>m@rseille2026</div>
      <button style={{
        marginTop: 6, background:'none', border:'none', padding: 0,
        fontFamily:'var(--wf-sans)', fontSize: 11, color:'var(--wf-accent-deep)',
        borderBottom:'1px solid var(--wf-accent-deep)', cursor:'pointer'
      }}>Copier</button>
    </div>

    <div style={{ marginTop: 34, display:'flex', justifyContent:'center' }}>
      {/* QR code stub */}
      <div style={{ width: 120, height: 120, border:'1px solid var(--wf-ink)', position:'relative', padding: 6 }}>
        <div style={{ width:'100%', height:'100%', background:`
          repeating-conic-gradient(var(--wf-ink) 0% 25%, transparent 0 50%) 50% / 12px 12px
        ` }} />
        {[[0,0],[1,0],[0,1]].map(([x,y],i)=>(
          <div key={i} style={{ position:'absolute', width: 26, height: 26, border:'4px solid var(--wf-bg)', background:'var(--wf-ink)', top: x?'auto':6, bottom: x?6:'auto', left: y?'auto':6, right: y?6:'auto' }}>
            <div style={{ width: 8, height: 8, background:'var(--wf-bg)', margin:'5px' }}/>
          </div>
        ))}
      </div>
    </div>
    <div className="hand-note" style={{ textAlign:'center', marginTop: 8 }}>
      ↑ Scannez pour vous connecter en un geste
    </div>
  </Phone>
);

const Rules = () => (
  <Phone height={720}>
    <PhoneHeader />
    <div className="serif" style={{ fontSize: 38, fontWeight: 400, lineHeight: 1, marginTop: 6 }}>
      Règles<br/><i style={{ fontWeight:300 }}>de la maison.</i>
    </div>
    <div className="serif" style={{ fontSize: 13, fontStyle:'italic', color:'var(--wf-ink-soft)', marginTop: 8 }}>
      Quelques attentions pour préserver les lieux.
    </div>

    <div style={{ marginTop: 20 }}>
      {[
        ['01','Clés','Avant chaque sortie, vérifiez que les clés ne sont pas restées sur la porte.'],
        ['02','Lumières','Éteignez en quittant — chaque pièce, y compris la terrasse.'],
        ['03','Climatisation','Fermez les fenêtres et volets quand elle fonctionne.'],
        ['04','Tri sélectif','Suivez le guide affiché dans la cuisine.'],
        ['05','Bruit','Du calme entre 22h et 8h, par respect des voisins.'],
      ].map(([n,t,d],i) => (
        <div key={i} style={{ padding: '12px 0', borderBottom: '1px solid var(--wf-hairline)' }}>
          <div style={{ display:'flex', alignItems:'baseline', gap: 10 }}>
            <span className="serif" style={{ fontSize: 12, fontStyle:'italic', color:'var(--wf-ink-soft)' }}>{n}</span>
            <span className="serif" style={{ fontSize: 16, fontWeight: 400 }}>{t}</span>
          </div>
          <div className="sans" style={{ fontSize: 11, color:'var(--wf-ink-soft)', marginLeft: 22, marginTop: 3, lineHeight: 1.35 }}>{d}</div>
        </div>
      ))}
    </div>
  </Phone>
);

const Urgences = () => (
  <Phone height={720}>
    <PhoneHeader />
    <div className="serif" style={{ fontSize: 36, fontWeight: 400, lineHeight: 1, marginTop: 6 }}>
      Urgences <i style={{ fontWeight:300 }}>& contacts.</i>
    </div>
    <div className="hand-note" style={{ marginTop: 12 }}>
      En cas de souci, n'hésitez pas — j'habite tout près.
    </div>

    <div style={{ marginTop: 16, border:'1px solid var(--wf-ink)', padding: 14 }}>
      <Eyebrow>Votre hôte</Eyebrow>
      <div className="serif" style={{ fontSize: 20, marginTop: 4 }}>Florence</div>
      <div style={{ display:'flex', gap: 8, marginTop: 8 }}>
        <PillBtn dark>Appeler</PillBtn>
        <PillBtn>WhatsApp</PillBtn>
      </div>
    </div>

    <div style={{ marginTop: 16 }}>
      <Eyebrow>Services d'urgence</Eyebrow>
      {[
        ['SAMU','15'],
        ['Police secours','17'],
        ['Pompiers','18'],
        ['Numéro européen','112'],
        ['SOS Médecins Marseille','3624'],
        ['Pharmacie de garde','3915'],
      ].map(([t, n], i) => (
        <div key={i} style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 0', borderBottom:'1px solid var(--wf-hairline)' }}>
          <span className="sans" style={{ fontSize: 12 }}>{t}</span>
          <span className="serif" style={{ fontSize: 16, fontWeight: 500 }}>{n}</span>
        </div>
      ))}
    </div>
  </Phone>
);

const CheckIn = () => (
  <Phone height={720}>
    <PhoneHeader />
    <div className="serif" style={{ fontSize: 32, fontWeight: 400, lineHeight: 1, marginTop: 6 }}>
      Check-in <i style={{ fontWeight:300 }}>&amp; out.</i>
    </div>
    <div style={{ marginTop: 18, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12 }}>
      <div style={{ border:'1px solid var(--wf-hairline)', padding: 12 }}>
        <Icon name="key" size={20}/>
        <div className="eyebrow" style={{ marginTop: 6 }}>Arrivée</div>
        <div className="serif" style={{ fontSize: 24, fontWeight: 400, marginTop: 2 }}>16 h</div>
        <div className="hand-note" style={{ marginTop: 4 }}>à partir de</div>
      </div>
      <div style={{ border:'1px solid var(--wf-hairline)', padding: 12 }}>
        <Icon name="door" size={20}/>
        <div className="eyebrow" style={{ marginTop: 6 }}>Départ</div>
        <div className="serif" style={{ fontSize: 24, fontWeight: 400, marginTop: 2 }}>11 h</div>
        <div className="hand-note" style={{ marginTop: 4 }}>au plus tard</div>
      </div>
    </div>

    <div style={{ marginTop: 18 }}>
      <Eyebrow>Mode d'emploi</Eyebrow>
      <Para lines={4} opacity={0.45} />
    </div>

    <div style={{ marginTop: 14, display:'flex', justifyContent:'center' }}>
      <Photo w={180} h={140} variant="rect" label="Photo entrée / boîte à clés" />
    </div>
  </Phone>
);

Object.assign(window, { Wifi, Rules, Urgences, CheckIn });