// Buyer portal — sign in
const { Seal, Button, Input, Checkbox, CertBadge } = window.FF;

function SignIn({ onSignIn }) {
  return (
    <div style={{ minHeight: '100vh', display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 'var(--space-12)' }}>
        <Seal size={56} lockup tagline="Buyer portal" assetBase="../../" />
        <h1 style={{ margin: 'var(--space-9) 0 0', font: 'var(--type-display-3)', color: 'var(--text-strong)' }}>Sign in</h1>
        <p style={{ margin: '10px 0 var(--space-7)', maxWidth: '44ch', font: 'var(--type-body)', color: 'var(--text-muted)' }}>
          Live lot availability, price lists and every certificate for your account.
        </p>
        <form
          onSubmit={(e) => { e.preventDefault(); onSignIn && onSignIn(); }}
          style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)', maxWidth: 380 }}
        >
          <Input label="Work email" type="email" defaultValue="achat@maison-epices.fr" />
          <Input label="Password" type="password" defaultValue="••••••••••" hint="Access is per company, not per person." />
          <Checkbox label="Keep me signed in on this device" defaultChecked />
          <Button type="submit" size="lg" full iconAfter="chevron-right">Sign in</Button>
          <a href="#" style={{ font: 'var(--type-body-sm)', color: 'var(--text-link)' }}>Request an account</a>
        </form>
      </div>
      <div className="ff-on-ink" style={{ background: 'var(--ff-ink)', padding: 'var(--space-12)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden' }}>
        <img src="../../assets/logos/fair-farms-seal-paper.svg" alt="" style={{ position: 'absolute', right: -120, bottom: -100, width: 460, opacity: 0.05 }} />
        <blockquote style={{ position: 'relative', margin: 0, maxWidth: '30ch', font: 'var(--type-display-3)', fontSize: 32, color: 'var(--ff-paper)', textWrap: 'pretty' }}>
          Every lot carries its farm, its harvest window and its drying record.
        </blockquote>
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
          <CertBadge name="Fair for Life" art="assets/certifications/fair-for-life-mark.png" number="Certified partner since 2018" date="Last audit 25 May 2026" height={40} assetBase="../../" />
          <CertBadge name="USDA NOP Organic" number="7880187533" date="Issued 6 February 2026" height={36} assetBase="../../" />
        </div>
      </div>
    </div>
  );
}
window.SignIn = SignIn;