/* global React, ReactDOM, EcHeader, EcFooter */
/* Page d'ACCUEIL du portail revendeur French Kits (nouvelle charte terracotta/jaune).
   Construite sur le design system partagé : EcHeader / EcFooter / EcUI + config/portail.php. */
const UI = window.EcUI || {};
const T = UI.T || {};
const serif = UI.serif || ((e) => Object.assign({ fontFamily: T.serif || "'Playfair Display',serif" }, e || {}));

function HomePage() {
  const cfg = window.EXTRANET_CONFIG || {};

  // L'accueil vient de l'administration : ses textes, et les collections
  // choisies. Elles etaient ecrites ici — titre, pastille, phrase, visuel — et
  // la page annoncait « 9 nouveautes » en dur, donc faux des le premier kit
  // ajoute. Le nombre et le prix mini se comptent desormais.
  const H = window.HOME || {};
  const t = H.textes || {};
  const collections = H.collections || [];
  const base = cfg.base_url || '';
  const isLogged = !!(window.CLIENT && window.CLIENT.nom);
  const commanderUrl = isLogged ? (cfg.commander_url || (base + '/commander')) : (cfg.connexion_url || (base + '/connexion'));
  const eteUrl = cfg.nouveautes_ete_url || (base + '/nouveautes-ete');
  const printempsUrl = cfg.nouveautes_printemps_url || (base + '/nouveautes-printemps');
  const dash = (w) => <span style={{ width: w || 26, height: 1.5, background: T.coral, display: 'inline-block' }}></span>;
  const eyebrow = { fontSize: 12.5, fontWeight: 600, letterSpacing: '.2em', color: T.coral };

  const Collection = ({ href, img, wash, tag, gamme, titleA, titleEm, desc, meta }) => (
    <a className="ec-card" href={href} style={{ display: 'flex', flexDirection: 'column', background: T.card, border: '1px solid ' + T.border, borderRadius: 22, overflow: 'hidden', textDecoration: 'none' }}>
      <div style={{ position: 'relative', aspectRatio: '16/10', background: wash || 'oklch(0.955 0.016 80)', display: 'grid', placeItems: 'center' }}>
        {img && <img src={img} alt={titleA + ' ' + titleEm} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />}
        <span style={{ position: 'absolute', top: 16, left: 16, background: T.primary, color: '#fff', fontSize: 11, fontWeight: 700, letterSpacing: '.12em', padding: '7px 13px', borderRadius: 8 }}>{tag}</span>
      </div>
      <div style={{ padding: '26px 28px 28px' }}>
        <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '.16em', color: T.coral, marginBottom: 8 }}>{gamme}</div>
        <h2 className="ec-h2" style={serif({ fontWeight: 600, fontSize: 30, lineHeight: 1.05, margin: '0 0 10px', color: 'oklch(0.27 0.016 48)' })}>{titleA} <span style={{ fontStyle: 'italic', color: T.coral }}>{titleEm}</span></h2>
        <p style={{ fontSize: 14.5, color: 'oklch(0.46 0.015 55)', margin: '0 0 18px', lineHeight: 1.5 }}>{desc}</p>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={serif({ fontSize: 17, color: 'oklch(0.28 0.016 48)' })}>{meta}</span>
          <span style={{ fontWeight: 600, fontSize: 14.5, color: T.primary }}>Voir →</span>
        </div>
      </div>
    </a>
  );

  const Step = ({ n, title, text }) => (
    <div style={{ flex: 1, display: 'flex', gap: 16, alignItems: 'flex-start' }}>
      <span style={serif({ fontStyle: 'italic', fontSize: 30, color: T.coral, lineHeight: 1 })}>{n}</span>
      <div>
        <div style={serif({ fontSize: 19, color: 'oklch(0.27 0.016 48)', marginBottom: 3 })}>{title}</div>
        <div style={{ fontSize: 13.5, color: 'oklch(0.46 0.02 55)', lineHeight: 1.45 }}>{text}</div>
      </div>
    </div>
  );
  const stepSep = <div style={{ width: 1, background: 'oklch(0.85 0.04 60)' }}></div>;

  return (
    <div style={{ fontFamily: T.sans || "'Hanken Grotesk',sans-serif", background: T.cream, color: T.ink, minHeight: '100vh', overflowX: 'hidden' }}>

      <EcHeader orderUnits={0} />

      {/* HERO */}
      <section className="ec-hero ec-pad" style={{ maxWidth: 1240, margin: '0 auto', padding: '60px 32px 40px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 36, alignItems: 'center' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>{dash()}<span style={eyebrow}>{t.eyebrow || 'PORTAIL REVENDEUR FRENCH KITS'}</span></div>
          <h1 className="ec-h1" style={serif({ fontWeight: 600, fontSize: 72, lineHeight: 1.0, letterSpacing: '-.015em', margin: '0 0 24px' })}>{t.titre || 'Vos kits créatifs,'}<br /><span style={{ fontStyle: 'italic', color: T.coral }}>{t.titre_em || 'prêts pour vos rayons.'}</span></h1>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: 'oklch(0.44 0.015 55)', margin: '0 0 32px', maxWidth: 470 }}>Commandez les French Kits au tarif pro, composez votre bon en quelques clics et recevez en 5 à 7 jours. Fabriqués main, en France.</p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', marginBottom: 22 }}>
            <a href={eteUrl} style={UI.btn ? UI.btn('primary') : {}}>{t.cta || 'Découvrir les nouveautés'} <span style={{ fontSize: 15 }}>→</span></a>
            <a href={commanderUrl} style={UI.btn ? UI.btn('ghost') : {}}>{t.cta_second || 'Ouvrir mon bon de commande'}</a>
          </div>
          <div style={{ fontSize: 13, color: 'oklch(0.5 0.014 60)', display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
            {/* Les reassurances des reglages, separees par des points. Elles
                etaient ecrites ici, et « Franco des 250 € » ne suivait pas le
                reglage : il portait sa propre valeur par defaut. */}
            {((window.PORTAIL_CONFIG || {}).reassurances || []).map((r, i, tout) => (
              <React.Fragment key={i}>
                <span>{r}</span>
                {i < tout.length - 1 ? <span style={{ opacity: .4 }}>·</span> : null}
              </React.Fragment>
            ))}
          </div>
        </div>
        <div className="ec-hero-visual" style={{ position: 'relative', height: 420 }}>
          <div style={{ position: 'absolute', bottom: 6, right: '6%', width: '48%', aspectRatio: '3/4', borderRadius: 16, overflow: 'hidden', boxShadow: '0 30px 60px -32px oklch(0.4 0.04 50)', transform: 'rotate(4deg)', background: 'oklch(0.965 0.012 84)' }}>
            <img src="/uploads/products/K-0158_01.png" alt="Aquarelle Coquelicots" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ position: 'absolute', top: 10, left: '4%', width: '52%', aspectRatio: '3/4', borderRadius: 18, overflow: 'hidden', boxShadow: '0 40px 80px -30px oklch(0.4 0.05 50)', transform: 'rotate(-2deg)', background: 'oklch(0.965 0.012 84)' }}>
            <img src="/uploads/products/K-0169_01.jpg" alt="Kit broderie La Dolce Vita" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
        </div>
      </section>

      {/* COLLECTIONS */}
      <section className="ec-pad" style={{ maxWidth: 1240, margin: '0 auto', padding: '30px 32px 10px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>{dash(22)}<span style={eyebrow}>{t.collections_eyebrow || 'LES COLLECTIONS À LA UNE'}</span></div>
        <div className="ec-cards" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {collections.map((c, i) => (
            <Collection key={i} href={c.href} img={c.img} tag={c.tag} gamme={c.gamme}
              titleA={c.titleA} titleEm={c.titleEm} desc={c.desc}
              meta={<>{c.count} nouveauté{c.count > 1 ? 's' : ''}
                {/* Jamais de tarif revendeur pour un visiteur : connecte il voit
                    son prix d'achat HT, sinon le prix public conseille. */}
                {(isLogged ? c.prixMini : c.prixPublic) ? <> · dès <span style={{ fontStyle: 'italic', color: T.coral }}>
                  {(isLogged ? c.prixMini : c.prixPublic).toLocaleString('fr-FR', { minimumFractionDigits: 2 })} €</span>{isLogged ? ' HT' : ' conseillé'}</> : null}</>} />
          ))}
        </div>
      </section>

      {/* ÉTAPES */}
      <section className="ec-pad" style={{ maxWidth: 1240, margin: '0 auto', padding: '46px 32px 10px' }}>
        <div className="ec-steps" style={{ display: 'flex', gap: 20, background: T.warm, border: '1px solid oklch(0.86 0.04 60)', borderRadius: 22, padding: '30px 34px' }}>
          <Step n="1" title="Connectez-vous" text="Accédez à vos tarifs HT revendeur." />
          {stepSep}
          <Step n="2" title="Composez votre bon" text="Ajoutez vos modèles, par carton de 3." />
          {stepSep}
          <Step n="3" title="Recevez en 5–7 j" text={'Livraison suivie, franco dès ' + (parseFloat(cfg.franco_ht) || 250) + ' €.'} />
        </div>
      </section>

      {/* CTA */}
      <div style={{ background: T.warm2, borderTop: '1px solid oklch(0.86 0.04 60)', marginTop: 64 }}>
        <div className="ec-pad" style={{ maxWidth: 1240, margin: '0 auto', padding: '74px 32px', textAlign: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, marginBottom: 18 }}>{dash()}<span style={eyebrow}>{t.rappel_eyebrow || 'FRENCH KITS · ESPACE PRO'}</span>{dash()}</div>
          <h2 className="ec-h2" style={serif({ fontWeight: 500, fontSize: 52, lineHeight: 1.04, margin: '0 0 16px', color: 'oklch(0.27 0.016 48)' })}>Prêt·e à <span style={{ fontStyle: 'italic', color: T.coral }}>habiller</span><br />votre boutique ?</h2>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, flexWrap: 'wrap', marginTop: 8 }}>
            <a href={eteUrl} style={UI.btn ? UI.btn('primary') : {}}>Voir les nouveautés</a>
            <a href={commanderUrl} style={UI.btn ? UI.btn('ghost') : {}}>Ouvrir mon bon de commande</a>
          </div>
        </div>
      </div>

      <EcFooter />
    </div>
  );
}

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