const { useState } = React;

// ── Gedeelde componenten ─────────────────────────────────────────────

function Cloud({ style = {} }) {
  return (
    <svg viewBox="0 0 260 110" style={{ display: 'block', ...style }}>
      <ellipse cx="130" cy="90" rx="112" ry="24" fill="white" fillOpacity="0.9" />
      <circle cx="85"  cy="74" r="36" fill="white" fillOpacity="0.9" />
      <circle cx="128" cy="60" r="44" fill="white" fillOpacity="0.9" />
      <circle cx="170" cy="72" r="32" fill="white" fillOpacity="0.9" />
      <circle cx="54"  cy="82" r="22" fill="white" fillOpacity="0.9" />
      <circle cx="204" cy="80" r="20" fill="white" fillOpacity="0.9" />
    </svg>
  );
}

function ProductCard({ name, price, emoji, bg, categorie }) {
  return (
    <div className="product-card">
      <div style={{
        height: 230,
        background: bg,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        position: 'relative', overflow: 'hidden', fontSize: 52,
      }}>
        <div style={{ position: 'absolute', top: -30, right: -30, width: 120, height: 120, background: 'rgba(255,255,255,0.2)', borderRadius: '50%' }} />
        <div style={{ position: 'absolute', bottom: -20, left: -20, width: 80, height: 80, background: 'rgba(255,255,255,0.15)', borderRadius: '50%' }} />
        {emoji}
      </div>
      <div style={{ padding: '22px 24px' }}>
        <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 700, color: '#C8693A', letterSpacing: '1.5px', textTransform: 'uppercase', marginBottom: 8 }}>
          {categorie}
        </div>
        <div style={{ fontFamily: 'Fraunces, serif', fontSize: 18, color: '#1C1410', fontWeight: 500, marginBottom: 14, lineHeight: 1.3 }}>
          {name}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 15, color: '#1C1410', fontWeight: 700 }}>€ {price}</div>
          <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, color: '#C8693A', fontWeight: 600 }}>Bekijk →</div>
        </div>
      </div>
    </div>
  );
}

// ── Nav ─────────────────────────────────────────────────────────────

function Nav() {
  const [menuOpen, setMenuOpen] = useState(false);
  const links = ['Collectie', 'Over mij', 'Werkwijze', 'Contact'];

  return (
    <>
      <nav style={{
        height: 72,
        position: 'sticky', top: 0, zIndex: 100,
        background: 'rgba(250,247,242,0.95)',
        backdropFilter: 'blur(14px)',
        borderBottom: '1px solid rgba(200,105,58,0.1)',
      }}>
        <div className="nav-inner">
          <a href="#" style={{ fontFamily: 'Fraunces, serif', fontSize: 22, fontWeight: 500, color: '#1C1410' }}>
            Hemels <em style={{ fontStyle: 'italic', color: '#C8693A' }}>Handgemaakt</em>
          </a>

          <div className="nav-links">
            {links.map(l => (
              <a key={l} href={`#${l.toLowerCase().replace(' ', '-')}`} className="nav-link">{l}</a>
            ))}
            <a href="#contact" className="btn-primary" style={{ padding: '9px 24px', fontSize: 14 }}>
              Bestel op maat
            </a>
          </div>

          <button className="nav-hamburger" onClick={() => setMenuOpen(true)} aria-label="Menu openen">
            <div style={{ width: 24, height: 2, background: '#1C1410', borderRadius: 2 }} />
            <div style={{ width: 24, height: 2, background: '#1C1410', borderRadius: 2 }} />
            <div style={{ width: 18, height: 2, background: '#1C1410', borderRadius: 2 }} />
          </button>
        </div>
      </nav>

      {menuOpen && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 200,
          background: '#FAF7F2',
          display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center', gap: 40,
        }}>
          <button
            onClick={() => setMenuOpen(false)}
            style={{ position: 'absolute', top: 24, right: 28, background: 'none', border: 'none', fontSize: 26, color: '#1C1410' }}
            aria-label="Menu sluiten"
          >✕</button>
          {links.map(l => (
            <a
              key={l}
              href={`#${l.toLowerCase().replace(' ', '-')}`}
              onClick={() => setMenuOpen(false)}
              style={{ fontFamily: 'Fraunces, serif', fontSize: 36, fontWeight: 500, color: '#1C1410' }}
            >{l}</a>
          ))}
          <a href="#contact" onClick={() => setMenuOpen(false)} className="btn-primary" style={{ marginTop: 8, fontSize: 16, padding: '14px 40px' }}>
            Bestel op maat
          </a>
        </div>
      )}
    </>
  );
}

// ── Hero ─────────────────────────────────────────────────────────────

function Hero() {
  return (
    <section style={{
      position: 'relative',
      minHeight: 640,
      background: 'linear-gradient(150deg, #F8CFA0 0%, #F5DFC0 22%, #F5EAD8 55%, #FAF7F2 100%)',
      display: 'flex', alignItems: 'center',
      overflow: 'hidden',
    }}>
      {/* Clouds — rechterzijde als decoratief element */}
      <Cloud style={{ position: 'absolute', top: -10, right: -80, width: 500, opacity: 0.75 }} />
      <Cloud style={{ position: 'absolute', bottom: 40, right: 100, width: 360, opacity: 0.65 }} />
      <Cloud style={{ position: 'absolute', bottom: -20, right: -40, width: 280, opacity: 0.5 }} />
      <Cloud style={{ position: 'absolute', top: 60, right: 280, width: 220, opacity: 0.4 }} />

      <div className="hero-inner" style={{ position: 'relative', zIndex: 2, maxWidth: 680, padding: '80px 80px' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          background: 'rgba(200,105,58,0.12)', color: '#C8693A',
          padding: '6px 16px', borderRadius: 100,
          fontFamily: 'DM Sans, sans-serif',
          fontSize: 11, fontWeight: 700, letterSpacing: '2.5px', textTransform: 'uppercase',
          marginBottom: 28,
        }}>
          <span>✦</span><span>Handgemaakt met liefde</span>
        </div>

        <h1 className="hero-title">
          Elk stukje stof<br />
          <em style={{ fontStyle: 'italic', color: '#C8693A' }}>vertelt een verhaal</em>
        </h1>

        <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 18, lineHeight: 1.7, color: '#5C4030', margin: '0 0 40px', maxWidth: 520 }}>
          Unieke handgemaakte textielkunst door Sabrina. Van knusse quilts tot borduurwerk — allemaal met zorg en aandacht gemaakt.
        </p>

        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <a href="#collectie" className="btn-primary">Bekijk de collectie</a>
          <a href="#over-mij" className="btn-outline">Over mij</a>
        </div>
      </div>
    </section>
  );
}

// ── Tagline strip ────────────────────────────────────────────────────

function Strip() {
  return (
    <div className="tagline-strip" style={{ background: '#2A1A10', color: '#C8A07A' }}>
      {['✦  Uniek & op maat gemaakt', '✦  Met biologisch katoen', '✦  Duurzaam & eerlijk', '✦  Gratis verzending in NL'].map((t, i) => (
        <span key={i} style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 13, fontWeight: 500, letterSpacing: '0.5px' }}>{t}</span>
      ))}
    </div>
  );
}

// ── Over mij ─────────────────────────────────────────────────────────

function About() {
  return (
    <section id="over-mij" className="section-pad" style={{ background: '#FAF7F2' }}>
      <div className="grid-2">
        {/* Foto-placeholder */}
        <div style={{
          height: 540,
          background: 'linear-gradient(150deg, #F5D8B8 0%, #EEC59A 45%, #E8B080 100%)',
          borderRadius: 24,
          display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
          overflow: 'hidden', position: 'relative',
        }}>
          {/* Decoratieve cirkels */}
          <div style={{ position: 'absolute', top: 28, left: 28, width: 90, height: 90, background: 'rgba(255,255,255,0.2)', borderRadius: '50%' }} />
          <div style={{ position: 'absolute', top: 80, right: 36, width: 56, height: 56, background: 'rgba(255,255,255,0.15)', borderRadius: '50%' }} />
          {/* Silhouet */}
          <div style={{ width: 200, height: 340, background: 'linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.15) 100%)', borderRadius: '100px 100px 0 0' }} />
        </div>

        <div>
          <span className="section-label">Over mij</span>
          <h2 className="section-title">
            Hallo, ik ben<br />
            <em style={{ fontStyle: 'italic', color: '#C8693A' }}>Sabrina</em>
          </h2>
          <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, lineHeight: 1.8, color: '#5C4030', margin: '0 0 20px' }}>
            Al van kleins af aan ben ik gefascineerd door stof, patronen en de magie van naaien. Wat ooit begon als hobby is uitgegroeid tot mijn passie en mijn bedrijf.
          </p>
          <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, lineHeight: 1.8, color: '#5C4030', margin: '0 0 40px' }}>
            Elk item dat ik maak is uniek — doorspekt met liefde, aandacht en de beste materialen. Ik geloof in duurzame mode en eerlijke productie, direct vanuit mijn atelier in Nederland.
          </p>
          <div style={{ display: 'flex', gap: 48 }}>
            {[['150+', 'Blije klanten'], ['5 jaar', 'Ervaring'], ['100%', 'Handgemaakt']].map(([n, l]) => (
              <div key={l}>
                <div style={{ fontFamily: 'Fraunces, serif', fontSize: 36, fontWeight: 500, color: '#C8693A', lineHeight: 1 }}>{n}</div>
                <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 13, color: '#9A7860', fontWeight: 600, marginTop: 6 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Collectie ────────────────────────────────────────────────────────

function Collectie() {
  const producten = [
    { name: 'Gebloemde Quilt',      price: '185', emoji: '🌸', categorie: 'Quilts & Dekens',  bg: 'linear-gradient(135deg, #F5C8CC 0%, #EAA8B8 100%)' },
    { name: 'Geborduurde Tas',      price: '65',  emoji: '👜', categorie: 'Tassen',            bg: 'linear-gradient(135deg, #F5D8B8 0%, #E8C090 100%)' },
    { name: 'Babydeken Mint',       price: '95',  emoji: '🍃', categorie: 'Quilts & Dekens',  bg: 'linear-gradient(135deg, #C8DCC8 0%, #A8C8A8 100%)' },
    { name: 'Kussenhoes Vlinders',  price: '45',  emoji: '🦋', categorie: 'Woondecoratie',    bg: 'linear-gradient(135deg, #E8CCE0 0%, #D4A8C8 100%)' },
    { name: 'Linnen Jurk',          price: '145', emoji: '👗', categorie: 'Kleding',           bg: 'linear-gradient(135deg, #F0DCC0 0%, #E0C898 100%)' },
    { name: 'Speelmat Bosdieren',   price: '120', emoji: '🦔', categorie: 'Kinderkamer',       bg: 'linear-gradient(135deg, #C8D8B8 0%, #A8C090 100%)' },
  ];

  return (
    <section id="collectie" className="section-pad-sm" style={{ background: '#F5EDE0' }}>
      <div style={{ textAlign: 'center', marginBottom: 64 }}>
        <span className="section-label">De collectie</span>
        <h2 className="section-title" style={{ margin: '0 0 16px' }}>Gemaakt met zorg</h2>
        <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, color: '#7A5C44', maxWidth: 480, margin: '0 auto', lineHeight: 1.65 }}>
          Elk stuk is met de hand gemaakt en op aanvraag te personaliseren.
        </p>
      </div>

      <div className="grid-3">
        {producten.map(p => <ProductCard key={p.name} {...p} />)}
      </div>

      <div style={{ textAlign: 'center', marginTop: 52 }}>
        <a href="#contact" className="btn-primary" style={{ fontSize: 15, padding: '14px 44px' }}>
          Bestel op maat
        </a>
      </div>
    </section>
  );
}

// ── Werkwijze ────────────────────────────────────────────────────────

function Werkwijze() {
  const stappen = [
    { n: '01', title: 'Jouw idee',   text: 'Stuur me een berichtje over wat je in gedachten hebt — een quilt, tas of iets heel bijzonders.' },
    { n: '02', title: 'Ontwerp',     text: 'Samen bespreken we kleuren, maten en materialen. Ik maak een schets ter goedkeuring.' },
    { n: '03', title: 'Maakproces',  text: 'Met zorg en aandacht geef ik jouw idee vorm — volledig met de hand gemaakt in mijn atelier.' },
    { n: '04', title: 'Bezorging',   text: 'Je bijzondere stuk wordt zorgvuldig verpakt en binnen 1–3 werkdagen bezorgd.' },
  ];

  return (
    <section id="werkwijze" className="section-pad" style={{ background: '#FAF7F2' }}>
      <div style={{ textAlign: 'center', marginBottom: 72 }}>
        <span className="section-label">Werkwijze</span>
        <h2 className="section-title" style={{ margin: 0 }}>Van wens tot werkelijkheid</h2>
      </div>

      <div className="grid-4">
        {stappen.map(({ n, title, text }) => (
          <div key={n} className="stap-card">
            <div style={{ fontFamily: 'Fraunces, serif', fontSize: 54, fontWeight: 500, color: '#F0D0B0', marginBottom: 16, lineHeight: 1 }}>{n}</div>
            <h3 style={{ fontFamily: 'Fraunces, serif', fontSize: 22, fontWeight: 500, margin: '0 0 12px', color: '#1C1410' }}>{title}</h3>
            <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, lineHeight: 1.7, color: '#7A5C44', margin: 0 }}>{text}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── Testimonials ─────────────────────────────────────────────────────

function Testimonials() {
  const reviews = [
    { tekst: '"De quilt is absoluut prachtig! Precies zoals ik het me had voorgesteld. Sabrina denkt echt mee en de kwaliteit is tiptop."', naam: 'Emma V.' },
    { tekst: '"Mijn dochter is dol op haar speelmat! Zo mooi afgewerkt en de kleuren zijn perfect. Zeker voor herhaling vatbaar."',        naam: 'Laura M.' },
    { tekst: '"De geborduurde tas is een pareltje. Ik krijg er overal complimenten op. Dank je wel Sabrina!"',                             naam: 'Noor B.' },
  ];

  return (
    <section style={{ background: '#F5EDE0' }} className="section-pad-sm">
      <div style={{ textAlign: 'center', marginBottom: 60 }}>
        <h2 className="section-title" style={{ margin: 0 }}>Wat anderen zeggen</h2>
      </div>
      <div className="grid-3">
        {reviews.map(({ tekst, naam }) => (
          <div key={naam} className="review-card">
            <div style={{ fontFamily: 'Fraunces, serif', fontSize: 48, color: '#E8C49A', lineHeight: 1, marginBottom: 16 }}>"</div>
            <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 15, lineHeight: 1.75, color: '#5C4030', margin: '0 0 24px', fontStyle: 'italic' }}>{tekst}</p>
            <div style={{ fontFamily: 'DM Sans, sans-serif', fontWeight: 700, color: '#1C1410', fontSize: 14 }}>{naam}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── CTA ──────────────────────────────────────────────────────────────

function CTA() {
  return (
    <section id="contact" className="section-pad" style={{
      position: 'relative', overflow: 'hidden', textAlign: 'center',
      background: 'linear-gradient(160deg, #F8CFA0 0%, #F5E0C0 30%, #F5EAD8 65%, #FAF7F2 100%)',
    }}>
      <Cloud style={{ position: 'absolute', bottom: -16, left: '50%', transform: 'translateX(-50%)', width: 700, opacity: 0.5 }} />
      <Cloud style={{ position: 'absolute', bottom: 0, left: -120, width: 380, opacity: 0.35 }} />
      <Cloud style={{ position: 'absolute', bottom: 20, right: -100, width: 340, opacity: 0.35 }} />

      <div style={{ position: 'relative', zIndex: 2 }}>
        <h2 className="section-title" style={{ fontSize: 52, marginBottom: 20 }}>
          Iets bijzonders<br />
          <em style={{ fontStyle: 'italic', color: '#C8693A' }}>laten maken?</em>
        </h2>
        <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 18, color: '#5C4030', margin: '0 auto 44px', maxWidth: 500, lineHeight: 1.7 }}>
          Neem contact op en we bespreken jouw wensen. Ik maak het graag voor je!
        </p>
        <a href="mailto:sabrina@hemelshandgemaakt.nl" className="btn-primary" style={{ fontSize: 16, padding: '16px 52px' }}>
          Stuur een berichtje
        </a>
      </div>
    </section>
  );
}

// ── Footer ───────────────────────────────────────────────────────────

function Footer() {
  return (
    <footer style={{ background: '#1C1410', color: '#7A5C44' }}>
      <div style={{ padding: '56px 80px 40px' }}>
        <div className="grid-footer" style={{ marginBottom: 40 }}>
          <div>
            <div style={{ fontFamily: 'Fraunces, serif', fontSize: 22, fontWeight: 500, color: '#FAF7F2', marginBottom: 14 }}>
              Hemels Handgemaakt
            </div>
            <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, lineHeight: 1.7, margin: 0 }}>
              Handgemaakte textielkunst door Sabrina.<br />Gemaakt met liefde, bezorgd met zorg.
            </p>
          </div>
          <div>
            <div style={{ fontFamily: 'DM Sans, sans-serif', fontWeight: 700, color: '#C8A07A', marginBottom: 18, fontSize: 11, textTransform: 'uppercase', letterSpacing: '1.5px' }}>Links</div>
            {[['#collectie', 'Collectie'], ['#over-mij', 'Over mij'], ['#werkwijze', 'Werkwijze'], ['#contact', 'Contact']].map(([href, label]) => (
              <a key={label} href={href} style={{ display: 'block', fontFamily: 'DM Sans, sans-serif', fontSize: 14, marginBottom: 10, color: '#7A5C44', transition: 'color 0.2s' }}
                onMouseEnter={e => e.target.style.color = '#C8A07A'} onMouseLeave={e => e.target.style.color = '#7A5C44'}>{label}</a>
            ))}
          </div>
          <div>
            <div style={{ fontFamily: 'DM Sans, sans-serif', fontWeight: 700, color: '#C8A07A', marginBottom: 18, fontSize: 11, textTransform: 'uppercase', letterSpacing: '1.5px' }}>Contact</div>
            <a href="mailto:sabrina@hemelshandgemaakt.nl" style={{ display: 'block', fontFamily: 'DM Sans, sans-serif', fontSize: 14, marginBottom: 10, color: '#7A5C44' }}>
              sabrina@hemelshandgemaakt.nl
            </a>
            <a href="https://instagram.com/hemelshandgemaakt" style={{ display: 'block', fontFamily: 'DM Sans, sans-serif', fontSize: 14, marginBottom: 10, color: '#7A5C44' }}>
              Instagram: @hemelshandgemaakt
            </a>
            <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14 }}>Nederland</div>
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: 24, fontFamily: 'DM Sans, sans-serif', fontSize: 13, textAlign: 'center' }}>
          © 2025 Hemels Handgemaakt — Alle rechten voorbehouden
        </div>
      </div>
    </footer>
  );
}

// ── App ──────────────────────────────────────────────────────────────

function App() {
  return (
    <div>
      <Nav />
      <Hero />
      <Strip />
      <About />
      <Collectie />
      <Werkwijze />
      <Testimonials />
      <CTA />
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);