export const metadata = {
  title: 'Mentions légales — NoteToQuote',
  description: 'Mentions légales de NoteToQuote conformément à la loi française (LCEN).',
};

export default function MentionsLegales() {
  return (
    <div style={{ maxWidth: 680, margin: '0 auto', padding: '48px 24px 80px' }}>
      <h1 style={{ fontSize: 28, fontWeight: 700, color: '#0f0f0f', marginBottom: 8 }}>Mentions légales</h1>
      <p style={{ color: '#6b7280', fontSize: 13, marginBottom: 40 }}>Conformément à l'article 6-III de la loi n° 2004-575 du 21 juin 2004 (LCEN)</p>

      <Section title="Éditeur du site">
        <Field label="Nom commercial" value="NoteToQuote" />
        <Field label="Exploité par" value="LAUTRAM Mathieu (ML Solutions)" />
        <Field label="Forme juridique" value="Entrepreneur individuel (EI)" />
        <Field label="SIRET" value="753 560 705 00026" />
        <Field label="Siège social" value="4 Allée des Cornouillers — 95670 Marly-la-Ville" />
        <Field label="Directeur de la publication" value="Mathieu Lautram" />
        <Field label="Contact" value="contact@notetoquote.com" />
      </Section>

      <Section title="Hébergement">
        <Field label="Hébergeur" value="OVH SAS" />
        <Field label="Adresse" value="2 rue Kellermann — 59100 Roubaix — France" />
        <Field label="Site" value="ovhcloud.com" />
      </Section>

      <Section title="Propriété intellectuelle">
        <p style={bodyStyle}>
          L'ensemble des contenus présents sur notetoquote.com (textes, logos, code, graphismes)
          est protégé par le droit d'auteur. Toute reproduction, même partielle, est interdite
          sans autorisation préalable écrite de l'éditeur.
        </p>
      </Section>

      <Section title="Limitation de responsabilité">
        <p style={bodyStyle}>
          NoteToQuote s'efforce de maintenir les informations publiées sur ce site exactes et
          à jour, mais ne saurait être tenu responsable des erreurs ou omissions, ni des
          dommages directs ou indirects résultant de l'utilisation du service.
        </p>
      </Section>

      <Section title="Droit applicable">
        <p style={bodyStyle}>
          Le présent site est soumis au droit français. Tout litige relatif à son utilisation
          sera soumis à la compétence exclusive des tribunaux français.
        </p>
      </Section>

      <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid #f0eef8' }}>
        <p style={{ fontSize: 12, color: '#9ca3af' }}>Dernière mise à jour : mai 2026</p>
      </div>
    </div>
  );
}

const bodyStyle: React.CSSProperties = {
  color: '#374151',
  fontSize: 14,
  lineHeight: 1.7,
  margin: 0,
};

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div style={{ marginBottom: 40 }}>
      <h2 style={{ fontSize: 16, fontWeight: 600, color: '#0f0f0f', marginBottom: 16, paddingBottom: 8, borderBottom: '1px solid #f0eef8' }}>
        {title}
      </h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {children}
      </div>
    </div>
  );
}

function Field({ label, value, placeholder }: { label: string; value: string; placeholder?: boolean }) {
  return (
    <div style={{ display: 'flex', gap: 12, fontSize: 14 }}>
      <span style={{ color: '#6b7280', minWidth: 180, flexShrink: 0 }}>{label}</span>
      <span style={{
        color: placeholder ? '#d97706' : '#0f0f0f',
        fontWeight: placeholder ? 500 : 400,
        fontStyle: placeholder ? 'italic' : 'normal',
      }}>
        {value}
      </span>
    </div>
  );
}