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,#e8d8c8,#d0c0a8)',
  'linear-gradient(135deg,#c8d8e8,#a8c0d0)',
  'linear-gradient(135deg,#d8e8c8,#c0d0a8)',
  'linear-gradient(135deg,#e8c8d0,#d0a8b8)',
];

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 ||
    'Every piece begins with a moment — a color, a conversation, a memory.';
  const email = config.contact?.email || '';

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

      <nav className="nav">
        <div className="logo">
          {artistName}
          <span>.</span>
        </div>
        <div className="links">
          <a href="#gallery">Work</a>
          <a href="#process">Process</a>
          {events.length > 0 && <a href="#classes">Classes</a>}
          {email && <a href={`mailto:${email}`}>Contact</a>}
        </div>
      </nav>

      <section className="hero-split">
        <div className="hero-img">
          <div className="tag">In the studio</div>
        </div>
        <div className="hero-text">
          <div className="hello">Welcome to my studio</div>
          <h1>
            I&apos;m <strong>{artistName}</strong>, and I paint stories.
          </h1>
          <p>{tagline}</p>
          <a className="btn" href="#gallery">
            Explore My Work
          </a>
        </div>
      </section>

      <div className="section-title">My Process</div>
      <section className="process">
        <div className="process-card">
          <div className="p-img p1" />
          <div className="p-info">
            <h3>Sketching</h3>
            <p>Every painting starts with pencil studies and color exploration</p>
          </div>
        </div>
        <div className="process-card">
          <div className="p-img p2" />
          <div className="p-info">
            <h3>Layering</h3>
            <p>Building depth through transparent washes and bold strokes</p>
          </div>
        </div>
        <div className="process-card">
          <div className="p-img p3" />
          <div className="p-info">
            <h3>Finishing</h3>
            <p>Final details, varnishing, and preparing for display</p>
          </div>
        </div>
      </section>

      <div className="section-title">Recent Work</div>
      <section className="works-strip" id="gallery">
        {paintings.length === 0 ? (
          <div className="empty">No paintings added yet.</div>
        ) : (
          <div className="strip">
            {paintings.map((p, i) => (
              <div className="strip-item" key={i} title={p.title}>
                {p.image ? (
                  <img src={p.image} alt={p.title} />
                ) : (
                  <div className="grad" style={{ background: GRADIENTS[i % GRADIENTS.length] }} />
                )}
                {p.sold && <div className="sold-tag">Sold</div>}
              </div>
            ))}
          </div>
        )}
      </section>

      <section className="cta-bar" id="classes">
        {events.length > 0 ? (
          <>
            <h2>
              Upcoming <span>Classes &amp; Events</span>
            </h2>
            <div className="cta-events">
              {events.map((e, i) => (
                <p key={i}>
                  {e.title} &middot; {e.date}
                </p>
              ))}
            </div>
          </>
        ) : (
          <>
            <h2>
              Want to learn to <span>paint</span>?
            </h2>
            <p>Workshops and classes coming soon — check back for updates.</p>
          </>
        )}
      </section>

      <footer className="footer">
        &copy; {year} {artistName}. Made with ArtStudio Pro.
      </footer>

      <style jsx global>{`
        * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        body {
          background: #f5f5f0;
          color: #1a1a1a;
          font-family: 'Segoe UI', system-ui, sans-serif;
        }
        .nav {
          padding: 16px 32px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #fff;
          border-bottom: 1px solid #e5e5e0;
        }
        .nav .logo {
          font-size: 15px;
          font-weight: 700;
          letter-spacing: 0.02em;
        }
        .nav .logo span {
          color: #e85d45;
        }
        .nav .links {
          display: flex;
          gap: 20px;
          font-size: 13px;
          color: #666;
        }
        .nav .links a {
          color: #666;
          text-decoration: none;
        }
        .hero-split {
          display: grid;
          grid-template-columns: 1fr 1fr;
          min-height: 60vh;
        }
        .hero-img {
          background: linear-gradient(135deg, #e8ddd0, #d4c0a8);
          position: relative;
        }
        .hero-img .tag {
          position: absolute;
          bottom: 16px;
          left: 16px;
          background: rgba(0, 0, 0, 0.7);
          color: #fff;
          font-size: 11px;
          padding: 4px 10px;
          border-radius: 3px;
        }
        .hero-text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 48px;
          background: #fff;
        }
        .hero-text .hello {
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 0.15em;
          color: #e85d45;
          margin-bottom: 8px;
        }
        .hero-text h1 {
          font-size: 32px;
          font-weight: 300;
          line-height: 1.2;
        }
        .hero-text h1 strong {
          font-weight: 700;
        }
        .hero-text p {
          font-size: 14px;
          color: #666;
          margin-top: 12px;
          line-height: 1.6;
        }
        .hero-text .btn {
          display: inline-block;
          margin-top: 20px;
          padding: 10px 24px;
          background: #1a1a1a;
          color: #fff;
          font-size: 13px;
          font-weight: 600;
          border-radius: 6px;
          text-decoration: none;
        }
        .section-title {
          padding: 32px 32px 0;
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 0.15em;
          color: #999;
        }
        .process {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
          padding: 16px 32px 32px;
        }
        .process-card {
          background: #fff;
          border-radius: 8px;
          overflow: hidden;
          border: 1px solid #e5e5e0;
        }
        .process-card .p-img {
          aspect-ratio: 16/9;
        }
        .p1 {
          background: linear-gradient(135deg, #f0e8dc, #e0d0c0);
        }
        .p2 {
          background: linear-gradient(135deg, #dce0f0, #c0c8e0);
        }
        .p3 {
          background: linear-gradient(135deg, #e0f0e0, #c0dcc0);
        }
        .process-card .p-info {
          padding: 14px;
        }
        .process-card .p-info h3 {
          font-size: 14px;
          font-weight: 600;
        }
        .process-card .p-info p {
          font-size: 12px;
          color: #888;
          margin-top: 4px;
          line-height: 1.4;
        }
        .works-strip {
          padding: 0 32px 32px;
        }
        .empty {
          text-align: center;
          padding: 40px 0;
          color: #999;
          font-size: 14px;
        }
        .strip {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 8px;
        }
        .strip-item {
          aspect-ratio: 1;
          border-radius: 6px;
          position: relative;
          overflow: hidden;
        }
        .strip-item img,
        .strip-item .grad {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
        .strip-item .sold-tag {
          position: absolute;
          top: 6px;
          right: 6px;
          background: rgba(0, 0, 0, 0.75);
          color: #fff;
          font-size: 10px;
          padding: 2px 8px;
          border-radius: 10px;
          letter-spacing: 0.05em;
        }
        .cta-bar {
          background: #1a1a1a;
          color: #fff;
          padding: 32px;
          text-align: center;
        }
        .cta-bar h2 {
          font-size: 20px;
          font-weight: 300;
        }
        .cta-bar h2 span {
          color: #e85d45;
        }
        .cta-bar p {
          font-size: 13px;
          color: #888;
          margin-top: 6px;
        }
        .cta-events p {
          color: #ccc;
          font-size: 13px;
          margin-top: 6px;
        }
        .footer {
          padding: 20px 32px;
          text-align: center;
          font-size: 12px;
          color: #999;
          border-top: 1px solid #e5e5e0;
        }
      `}</style>
    </>
  );
}
