import { usePublicData } from '../lib/usePublic.js';
import { associationSettings } from '../lib/siteSettings.js';

const VALUES = [
  { t: 'Réseau', d: "Un carnet d'adresses vivant, nourri par des rencontres régulières et de vraies affinités." },
  { t: 'Convivialité', d: "Des moments d'échange chaleureux, où les relations se nouent avant les contrats." },
  { t: 'Performance', d: "L'exigence du haut niveau appliquée au monde de l'entreprise." },
  { t: 'Territoire', d: "Un engagement fort pour l'économie et le rayonnement du Grand Est." },
];

const TIMELINE = [
  { y: '1996', t: 'Création du Club', d: "Une poignée d'entreprises se rassemblent autour du SLUC Nancy." },
  { y: '2005', t: '50 membres', d: "Le réseau s'impose comme un acteur économique local." },
  { y: '2015', t: 'Premier gala', d: 'La soirée annuelle devient le rendez-vous phare du Club.' },
  { y: '2026', t: '85 membres actifs', d: "Un réseau d'affaires de référence dans la région." },
];

const STATS = [
  { n: '85', l: 'entreprises membres' },
  { n: '12', l: 'rencontres par an' },
  { n: '30 ans', l: 'de partenariat' },
  { n: '200+', l: 'invités au gala annuel' },
];

export default function Association() {
  const { data } = usePublicData();
  const settings = associationSettings(data?.content);
  const officers = [
    ['Vice-présidence', settings.association_vice_president],
    ['Trésorerie', settings.association_treasurer],
    ['Secrétariat', settings.association_secretary],
  ].filter(([, name]) => name);
  const boardMembers = settings.association_board_members
    .split(/\r?\n/)
    .map((name) => name.trim())
    .filter(Boolean);
  const hasContact = settings.association_address || settings.association_email
    || settings.association_phone || settings.association_contact || settings.association_siret;

  return (
    <main>
      <section style={{ background: 'var(--dark)', color: '#fff' }}>
        <div style={{ maxWidth: 900, margin: '0 auto', padding: '110px 32px', textAlign: 'center' }}>
          <div className="kicker on-dark" style={{ letterSpacing: '.22em', marginBottom: 26 }}>L'association</div>
          <h1 className="serif" style={{ fontWeight: 400, fontSize: 'clamp(38px, 5vw, 56px)', lineHeight: 1.08, marginBottom: 26 }}>
            Trente ans à réunir le sport<br />et l'entreprise.
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: '#B7AFA6', maxWidth: 620, margin: '0 auto' }}>
            {settings.association_name} est l'association des partenaires économiques du SLUC Nancy Basket.
            Une communauté de dirigeants qui partagent les valeurs du haut niveau.
          </p>
        </div>
      </section>

      <section className="hero-grid" style={{ maxWidth: 1080, margin: '0 auto', padding: '96px 32px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div className="kicker" style={{ marginBottom: 16 }}>Notre mission</div>
          <h2 className="serif" style={{ fontWeight: 500, fontSize: 38, lineHeight: 1.12, marginBottom: 22 }}>
            Créer des liens qui font grandir les entreprises.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--gray)', marginBottom: 16 }}>
            Nous rassemblons chaque année des dirigeants du Grand Est autour de rencontres d'affaires,
            d'événements exclusifs et de moments de convivialité, dans le cadre unique de la vie d'un
            club de basket professionnel.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--gray)' }}>
            Adhérer, c'est développer son réseau, gagner en visibilité et soutenir le sport de haut
            niveau sur son territoire.
          </p>
        </div>
        <div className="placeholder-pattern" style={{ aspectRatio: '4/3', borderRadius: 5, display: 'flex', alignItems: 'flex-end', padding: 22 }}>
          <span style={{ fontFamily: 'monospace', fontSize: 11, color: '#a8a099', background: 'var(--bg)', padding: '5px 9px', borderRadius: 2 }}>
            photo — assemblée des membres
          </span>
        </div>
      </section>

      <section style={{ maxWidth: 1080, margin: '0 auto', padding: '56px 32px' }}>
        <div className="grid-4">
          {VALUES.map((v) => (
            <div key={v.t} className="card" style={{ padding: 26 }}>
              <div style={{ width: 34, height: 3, background: 'var(--red)', marginBottom: 18 }} />
              <h3 className="serif" style={{ fontSize: 21, fontWeight: 600, marginBottom: 10 }}>{v.t}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--gray)' }}>{v.d}</p>
            </div>
          ))}
        </div>
      </section>

      <section style={{ background: 'var(--beige)', marginTop: 56, padding: '90px 0' }}>
        <div className="hero-grid" style={{ maxWidth: 980, margin: '0 auto', padding: '0 32px', display: 'grid', gridTemplateColumns: settings.association_president ? '.8fr 1.2fr' : '1fr', gap: 56, alignItems: 'center' }}>
          {settings.association_president && <div style={{ textAlign: 'center' }}>
            <div style={{ aspectRatio: '1/1', borderRadius: 6, background: 'repeating-linear-gradient(135deg,#e4dfd8 0 12px,#eeeae3 12px 24px)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'monospace', fontSize: 11, color: '#a8a099', marginBottom: 16 }}>
              portrait
            </div>
            <div className="serif" style={{ fontSize: 20, fontWeight: 600 }}>{settings.association_president}</div>
            <div style={{ fontSize: 13, color: 'var(--gray-light)', marginTop: 2 }}>Présidence de l'association</div>
          </div>}
          <div>
            <div className="serif" style={{ fontSize: 60, color: 'var(--red)', lineHeight: 0.5, height: 32 }}>“</div>
            <p className="serif" style={{ fontSize: 26, lineHeight: 1.45, fontWeight: 400, marginBottom: 22 }}>
              Notre force, c'est le collectif. Comme sur le terrain, nos membres avancent ensemble,
              se soutiennent et bâtissent des réussites communes.
            </p>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--gray)' }}>
              Depuis sa création, le Club n'a cessé de grandir grâce à l'engagement de dirigeants qui
              croient à la puissance du réseau. Je vous invite à nous rejoindre.
            </p>
          </div>
        </div>
      </section>

      {(officers.length > 0 || boardMembers.length > 0) && (
        <section style={{ maxWidth: 1080, margin: '0 auto', padding: '90px 32px 30px' }}>
          <div className="kicker" style={{ marginBottom: 14 }}>Gouvernance</div>
          <h2 className="serif" style={{ fontWeight: 500, fontSize: 38, marginBottom: 34 }}>Le conseil d'administration</h2>
          {officers.length > 0 && (
            <div className="grid-3" style={{ marginBottom: boardMembers.length ? 38 : 0 }}>
              {officers.map(([role, name]) => (
                <div key={role} style={{ borderTop: '3px solid var(--red)', paddingTop: 18 }}>
                  <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.1em', color: 'var(--gray-light)', fontWeight: 600, marginBottom: 8 }}>{role}</div>
                  <div className="serif" style={{ fontSize: 21, fontWeight: 600 }}>{name}</div>
                </div>
              ))}
            </div>
          )}
          {boardMembers.length > 0 && (
            <div style={{ borderTop: '1px solid var(--border)', paddingTop: 24 }}>
              <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '.1em', color: 'var(--gray-light)', fontWeight: 600, marginBottom: 16 }}>Membres du CA</div>
              <div className="grid-3" style={{ gap: 12 }}>
                {boardMembers.map((name, index) => <div key={`${name}-${index}`} style={{ fontSize: 15, fontWeight: 600 }}>{name}</div>)}
              </div>
            </div>
          )}
        </section>
      )}

      {hasContact && (
        <section style={{ maxWidth: 1080, margin: '0 auto', padding: '80px 32px 30px' }}>
          <div style={{ borderTop: '1px solid var(--border)', paddingTop: 44, display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 50 }} className="hero-grid">
            <div>
              <div className="kicker" style={{ marginBottom: 14 }}>Contact</div>
              <h2 className="serif" style={{ fontWeight: 500, fontSize: 36 }}>Nous contacter</h2>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 15, lineHeight: 1.6 }}>
              {settings.association_contact && <strong>{settings.association_contact}</strong>}
              {settings.association_address && <span style={{ whiteSpace: 'pre-line', color: 'var(--gray)' }}>{settings.association_address}</span>}
              {settings.association_email && <a className="btn-link" href={`mailto:${settings.association_email}`}>{settings.association_email}</a>}
              {settings.association_phone && <a className="btn-link" href={`tel:${settings.association_phone.replace(/[^+\d]/g, '')}`}>{settings.association_phone}</a>}
              {settings.association_siret && <span style={{ color: 'var(--gray)' }}>SIRET : {settings.association_siret}</span>}
            </div>
          </div>
        </section>
      )}

      <section style={{ maxWidth: 1080, margin: '0 auto', padding: '96px 32px' }}>
        <div style={{ textAlign: 'center', marginBottom: 52 }}>
          <div className="kicker" style={{ marginBottom: 14 }}>Notre histoire</div>
          <h2 className="serif" style={{ fontWeight: 500, fontSize: 40 }}>30 ans de croissance</h2>
        </div>
        <div className="grid-4" style={{ gap: 0 }}>
          {TIMELINE.map((t) => (
            <div key={t.y} style={{ padding: '0 20px', borderLeft: '1px solid var(--border)', position: 'relative' }}>
              <div style={{ position: 'absolute', left: -6, top: 6, width: 11, height: 11, borderRadius: '50%', background: 'var(--red)' }} />
              <div className="serif" style={{ fontSize: 30, fontWeight: 600, color: 'var(--red)', marginBottom: 8 }}>{t.y}</div>
              <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>{t.t}</div>
              <div style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--gray)' }}>{t.d}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ background: 'var(--dark)', color: '#fff', padding: '80px 0' }}>
        <div className="grid-4" style={{ maxWidth: 1080, margin: '0 auto', padding: '0 32px', gap: 40, textAlign: 'center' }}>
          {STATS.map((s) => (
            <div key={s.l}>
              <div className="serif" style={{ fontSize: 46, fontWeight: 600 }}>{s.n}</div>
              <div style={{ fontSize: 13.5, color: '#B7AFA6', marginTop: 6 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}