function DailyLogs({ logs }) {
  if (!logs || logs.length === 0) return null;
  
  return (
    <section id="daily-logs">
      <div className="container">
        <div style={{ marginBottom: 22 }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Evolution</div>
          <h2 className="h-section">Day by Day</h2>
          <p className="lead">
            A chronological record of daily portfolio performance, trades, and holdings.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
          {logs.map(log => (
            <div key={log.date} className="card" style={{ padding: "24px 32px" }}>
              <div className="mono muted" style={{ fontSize: "13px", marginBottom: "16px" }}>
                {new Date(log.date).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
              </div>
              <div style={{ whiteSpace: "pre-wrap", fontSize: "14px", lineHeight: "1.6", color: "var(--ink-2)", fontFamily: "var(--sans)" }}>
                {/* Basic markdown parsing to replace # and ** */}
                {log.content.split('\n').map((line, idx) => {
                  if (line.startsWith('# ')) return <h3 key={idx} style={{ marginTop: 0 }}>{line.substring(2)}</h3>;
                  if (line.startsWith('## ')) return <h4 key={idx} style={{ marginTop: '16px', marginBottom: '8px' }}>{line.substring(3)}</h4>;
                  if (line.startsWith('- ')) {
                    const content = line.substring(2).replace(/\*\*([^*]+)\*\*/g, (match, p1) => `<strong>${p1}</strong>`);
                    return <div key={idx} style={{ display: 'list-item', marginLeft: '20px' }} dangerouslySetInnerHTML={{ __html: content }} />;
                  }
                  if (line.startsWith('---')) return <hr key={idx} style={{ margin: '16px 0', border: 'none', borderTop: '1px solid var(--line)' }} />;
                  
                  const text = line.replace(/\*\*([^*]+)\*\*/g, (match, p1) => `<strong>${p1}</strong>`)
                                   .replace(/\*([^*]+)\*/g, (match, p1) => `<em>${p1}</em>`);
                  return <p key={idx} style={{ margin: '4px 0' }} dangerouslySetInnerHTML={{ __html: text || '<br/>' }} />;
                })}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}