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 } };
}

const GRADIENTS = [
  'linear-gradient(135deg,#1a1520,#2a1f30)',
  'linear-gradient(135deg,#15191a,#1a2828)',
  'linear-gradient(135deg,#1a1815,#2a2518)',
  'linear-gradient(135deg,#151518,#1f1f2a)',
  'linear-gradient(135deg,#1a1518,#2a1820)',
  'linear-gradient(135deg,#18151a,#201828)',
];

export default function Home({ paintings, events, config }) {
  const artistName = config.artistName || config.brandName || 'Artist Name';
  const siteTitle = config.siteTitle || artistName;
  const tagline = config.tagline || 'FINE ART';
  const email = config.contact?.email || '';
  const social = config.socialLinks || {};

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

      <nav className="nav">
        <div className="logo">{artistName.toUpperCase()}</div>
        <div className="links">
          <a href="#gallery">Gallery</a>
          <a href="#about">About</a>
          {events.length > 0 && <a href="#events">Events</a>}
          {email && <a href={`mailto:${email}`}>Contact</a>}
        </div>
      </nav>

      <section className="hero">
        <h1>{artistName.toUpperCase()}</h1>
        <div className="line" />
        <p>{tagline.toUpperCase()}</p>
      </section>

      <section className="gallery" id="gallery">
        {paintings.length === 0 ? (
          <div className="empty">No paintings added yet.</div>
        ) : (
          paintings.map((p, i) => (
            <div className="item" key={i}>
              {p.image ? (
                <img className="bg" src={p.image} alt={p.title} />
              ) : (
                <div className="bg" style={{ background: GRADIENTS[i % GRADIENTS.length] }} />
              )}
              <div className="overlay">
                <div className="t">{p.title}</div>
                <div className="d">
                  {p.medium}
                  {p.price ? ` · $${Number(p.price).toLocaleString()}` : ''}
                </div>
                {p.sold && <div className="sold">SOLD</div>}
              </div>
            </div>
          ))
        )}
      </section>

      {events.length > 0 && (
        <section className="events" id="events">
          <h2>Events &amp; Classes</h2>
          <div className="event-list">
            {events.map((e, i) => (
              <div className="event" key={i}>
                <div className="e-title">{e.title}</div>
                <div className="e-date">{e.date}</div>
                {e.description && <div className="e-desc">{e.description}</div>}
              </div>
            ))}
          </div>
        </section>
      )}

      <footer className="footer">
        {artistName.toUpperCase()} FINE ART
        {config.socialLinks && Object.keys(social).length > 0 && (
          <div className="social">
            {Object.entries(social).map(([k, v]) =>
              v ? (
                <a key={k} href={v} target="_blank" rel="noreferrer">
                  {k}
                </a>
              ) : null
            )}
          </div>
        )}
      </footer>

      <style jsx global>{`
        * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        body {
          background: #0f0f13;
          color: #e8e8ed;
          font-family: 'Segoe UI', system-ui, sans-serif;
        }
        .nav {
          padding: 24px 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #1a1a22;
        }
        .nav .logo {
          font-size: 16px;
          font-weight: 200;
          letter-spacing: 0.25em;
          color: #c9a96e;
        }
        .nav .links {
          display: flex;
          gap: 24px;
          font-size: 13px;
          color: #71717a;
        }
        .nav .links a {
          color: #71717a;
          text-decoration: none;
        }
        .nav .links a:hover {
          color: #c9a96e;
        }
        .hero {
          text-align: center;
          padding: 80px 40px 48px;
        }
        .hero h1 {
          font-size: 42px;
          font-weight: 100;
          letter-spacing: 0.12em;
          color: #c9a96e;
        }
        .hero .line {
          width: 50px;
          height: 1px;
          background: linear-gradient(90deg, transparent, #c9a96e, transparent);
          margin: 16px auto;
        }
        .hero p {
          font-size: 14px;
          color: #71717a;
          letter-spacing: 0.1em;
        }
        .gallery {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 3px;
          padding: 0 40px 40px;
        }
        .gallery .empty {
          grid-column: 1 / -1;
          text-align: center;
          padding: 60px 0;
          color: #71717a;
          font-size: 14px;
        }
        .gallery .item {
          aspect-ratio: 1;
          position: relative;
          overflow: hidden;
        }
        .gallery .item .bg {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          transition: transform 0.4s;
        }
        .gallery .item:hover .bg {
          transform: scale(1.05);
        }
        .gallery .item .overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 16px;
          background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
          opacity: 0;
          transition: opacity 0.3s;
        }
        .gallery .item:hover .overlay {
          opacity: 1;
        }
        .overlay .t {
          font-size: 13px;
          font-weight: 500;
          letter-spacing: 0.08em;
        }
        .overlay .d {
          font-size: 11px;
          color: #c9a96e;
          margin-top: 2px;
        }
        .overlay .sold {
          font-size: 10px;
          color: #f87171;
          letter-spacing: 0.1em;
          margin-top: 4px;
        }
        .events {
          padding: 48px 40px;
          border-top: 1px solid #1a1a22;
        }
        .events h2 {
          font-size: 22px;
          font-weight: 200;
          letter-spacing: 0.1em;
          color: #c9a96e;
          text-align: center;
          margin-bottom: 24px;
        }
        .event-list {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
          gap: 16px;
          max-width: 800px;
          margin: 0 auto;
        }
        .event {
          background: #15151d;
          border: 1px solid #1a1a22;
          border-radius: 8px;
          padding: 16px;
        }
        .e-title {
          font-size: 14px;
          font-weight: 500;
        }
        .e-date {
          font-size: 12px;
          color: #c9a96e;
          margin-top: 4px;
        }
        .e-desc {
          font-size: 12px;
          color: #71717a;
          margin-top: 6px;
        }
        .footer {
          text-align: center;
          padding: 32px;
          border-top: 1px solid #1a1a22;
          font-size: 11px;
          color: #71717a;
          letter-spacing: 0.15em;
        }
        .social {
          margin-top: 10px;
          display: flex;
          gap: 16px;
          justify-content: center;
          text-transform: capitalize;
        }
        .social a {
          color: #c9a96e;
          text-decoration: none;
          letter-spacing: 0.05em;
        }
      `}</style>
    </>
  );
}
