// Direction B — Warm paper-toned gallery (pulls colors from the dragon image)
const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

// ── Responsive hook ──────────────────────────────────────────────
function useBreakpoint() {
  const [w, setW] = useStateB(window.innerWidth);
  useEffectB(() => {
    const onResize = () => setW(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return { mobile: w <= 480, tablet: w <= 768, w };
}

const B_DRAWINGS = [
  { id: -5, title: "Wings of Fire: Kinkajou", year: "2026", medium: "Pencil", w: 800, h: 1139, src: "assets/linnea_kinkajou.jpg" },
  { id: -4, title: "Wings of Fire: Blister", year: "2026", medium: "Pencil", w: 800, h: 1019, src: "assets/linnea_blister.jpg" },
  { id: -3, title: "Wings of Fire: Clay", year: "2026", medium: "Pencil", w: 800, h: 999, src: "assets/linnea_clay.jpg" },
  { id: -2, title: "Wings of Fire: Starflight", year: "2026", medium: "Pencil", w: 800, h: 1043, src: "assets/linnea_starflight.jpg" },
  { id: -1, title: "Wings of Fire: Sunny", year: "2026", medium: "Pencil", w: 800, h: 1056, src: "assets/linnea_sunny.jpg" },
  { id: 0, title: "Elephant", year: "2026", medium: "Pencil", w: 800, h: 1038, src: "assets/linnea_elephant.jpg" },
  { id: 1, title: "Puppy", year: "2026", medium: "Pencil", w: 800, h: 1024, src: "assets/linnea_puppy.jpg" },
  { id: 2, title: "Cobra", year: "2026", medium: "Pencil", w: 800, h: 946, src: "assets/linnea_cobra.jpg" },
  { id: 3, title: "Dragon", year: "2026", medium: "Pencil", w: 800, h: 985, src: "assets/linnea_dragon.jpg" },
  { id: 4, title: "Mountain", year: "2026", medium: "Pencil", w: 800, h: 953, src: "assets/linnea_mountain.jpg" },
  { id: 5, title: "Dolphin", year: "2026", medium: "Pencil", w: 800, h: 953, src: "assets/linnea_dolphin.jpg" },
  { id: 6, title: "Unicorn", year: "2025", medium: "Pencil", w: 800, h: 990, src: "assets/linnea_unicorn.jpg" },
  { id: 7, title: "Snow Leopard", year: "2025", medium: "Pencil", w: 800, h: 1045, src: "assets/linnea_snow_leopard.jpg" },
  { id: 8, title: "Leopard", year: "2025", medium: "Pencil", w: 800, h: 1072, src: "assets/linnea_leopard.jpg" },
];

// Paper palette
const PAPER = '#ebe2cf';
const PAPER_DARK = '#d6c9ae';
const INK = '#2a241b';
const INK_SOFT = '#5a4f3e';
const INK_FAINT = '#8a7d66';


// Pencil-style font stack (matches the dragon sketch feel)
const PENCIL = '"Kalam", "Caveat", "Marker Felt", cursive';

function NavB({ page, setPage, hero = false }) {
  const { mobile, tablet } = useBreakpoint();
  const px = mobile ? 20 : tablet ? 32 : 56;

  if (hero) {
    return (
      <nav style={{
        position: 'fixed', top: mobile ? 20 : 32, left: mobile ? 20 : 48,
        zIndex: 50, display: 'flex', alignItems: 'baseline', gap: mobile ? 24 : 36,
        color: INK
      }}>
        {[['drawings', 'drawings'], ['about', 'about']].map(([p, label]) => (
          <button key={p} onClick={() => setPage(p)} style={{
            all: 'unset', cursor: 'pointer', fontFamily: PENCIL,
            fontSize: mobile ? 18 : 22, fontWeight: 400, color: INK,
            opacity: page === p ? 1 : 0.78,
            transition: 'opacity 0.25s, transform 0.25s',
            position: 'relative',
            textShadow: '0 1px 2px rgba(255,255,255,0.4)'
          }}
          onMouseEnter={e => { e.currentTarget.style.opacity = 1; e.currentTarget.style.transform = 'translateY(-1px)'; }}
          onMouseLeave={e => { e.currentTarget.style.opacity = page === p ? 1 : 0.78; e.currentTarget.style.transform = 'translateY(0)'; }}
          >
            {label}
            {page === p && (
              <span style={{
                position: 'absolute', left: 0, right: 0, bottom: -3,
                height: 2, background: INK, borderRadius: 2, opacity: 0.85
              }} />
            )}
          </button>
        ))}
      </nav>
    );
  }
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: `${mobile ? 14 : 20}px ${px}px`, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      background: 'rgba(235, 226, 207, 0.92)', backdropFilter: 'blur(8px)',
      borderBottom: `1px solid ${PAPER_DARK}`,
      color: INK
    }}>
      <button onClick={() => setPage('home')} style={{
        all: 'unset', cursor: 'pointer', display: 'inline-flex', alignItems: 'center'
      }} aria-label="Linnea — home">
        <img src="assets/linnea-wordmark.png" alt="Linnea" style={{height: mobile ? 32 : 44, width: 'auto', display: 'block'}} />
      </button>
      <div style={{display: 'flex', gap: mobile ? 20 : 36, fontFamily: PENCIL, fontSize: mobile ? 16 : 19, alignItems: 'center'}}>
        {[['drawings', 'drawings'], ['about', 'about']].map(([p, label]) => (
          <button key={p} onClick={() => setPage(p)} style={{
            all: 'unset', cursor: 'pointer', color: INK,
            opacity: page === p ? 1 : 0.7,
            borderBottom: page === p ? `2px solid ${INK}` : '2px solid transparent',
            paddingBottom: 1, transition: 'opacity 0.3s, border-color 0.3s'
          }}>{label}</button>
        ))}
      </div>
    </nav>
  );
}

function HomeB({ setPage }) {
  const { mobile, tablet } = useBreakpoint();
  const heroImg = tablet ? 'assets/linnea-dragon-mobile.png' : 'assets/linnea-dragon.png';
  return (
    <div style={{position: 'absolute', inset: 0, background: PAPER, overflow: 'hidden'}}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(${heroImg})`,
        backgroundSize: tablet ? '120% auto' : 'cover', backgroundPosition: tablet ? '65% 20%' : 'left center'
      }} />
    </div>
  );
}

function FeaturedCardB({ d, onClick }) {
  const [hover, setHover] = useStateB(false);
  return (
    <div onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{cursor: 'pointer'}}>
      <div style={{
        overflow: 'hidden', marginBottom: 20,
        background: PAPER_DARK, boxShadow: hover ? '0 12px 40px rgba(42, 36, 27, 0.18)' : '0 4px 16px rgba(42, 36, 27, 0.08)',
        transition: 'box-shadow 0.5s, transform 0.5s', transform: hover ? 'translateY(-4px)' : 'translateY(0)'
      }}>
        <img src={d.src} alt={d.title} loading="lazy" style={{width: '100%', height: 'auto', display: 'block'}} />
      </div>
      <div style={{fontFamily: '"EB Garamond", serif', fontSize: 21, fontStyle: 'italic', color: INK}}>{d.title}</div>
      <div style={{fontFamily: '"EB Garamond", serif', fontSize: 14, color: INK_FAINT, marginTop: 4, fontStyle: 'italic'}}>{d.medium} · {d.year}</div>
    </div>
  );
}

function DrawingsB({ setLightbox }) {
  const { mobile, tablet } = useBreakpoint();
  const px = mobile ? 20 : tablet ? 32 : 56;
  const cols = mobile ? 1 : tablet ? 2 : 3;
  const headingSize = mobile ? 48 : tablet ? 60 : 80;

  return (
    <div style={{minHeight: '100vh', background: PAPER, paddingTop: mobile ? 100 : 140}}>
      <div style={{padding: `0 ${px}px ${mobile ? 32 : 56}px`, maxWidth: 1400, margin: '0 auto'}}>
        <div style={{fontFamily: '"EB Garamond", serif', fontSize: 14, fontStyle: 'italic', color: INK_FAINT, marginBottom: 16}}>{B_DRAWINGS.length} drawings, oldest at the bottom</div>
        <h1 style={{fontFamily: '"EB Garamond", serif', fontSize: headingSize, fontWeight: 400, margin: 0, color: INK, lineHeight: 0.95}}>
          <em>Drawings</em>.
        </h1>
      </div>
      <div style={{padding: `${mobile ? 32 : 64}px ${px}px ${mobile ? 60 : 120}px`, display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: mobile ? 32 : tablet ? 32 : 40, maxWidth: 1400, margin: '0 auto'}}>
        {B_DRAWINGS.map(d => (
          <MasonryCardB key={d.id} d={d} onClick={() => setLightbox(d)} />
        ))}
      </div>
      <FooterB />
    </div>
  );
}

function MasonryCardB({ d, onClick }) {
  const [hover, setHover] = useStateB(false);
  return (
    <div onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{cursor: 'pointer'}}>
      <div style={{
        overflow: 'hidden', background: PAPER_DARK,
        boxShadow: hover ? '0 14px 44px rgba(42, 36, 27, 0.2)' : '0 3px 12px rgba(42, 36, 27, 0.08)',
        transition: 'box-shadow 0.5s, transform 0.5s', transform: hover ? 'translateY(-4px) rotate(-0.3deg)' : 'translateY(0) rotate(0)'
      }}>
        <img src={d.src} alt={d.title} loading="lazy" style={{width: '100%', height: 'auto', display: 'block'}} />
      </div>
      <div style={{marginTop: 16, textAlign: 'center'}}>
        <div style={{fontFamily: '"EB Garamond", serif', fontSize: 18, fontStyle: 'italic', color: INK}}>{d.title}</div>
        <div style={{fontFamily: '"EB Garamond", serif', fontSize: 13, color: INK_FAINT, marginTop: 2, fontStyle: 'italic'}}>{d.year}</div>
      </div>
    </div>
  );
}

function AboutB() {
  const { mobile, tablet } = useBreakpoint();
  const px = mobile ? 20 : tablet ? 32 : 56;
  const headingSize = mobile ? 40 : tablet ? 56 : 72;

  return (
    <div style={{minHeight: '100vh', background: PAPER, paddingTop: mobile ? 100 : 140}}>
      <div style={{maxWidth: 920, margin: '0 auto', padding: `0 ${px}px ${mobile ? 60 : 120}px`}}>
        <div style={{fontFamily: '"EB Garamond", serif', fontSize: 14, fontStyle: 'italic', color: INK_FAINT, marginBottom: 24}}>About</div>
        <h1 style={{fontFamily: '"EB Garamond", serif', fontSize: headingSize, fontWeight: 400, margin: 0, marginBottom: mobile ? 40 : 64, color: INK, lineHeight: 1, letterSpacing: '-0.01em'}}>
          A few <em>things</em> about Linnea.
        </h1>

        {/* Inset image — full width on mobile, floated on desktop */}
        <div style={{
          float: mobile ? 'none' : 'right',
          width: mobile ? '100%' : '42%',
          marginLeft: mobile ? 0 : 40,
          marginBottom: 24,
          marginTop: mobile ? 0 : 8,
          aspectRatio: '3 / 4', overflow: 'hidden', background: PAPER_DARK,
          boxShadow: '0 8px 32px rgba(42, 36, 27, 0.15)'
        }}>
          <div style={{
            width: '100%', height: '100%',
            backgroundImage: 'url(assets/linnea-dragon.png)',
            backgroundSize: 'cover', backgroundPosition: '70% center'
          }} />
        </div>

        <div style={{fontFamily: '"EB Garamond", serif', fontSize: mobile ? 19 : 22, lineHeight: 1.7, color: INK_SOFT}}>
          <p style={{margin: '0 0 24px'}}>
            <span style={{fontFamily: '"EB Garamond", serif', fontSize: mobile ? 48 : 64, fontStyle: 'italic', float: 'left', lineHeight: 0.9, marginRight: 12, marginTop: 6, color: INK}}>H</span>
            i, I'm Linnea! And this is a little bit about me. I am 9 years old, and I love to draw. I like art because you can be so creative with it, and draw so many different things. My favorite animal is a cat.
          </p>
          <p style={{margin: '0 0 24px'}}>
            I focus mostly on drawing animals, landscape, and nature. Specifically dragons, cats, dolphins, and trees. Some types of art I do are sketching and painting.
          </p>
          <p style={{margin: 0}}>
            That's just a little bit about me. I hope you enjoy the website and my art.
          </p>
        </div>

        <div style={{clear: 'both', marginTop: mobile ? 48 : 80, paddingTop: 32, borderTop: `1px solid ${PAPER_DARK}`, display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: mobile ? 24 : 32}}>
          {[
            ['Age', 'Nine'],
            ['Materials', 'Pencil, sketching, painting'],
            ['Favorite subject', 'Dragons, cats, dolphins']
          ].map(([k, v]) => (
            <div key={k}>
              <div style={{fontFamily: '"EB Garamond", serif', fontSize: 12, fontStyle: 'italic', color: INK_FAINT, marginBottom: 8, letterSpacing: '0.05em'}}>{k}</div>
              <div style={{fontFamily: '"EB Garamond", serif', fontSize: 17, color: INK, lineHeight: 1.5}}>{v}</div>
            </div>
          ))}
        </div>
      </div>
      <FooterB />
    </div>
  );
}

function ContactB() {
  const { mobile, tablet } = useBreakpoint();
  const px = mobile ? 20 : tablet ? 32 : 56;
  const headingSize = mobile ? 40 : tablet ? 56 : 72;

  const [form, setForm] = useStateB({name: '', email: '', message: ''});
  const [sent, setSent] = useStateB(false);
  return (
    <div style={{minHeight: '100vh', background: PAPER, paddingTop: mobile ? 100 : 140}}>
      <div style={{maxWidth: 760, margin: '0 auto', padding: `0 ${px}px ${mobile ? 60 : 120}px`}}>
        <div style={{fontFamily: '"EB Garamond", serif', fontSize: 14, fontStyle: 'italic', color: INK_FAINT, marginBottom: 24}}>Contact</div>
        <h1 style={{fontFamily: '"EB Garamond", serif', fontSize: headingSize, fontWeight: 400, margin: 0, marginBottom: 32, color: INK, lineHeight: 1, letterSpacing: '-0.01em'}}>
          Say <em>hello</em>.
        </h1>
        <p style={{fontFamily: '"EB Garamond", serif', fontSize: mobile ? 18 : 21, lineHeight: 1.6, color: INK_SOFT, marginBottom: mobile ? 40 : 64, fontStyle: 'italic', maxWidth: 560}}>
          Notes for Linnea come through her parents. We read them all, and we'll write back if a reply seems wanted.
        </p>

        {sent ? (
          <div style={{padding: `${mobile ? 40 : 56}px 0`, borderTop: `1px solid ${PAPER_DARK}`, borderBottom: `1px solid ${PAPER_DARK}`, textAlign: 'center'}}>
            <div style={{fontFamily: '"EB Garamond", serif', fontSize: mobile ? 28 : 36, fontStyle: 'italic', color: INK, marginBottom: 16}}>Thank you.</div>
            <div style={{fontFamily: '"EB Garamond", serif', fontSize: 17, color: INK_SOFT, lineHeight: 1.6}}>Your note has been sent. We'll write back as soon as we can.</div>
          </div>
        ) : (
          <form onSubmit={e => {e.preventDefault(); setSent(true);}} style={{display: 'flex', flexDirection: 'column', gap: 32}}>
            <FieldB label="Your name" value={form.name} onChange={v => setForm({...form, name: v})} />
            <FieldB label="Your email" value={form.email} type="email" onChange={v => setForm({...form, email: v})} />
            <FieldB label="A note" value={form.message} multiline onChange={v => setForm({...form, message: v})} />
            <button type="submit" style={{
              alignSelf: 'flex-start', marginTop: 16, padding: '16px 36px',
              background: INK, color: PAPER, border: 'none',
              fontFamily: '"EB Garamond", serif', fontSize: 17, fontStyle: 'italic',
              cursor: 'pointer', transition: 'background 0.2s', borderRadius: 0
            }}
              onMouseEnter={e => e.currentTarget.style.background = INK_SOFT}
              onMouseLeave={e => e.currentTarget.style.background = INK}
            >Send the note →</button>
          </form>
        )}
      </div>
      <FooterB />
    </div>
  );
}

function FieldB({ label, value, onChange, multiline, type = 'text' }) {
  const [focus, setFocus] = useStateB(false);
  const { mobile } = useBreakpoint();
  const Tag = multiline ? 'textarea' : 'input';
  return (
    <label style={{display: 'block'}}>
      <div style={{fontFamily: '"EB Garamond", serif', fontSize: 13, fontStyle: 'italic', color: INK_FAINT, marginBottom: 10, letterSpacing: '0.03em'}}>{label}</div>
      <Tag
        type={type}
        value={value}
        onChange={e => onChange(e.target.value)}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        rows={multiline ? 6 : undefined}
        style={{
          width: '100%', padding: '14px 0', background: 'transparent',
          border: 'none', borderBottom: `1px solid ${focus ? INK : PAPER_DARK}`,
          outline: 'none', fontFamily: '"EB Garamond", serif', fontSize: mobile ? 18 : 21, color: INK,
          resize: 'none', transition: 'border-color 0.3s', borderRadius: 0
        }}
      />
    </label>
  );
}

function FooterB() {
  const { mobile } = useBreakpoint();
  const px = mobile ? 20 : 56;
  return (
    <footer style={{
      borderTop: `1px solid ${PAPER_DARK}`, padding: `${mobile ? 32 : 40}px ${px}px`,
      display: 'flex', flexDirection: mobile ? 'column' : 'row',
      justifyContent: 'space-between', alignItems: mobile ? 'center' : undefined,
      gap: mobile ? 8 : undefined,
      fontFamily: '"EB Garamond", serif', fontSize: 14, fontStyle: 'italic', color: INK_FAINT
    }}>
      <div>ItsLinnea.com</div>
      <div>© 2026, kept by her parents</div>
    </footer>
  );
}

function LightboxB({ d, onClose }) {
  const { mobile, tablet } = useBreakpoint();

  useEffectB(() => {
    const onKey = e => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);
  if (!d) return null;

  const lbPad = mobile ? 16 : tablet ? 24 : 48;

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, background: 'rgba(235, 226, 207, 0.97)', zIndex: 100,
      display: 'flex', flexDirection: 'column', padding: lbPad, animation: 'fadeIn 0.3s',
      overflowY: 'auto'
    }}>
      <div style={{display: 'flex', justifyContent: 'flex-end', marginBottom: mobile ? 12 : 20, flexShrink: 0}}>
        <button onClick={onClose} style={{all: 'unset', cursor: 'pointer', fontFamily: '"EB Garamond", serif', fontSize: 16, fontStyle: 'italic', color: INK, borderBottom: `1px solid ${INK}`, paddingBottom: 2}}>close ✕</button>
      </div>
      <div onClick={e => e.stopPropagation()} style={{
        display: 'flex', flexDirection: tablet ? 'column' : 'row',
        gap: mobile ? 24 : tablet ? 32 : 40,
        alignItems: 'center',
        justifyContent: tablet ? 'center' : 'flex-start',
        flex: tablet ? undefined : 1,
        minHeight: 0,
        maxWidth: tablet ? undefined : 900,
        margin: '0 auto'
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          minHeight: 0,
          width: tablet ? '100%' : undefined,
          height: tablet ? undefined : '100%'
        }}>
          <img src={d.src} alt={d.title} style={{
            maxWidth: '100%',
            maxHeight: tablet ? '70vh' : 'calc(100vh - 120px)',
            width: 'auto',
            height: 'auto',
            objectFit: 'contain',
            boxShadow: '0 24px 80px rgba(42, 36, 27, 0.25)'
          }} />
        </div>
        <div style={{textAlign: tablet ? 'center' : undefined, flexShrink: 0}}>
          <div style={{fontFamily: '"EB Garamond", serif', fontSize: 14, fontStyle: 'italic', color: INK_FAINT, marginBottom: mobile ? 12 : 20}}>{d.year}</div>
          <h2 style={{fontFamily: '"EB Garamond", serif', fontSize: mobile ? 32 : tablet ? 40 : 52, fontWeight: 400, fontStyle: 'italic', color: INK, margin: 0, marginBottom: mobile ? 16 : 32, lineHeight: 1.05, letterSpacing: '-0.01em'}}>{d.title}</h2>
          <div style={{fontFamily: '"EB Garamond", serif', fontSize: mobile ? 17 : 19, color: INK_SOFT, lineHeight: 1.6}}>{d.medium}</div>
        </div>
      </div>
    </div>
  );
}

function SiteB() {
  const [page, setPage] = useStateB('home');
  const [lightbox, setLightbox] = useStateB(null);
  const isHome = page === 'home';
  return (
    <div style={{
      position: isHome ? 'absolute' : 'relative',
      inset: isHome ? 0 : undefined,
      minHeight: isHome ? undefined : '100vh',
      background: PAPER,
      overflow: isHome ? 'hidden' : 'visible',
      fontFamily: '"EB Garamond", serif'
    }}>
      <NavB page={page} setPage={(p) => { setPage(p); setLightbox(null); window.scrollTo(0, 0); }} hero={isHome} />
      {page === 'home' && <HomeB setPage={setPage} />}
      {page === 'drawings' && <DrawingsB setLightbox={setLightbox} />}
      {page === 'about' && <AboutB />}
      <LightboxB d={lightbox} onClose={() => setLightbox(null)} />
    </div>
  );
}

window.SiteB = SiteB;