// Option A — Warm Editorial
// Paper-toned, serif-led, feels like a thoughtful family journal.
// Auto light/dark based on system.

const editorialStyles = {
  page: {
    width: '100%',
    minHeight: '100vh',
    background: 'var(--ed-bg)',
    color: 'var(--ed-ink)',
    fontFamily: '"Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif',
    padding: '56px 64px 72px',
    boxSizing: 'border-box',
    position: 'relative',
    overflow: 'hidden',
  },
  grain: {
    position: 'absolute', inset: 0, pointerEvents: 'none',
    backgroundImage: 'radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px)',
    backgroundSize: '3px 3px',
    mixBlendMode: 'multiply',
    opacity: 0.6,
  },
  masthead: {
    display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
    borderBottom: '1px solid var(--ed-rule)',
    paddingBottom: 18,
  },
  mastLeft: { display: 'flex', alignItems: 'baseline', gap: 18 },
  kicker: {
    fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
    color: 'var(--ed-muted)', fontFamily: '"JetBrains Mono", ui-monospace, monospace',
  },
  dateStamp: {
    fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase',
    color: 'var(--ed-muted)', fontFamily: '"JetBrains Mono", ui-monospace, monospace',
  },
  title: {
    fontFamily: '"Fraunces", "Cormorant Garamond", Georgia, serif',
    fontWeight: 400,
    fontSize: 'clamp(72px, 11vw, 132px)',
    lineHeight: 0.92,
    letterSpacing: '-0.035em',
    margin: '56px 0 28px',
    fontStyle: 'normal',
  },
  titleItalic: { fontStyle: 'italic', fontWeight: 300 },
  deck: {
    fontFamily: '"Fraunces", Georgia, serif',
    fontWeight: 300,
    fontStyle: 'italic',
    fontSize: 24,
    lineHeight: 1.45,
    maxWidth: 640,
    color: 'var(--ed-ink-soft)',
    margin: '0 0 64px',
  },
  twoCol: {
    display: 'grid',
    gridTemplateColumns: '1.1fr 1fr',
    gap: 48,
    marginTop: 8,
  },
  photoFrame: {
    aspectRatio: '4 / 5',
    borderRadius: 2,
    position: 'relative',
    overflow: 'hidden',
    boxShadow: '0 1px 0 var(--ed-rule), 0 30px 60px -30px rgba(40,30,20,.35)',
    background: 'var(--ed-placeholder-a)',
  },
  photoImg: {
    position: 'absolute', inset: 0,
    width: '100%', height: '100%',
    objectFit: 'cover',
    objectPosition: 'center',
    display: 'block',
  },
  photoLabel: {
    position: 'absolute', left: 16, bottom: 16,
    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
    fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
    color: 'var(--ed-ink)',
    background: 'var(--ed-bg)',
    padding: '4px 8px', borderRadius: 2,
    boxShadow: '0 1px 3px rgba(0,0,0,.15)',
  },
  motto: {
    fontFamily: '"Fraunces", Georgia, serif',
    fontWeight: 300, fontStyle: 'italic',
    fontSize: 38, lineHeight: 1.2,
    letterSpacing: '-0.02em',
    color: 'var(--ed-ink)',
    margin: 0,
  },
  mottoBy: {
    marginTop: 20,
    fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase',
    color: 'var(--ed-muted)',
    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
  },
  sectionLabel: {
    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
    fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
    color: 'var(--ed-muted)',
    display: 'flex', alignItems: 'center', gap: 12,
    marginBottom: 24,
  },
  ruleLine: { flex: 1, height: 1, background: 'var(--ed-rule)' },
  peopleRow: {
    display: 'grid',
    gridTemplateColumns: 'repeat(5, 1fr)',
    gap: 24,
    marginBottom: 72,
  },
  person: { paddingTop: 16, borderTop: '1px solid var(--ed-rule)' },
  personName: {
    fontFamily: '"Fraunces", Georgia, serif',
    fontWeight: 400, fontSize: 28,
    letterSpacing: '-0.01em',
    margin: '0 0 6px',
  },
  personRole: {
    fontSize: 12, letterSpacing: '0.15em', textTransform: 'uppercase',
    color: 'var(--ed-muted)',
    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
    marginBottom: 10,
  },
  personEmail: {
    fontSize: 13,
    color: 'var(--ed-accent)',
    textDecoration: 'none',
    borderBottom: '1px solid var(--ed-accent-soft)',
    paddingBottom: 1,
  },
  personMemorial: {
    fontFamily: '"Fraunces", Georgia, serif',
    fontStyle: 'italic',
    fontSize: 13,
    color: 'var(--ed-muted)',
    lineHeight: 1.5,
  },
  servicesGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 1,
    background: 'var(--ed-rule)',
    border: '1px solid var(--ed-rule)',
    marginBottom: 56,
  },
  serviceTile: {
    background: 'var(--ed-bg)',
    padding: '22px 22px 18px',
    textDecoration: 'none',
    color: 'var(--ed-ink)',
    display: 'flex', flexDirection: 'column', gap: 6,
    transition: 'background .15s',
    cursor: 'pointer',
    minHeight: 108,
    justifyContent: 'space-between',
    position: 'relative',
  },
  serviceHead: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' },
  serviceName: {
    fontFamily: '"Fraunces", Georgia, serif',
    fontWeight: 400, fontSize: 22,
    letterSpacing: '-0.01em',
  },
  serviceNum: {
    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
    fontSize: 10, color: 'var(--ed-muted)',
    letterSpacing: '0.1em',
  },
  serviceDesc: {
    fontSize: 13,
    color: 'var(--ed-ink-soft)',
    lineHeight: 1.45,
  },
  serviceStatusRow: {
    marginTop: 4,
    display: 'flex', alignItems: 'center', gap: 6,
    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
    fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase',
    color: 'var(--ed-muted)',
  },
  dot: (color) => ({
    display: 'inline-block', width: 6, height: 6, borderRadius: '50%',
    background: color,
  }),
  footer: {
    borderTop: '1px solid var(--ed-rule)',
    paddingTop: 20,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
    fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
    color: 'var(--ed-muted)',
  },
  footerLink: { color: 'var(--ed-muted)', textDecoration: 'none', borderBottom: '1px dotted var(--ed-muted)' },
};

const editorialCSS = `
  .ed-root {
    --ed-bg: #f5f0e6;
    --ed-ink: #221c14;
    --ed-ink-soft: #4a3f30;
    --ed-muted: #8a7a62;
    --ed-rule: #d9cfbe;
    --ed-placeholder-a: #ece3d0;
    --ed-placeholder-b: #e3d8c0;
    --ed-accent: #a0522d;
    --ed-accent-soft: #d9b89a;
    --ed-up: #5a8b4a;
    --ed-down: #b24a3c;
  }
  @media (prefers-color-scheme: dark) {
    .ed-root {
      --ed-bg: #1a1612;
      --ed-ink: #efe6d5;
      --ed-ink-soft: #c4b699;
      --ed-muted: #8a7a62;
      --ed-rule: #2e2620;
      --ed-placeholder-a: #23201b;
      --ed-placeholder-b: #2a2620;
      --ed-accent: #d9a26a;
      --ed-accent-soft: #5a4230;
      --ed-up: #7aa86a;
      --ed-down: #d46a5a;
    }
  }
  .ed-service:hover { background: rgba(160,82,45,0.06) !important; }
  @media (prefers-color-scheme: dark) {
    .ed-service:hover { background: rgba(217,162,106,0.08) !important; }
  }
  .ed-email:hover { color: var(--ed-ink) !important; }
  @media (max-width: 760px) {
    .ed-root { padding: 32px 24px 48px !important; }
    .ed-two { grid-template-columns: 1fr !important; }
    .ed-people { grid-template-columns: repeat(2, 1fr) !important; }
    .ed-services { grid-template-columns: 1fr !important; }
  }
`;

// Roman numerals for the masthead volume (years since the house was established).
const FOUNDED = 2006;
function toRoman(n) {
  const map = [
    ['M',1000],['CM',900],['D',500],['CD',400],['C',100],['XC',90],
    ['L',50],['XL',40],['X',10],['IX',9],['V',5],['IV',4],['I',1],
  ];
  let out = '';
  for (const [s, v] of map) { while (n >= v) { out += s; n -= v; } }
  return out;
}

function EditorialHome() {
  const now = new Date();
  const today = now.toLocaleDateString('en-US', {
    weekday: 'long', month: 'long', day: 'numeric', year: 'numeric',
  }).toUpperCase();
  const vol = toRoman(Math.max(1, now.getFullYear() - FOUNDED));
  const issue = String(now.getMonth() + 1).padStart(2, '0');
  const statusByService = useLiveStatus();

  return (
    <div className="ed-root" style={editorialStyles.page}>
      <style dangerouslySetInnerHTML={{ __html: editorialCSS }} />
      <div style={editorialStyles.grain} />

      <div style={editorialStyles.masthead}>
        <div style={editorialStyles.mastLeft}>
          <span style={editorialStyles.kicker}>Vol. {vol} · No. {issue}</span>
          <span style={editorialStyles.kicker}>Est. 2006</span>
        </div>
        <span style={editorialStyles.dateStamp}>{today}</span>
      </div>

      <h1 style={editorialStyles.title}>
        The Kaufman <span style={editorialStyles.titleItalic}>House</span>
      </h1>
      <p style={editorialStyles.deck}>
        A small private press, a quiet family server, and a front door
        for the people who live here. Come in, take your shoes off.
      </p>

      <div className="ed-two" style={{ ...editorialStyles.twoCol, marginBottom: 88 }}>
        <div style={editorialStyles.photoFrame}>
          <img src="img/family-web.jpg" alt="The Kaufman family" style={editorialStyles.photoImg} loading="eager" />
          <span style={editorialStyles.photoLabel}>// the kaufmans</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ ...editorialStyles.sectionLabel, marginBottom: 20 }}>
            <span>House Motto</span>
            <span style={editorialStyles.ruleLine} />
          </div>
          <blockquote style={editorialStyles.motto}>
            &ldquo;Be kind, eat well, and back everything up&mdash;<em>twice</em>.&rdquo;
          </blockquote>
          <div style={editorialStyles.mottoBy}>— House Rules, revised annually</div>
        </div>
      </div>

      <div style={editorialStyles.sectionLabel}>
        <span>The Residents</span>
        <span style={editorialStyles.ruleLine} />
        <span>05</span>
      </div>
      <div className="ed-people" style={editorialStyles.peopleRow}>
        {window.PEOPLE.map((p) => (
          <div key={p.name} style={editorialStyles.person}>
            <div style={editorialStyles.personRole}>{p.role}</div>
            <h3 style={editorialStyles.personName}>{p.name}</h3>
            {p.memorial ? (
              <div style={editorialStyles.personMemorial}>
                Forever loved.<br/>Forever here.
              </div>
            ) : p.email ? (
              <a href={`mailto:${p.email}`} className="ed-email" style={editorialStyles.personEmail}>
                {p.email.split('@')[0]}@…
              </a>
            ) : (
              <span style={{ ...editorialStyles.personMemorial, fontStyle: 'normal' }}>
                (too small for email)
              </span>
            )}
          </div>
        ))}
      </div>

      <div style={editorialStyles.sectionLabel}>
        <span>The House Services</span>
        <span style={editorialStyles.ruleLine} />
        <span>{String(window.SERVICES.length).padStart(2, '0')}</span>
      </div>
      <div className="ed-services" style={editorialStyles.servicesGrid}>
        {window.SERVICES.map((s, i) => {
          const st = statusByService[s.name];
          const dotColor = st === 'up' ? 'var(--ed-up)' : st === 'down' ? 'var(--ed-down)' : 'var(--ed-muted)';
          const label = st === 'up' ? 'UP' : st === 'down' ? 'DOWN' : st === 'loading' ? '···' : '—';
          return (
            <a key={s.name} href={s.url} className="ed-service" style={editorialStyles.serviceTile}>
              <div style={editorialStyles.serviceHead}>
                <span style={editorialStyles.serviceName}>{s.name}</span>
                <span style={editorialStyles.serviceNum}>{String(i + 1).padStart(2, '0')}</span>
              </div>
              <div style={editorialStyles.serviceDesc}>{s.desc}</div>
              <div style={editorialStyles.serviceStatusRow}>
                <span style={editorialStyles.dot(dotColor)} />{label}
              </div>
            </a>
          );
        })}
      </div>

      <div style={editorialStyles.footer}>
        <span>Powered by <a href="https://eddie.in" style={editorialStyles.footerLink}>EB Holdings</a> · v02.3.1</span>
        <a href="https://status.thekaufmanhouse.com" style={editorialStyles.footerLink}>All systems →</a>
      </div>
    </div>
  );
}

window.EditorialHome = EditorialHome;