import fs from 'fs';
import path from 'path';
import Head from 'next/head';

function readJSON(file, fallback) {
  try {
    const p = path.join(process.cwd(), 'data', file);
    return JSON.parse(fs.readFileSync(p, 'utf-8'));
  } catch {
    return fallback;
  }
}

export async function getStaticProps() {
  const paintings = readJSON('paintings.json', []);
  const events = readJSON('events.json', []);
  const config = readJSON('config.json', {});
  return { props: { paintings, events, config, year: new Date().getFullYear() } };
}

const GRADIENTS = [
  'linear-gradient(135deg,#e8ddd0,#d4c8b8)',
  'linear-gradient(135deg,#d0dce0,#b8c8d0)',
  'linear-gradient(135deg,#dde0d0,#c8d0b8)',
  'linear-gradient(135deg,#e0d8d0,#d0c0b0)',
  'linear-gradient(135deg,#d0d0e0,#b8b8d0)',
  'linear-gradient(135deg,#e0dcd0,#d4c8b0)',
];

export default function Home({ paintings, events, config, year }) {
  const artistName = config.artistName || config.brandName || 'Artist Name';
  const siteTitle = config.siteTitle || artistName;
  const tagline = config.tagline || 'Paintings rooted in the classical tradition.';
  const email = config.contact?.email || '';

  return (
    <>
      <Head>
        <title>{siteTitle}</title>
        <meta name="description" content={`${artistName} — ${tagline}`} />
      </Head>

      <nav className="nav">
        <div className="logo">{artistName}</div>
        <div className="links">
          <a href="#gallery">Portfolio</a>
          <a href="#about">Biography</a>
          {events.length > 0 && <a href="#exhibitions">Exhibitions</a>}
          {email && <a href={`mailto:${email}`}>Inquiries</a>}
        </div>
      </nav>

      <section className="hero">
        <h1>{artistName}</h1>
        <div className="ornament">&mdash; &diams; &mdash;</div>
        <p>{tagline}</p>
      </section>

      <section className="gallery" id="gallery">
        {paintings.length === 0 ? (
          <div className="empty">No paintings added yet.</div>
        ) : (
          paintings.map((p, i) => (
            <div className="card" key={i}>
              <div className="img">
                {p.image ? (
                  <img src={p.image} alt={p.title} />
                ) : (
                  <div className="grad" style={{ background: GRADIENTS[i % GRADIENTS.length] }} />
                )}
              </div>
              <div className="details">
                <h3>{p.title}</h3>
                <div className="meta">
                  {p.medium}
                  {p.dimensions ? ` · ${p.dimensions}` : ''}
                </div>
                {p.sold ? (
                  <div className="sold">Sold</div>
                ) : p.price ? (
                  <div className="price">${Number(p.price).toLocaleString()}</div>
                ) : null}
              </div>
            </div>
          ))
        )}
      </section>

      {events.length > 0 && (
        <section className="section" id="exhibitions">
          <h2>Upcoming Exhibitions</h2>
          {events.map((e, i) => (
            <p key={i}>
              {e.title} &middot; {e.date}
            </p>
          ))}
        </section>
      )}

      <footer className="footer">
        &copy; {year} {artistName}. All artwork and images are copyright protected.
      </footer>

      <style jsx global>{`
        * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        body {
          background: #faf8f4;
          color: #2a2420;
          font-family: Georgia, 'Times New Roman', serif;
        }
        .nav {
          padding: 20px 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 2px solid #e8e0d4;
        }
        .nav .logo {
          font-size: 18px;
          font-weight: 400;
          letter-spacing: 0.08em;
          color: #6b4c30;
        }
        .nav .links {
          display: flex;
          gap: 24px;
          font-size: 13px;
          color: #8a7a6a;
        }
        .nav .links a {
          color: #8a7a6a;
          text-decoration: none;
        }
        .hero {
          text-align: center;
          padding: 60px 40px 40px;
          background: linear-gradient(180deg, #f5f0e8, #faf8f4);
        }
        .hero h1 {
          font-size: 36px;
          font-weight: 400;
          color: #4a3828;
          letter-spacing: 0.04em;
        }
        .hero .ornament {
          color: #c8a87080;
          font-size: 24px;
          margin: 12px 0;
        }
        .hero p {
          font-size: 15px;
          color: #8a7a6a;
          font-style: italic;
          max-width: 480px;
          margin: 0 auto;
        }
        .gallery {
          padding: 32px 40px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
        }
        .empty {
          grid-column: 1 / -1;
          text-align: center;
          padding: 60px 0;
          color: #8a7a6a;
          font-style: italic;
        }
        .card {
          background: #fff;
          border: 1px solid #e8e0d4;
          border-radius: 2px;
          overflow: hidden;
          transition: box-shadow 0.3s;
        }
        .card:hover {
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
        .card .img {
          aspect-ratio: 3/4;
          position: relative;
        }
        .card .img img,
        .card .img .grad {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
        .card .details {
          padding: 16px;
          text-align: center;
        }
        .card .details h3 {
          font-size: 15px;
          font-weight: 400;
          color: #4a3828;
        }
        .card .details .meta {
          font-size: 12px;
          color: #8a7a6a;
          margin-top: 4px;
        }
        .card .details .price {
          font-size: 14px;
          color: #6b4c30;
          font-weight: 600;
          margin-top: 6px;
        }
        .card .details .sold {
          font-size: 12px;
          color: #a05840;
          font-weight: 600;
          margin-top: 6px;
          letter-spacing: 0.08em;
        }
        .section {
          padding: 32px 40px;
          text-align: center;
          border-top: 1px solid #e8e0d4;
        }
        .section h2 {
          font-size: 20px;
          font-weight: 400;
          color: #4a3828;
          margin-bottom: 8px;
        }
        .section p {
          font-size: 14px;
          color: #8a7a6a;
          max-width: 500px;
          margin: 4px auto;
        }
        .footer {
          text-align: center;
          padding: 24px;
          border-top: 2px solid #e8e0d4;
          font-size: 12px;
          color: #8a7a6a;
        }
      `}</style>
    </>
  );
}
