/* AccessRow — paper-coloured 4-column stats bar shown directly under the hero. */
const ACCESS_ROW_CSS = `
.v-access-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--v-paper); border-bottom: 1px solid var(--v-border); }
.v-access-row .access-cell { padding: 28px 40px 30px; border-right: 1px solid rgba(38,30,22,0.10); }
.v-access-row .access-cell:last-child { border-right: none; }
.v-access-row .access-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--v-ink-muted); display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.v-access-row .access-label::before { content: ''; width: 24px; height: 1px; background: var(--v-bordeaux); }
.v-access-row .access-value { font-family: var(--font-serif); font-weight: 300; font-size: 32px; line-height: 1.05; letter-spacing: -0.01em; color: var(--v-ink); }
.v-access-row .access-value .ac-unit { font-size: 13px; font-family: var(--font-mono); font-weight: 400; letter-spacing: 1px; color: var(--v-ink-muted); margin-left: 6px; text-transform: uppercase; }
.v-access-row .access-value em { font-style: italic; color: var(--v-bordeaux); font-weight: 400; }

@media (max-width: 1100px) {
  .v-access-row .access-cell { padding: 22px 28px 24px; }
  .v-access-row .access-value { font-size: 26px; }
}
@media (max-width: 900px) {
  .v-access-row { grid-template-columns: 1fr 1fr; }
  .v-access-row .access-cell:nth-child(2) { border-right: none; }
  .v-access-row .access-cell:nth-child(1),
  .v-access-row .access-cell:nth-child(2) { border-bottom: 1px solid rgba(38,30,22,0.10); }
}
@media (max-width: 560px) {
  .v-access-row { grid-template-columns: 1fr; }
  .v-access-row .access-cell { padding: 20px 22px 22px; border-right: none; border-bottom: 1px solid rgba(38,30,22,0.10); }
  .v-access-row .access-cell:last-child { border-bottom: none; }
  .v-access-row .access-value { font-size: 24px; }
}
`;

const AccessRow = () => (
  <>
    <style dangerouslySetInnerHTML={{ __html: ACCESS_ROW_CSS }} />
    <section className="v-access-row" data-screen-label="Access">
      <div className="access-cell">
        <div className="access-label">Zugang</div>
        <div className="access-value"><em>ab 60.000 € EK</em></div>
      </div>
      <div className="access-cell">
        <div className="access-label">Setup</div>
        <div className="access-value">100 % remote</div>
      </div>
      <div className="access-cell">
        <div className="access-label">Finanzierung</div>
        <div className="access-value">70 % Ohne Bonität<br/><span className="ac-unit">80 % ab 3. Objekt</span></div>
      </div>
      <div className="access-cell">
        <div className="access-label">Bonus</div>
        <div className="access-value"><em>US-Credit Building</em></div>
      </div>
    </section>
  </>
);

window.AccessRow = AccessRow;