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,#1a0520,#300a28)',
  'linear-gradient(135deg,#05101a,#0a2030)',
  'linear-gradient(135deg,#1a1005,#301a0a)',
  'linear-gradient(135deg,#0a0a1a,#181830)',
];

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 || 'Bold contemporary 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}</div>
        <div className="links">
          <a href="#works">Work</a>
          <a href="#about">About</a>
          {events.length > 0 && <a href="#shows">Shows</a>}
          {email && <a href={`mailto:${email}`}>Contact</a>}
        </div>
      </nav>

      <section className="hero-full">
        <div className="content">
          <h1>{artistName}</h1>
          <p>{tagline}</p>
          <a className="cta" href="#works">
            View Collection
          </a>
        </div>
      </section>

      <section className="works" id="works">
        <h2>Selected Works</h2>
        {paintings.length === 0 ? (
          <div className="empty">No paintings added yet.</div>
        ) : (
          <div className="works-grid">
            {paintings.map((p, i) => (
              <div className="work" key={i}>
                {p.image ? (
                  <img className="bg" src={p.image} alt={p.title} />
                ) : (
                  <div className="bg" style={{ background: GRADIENTS[i % GRADIENTS.length] }} />
                )}
                <div className="info">
                  <h3>{p.title}</h3>
                  <p>
                    {p.medium}
                    {p.year ? ` · ${p.year}` : ''}
                    {p.sold ? ' · SOLD' : p.price ? ` · $${Number(p.price).toLocaleString()}` : ''}
                  </p>
                </div>
              </div>
            ))}
          </div>
        )}
      </section>

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

      <footer className="footer">
        &copy; {year} {artistName}. All rights reserved.
        {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: #000;
          color: #fff;
          font-family: 'Segoe UI', system-ui, sans-serif;
        }
        .nav {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 10;
          padding: 20px 32px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: linear-gradient(rgba(0, 0, 0, 0.8), transparent);
        }
        .nav .logo {
          font-size: 20px;
          font-weight: 700;
          letter-spacing: 0.05em;
          text-transform: uppercase;
        }
        .nav .links {
          display: flex;
          gap: 20px;
          font-size: 13px;
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 0.08em;
        }
        .nav .links a {
          color: #fff;
          text-decoration: none;
          opacity: 0.7;
        }
        .nav .links a:hover {
          opacity: 1;
        }
        .hero-full {
          min-height: 70vh;
          position: relative;
          display: flex;
          align-items: flex-end;
          background: linear-gradient(160deg, #0a0a12, #1a0a18, #0a1218);
        }
        .hero-full .content {
          padding: 48px;
          max-width: 600px;
        }
        .hero-full h1 {
          font-size: 52px;
          font-weight: 800;
          line-height: 1.05;
          text-transform: uppercase;
          letter-spacing: -0.02em;
          color: #ff4d6a;
        }
        .hero-full p {
          font-size: 15px;
          color: #888;
          margin-top: 12px;
          line-height: 1.5;
        }
        .hero-full .cta {
          display: inline-block;
          margin-top: 20px;
          padding: 12px 28px;
          background: #ff4d6a;
          color: #000;
          font-weight: 700;
          font-size: 13px;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          text-decoration: none;
        }
        .works {
          padding: 40px 32px;
        }
        .works h2 {
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 0.2em;
          color: #555;
          margin-bottom: 24px;
        }
        .empty {
          color: #555;
          font-size: 14px;
          padding: 40px 0;
        }
        .works-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 4px;
        }
        .work {
          aspect-ratio: 4/3;
          position: relative;
          overflow: hidden;
        }
        .work .bg {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          transition: transform 0.5s;
        }
        .work:hover .bg {
          transform: scale(1.08);
        }
        .work .info {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 20px;
          background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
        }
        .work .info h3 {
          font-size: 16px;
          font-weight: 700;
          text-transform: uppercase;
        }
        .work .info p {
          font-size: 12px;
          color: #ff4d6a;
          margin-top: 2px;
        }
        .shows {
          padding: 32px;
          border-top: 1px solid #151515;
        }
        .shows h2 {
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 0.2em;
          color: #555;
          margin-bottom: 20px;
        }
        .show-list {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
          gap: 12px;
        }
        .show {
          background: #0d0d0d;
          padding: 14px 16px;
        }
        .s-title {
          font-size: 14px;
          font-weight: 700;
          text-transform: uppercase;
        }
        .s-date {
          font-size: 12px;
          color: #ff4d6a;
          margin-top: 4px;
        }
        .s-desc {
          font-size: 12px;
          color: #888;
          margin-top: 6px;
        }
        .footer {
          padding: 32px;
          text-align: center;
          font-size: 11px;
          color: #333;
          text-transform: uppercase;
          letter-spacing: 0.15em;
          border-top: 1px solid #151515;
        }
        .social {
          margin-top: 10px;
          display: flex;
          gap: 16px;
          justify-content: center;
        }
        .social a {
          color: #ff4d6a;
          text-decoration: none;
        }
      `}</style>
    </>
  );
}
