/* global React, ReactDOM, PuffyKit, PuffySite */
const { MINT, MINT_STROKE, TEAL, TEXT, T2, T3, Icon, Puffy } = window.PuffyKit;
const { Nav, Footer, Waitlist, Reveal, Section, PawMark, Penguin } = window.PuffySite;

const POSTS = [
  {
    id: 'calm-care',
    category: 'Principles',
    title: 'Calm care: why Puffy never tells you something is urgent.',
    excerpt: 'A short note on language, and how we chose "overdue by 5 days" over "critical."',
    read: '4 min read',
    date: 'March 2026',
    featured: true,
  },
  {
    id: 'asky-philosophy',
    category: 'Asky AI',
    title: 'How Asky decides when to escalate to a vet.',
    excerpt: 'The boundaries we give our AI companion, and the principle that uncertainty always routes to a human.',
    read: '6 min read',
    date: 'March 2026',
  },
  {
    id: 'puppy-first-week',
    category: 'Guides',
    title: 'A puppy\u2019s first week — what\u2019s normal, what isn\u2019t.',
    excerpt: 'Sleep, crying, appetite and the small things that worry new owners most.',
    read: '8 min read',
    date: 'February 2026',
  },
  {
    id: 'vaccination-schedules',
    category: 'Guides',
    title: 'Reading a vaccination schedule without panicking.',
    excerpt: 'A plain-language tour of core and non-core vaccines, and what "overdue" actually means.',
    read: '7 min read',
    date: 'February 2026',
  },
  {
    id: 'design-notes',
    category: 'Design',
    title: 'Design notes: the mint card and the paw pattern.',
    excerpt: 'Why our passport looks the way it does, and the rules we hold the rest of the app to.',
    read: '5 min read',
    date: 'January 2026',
  },
  {
    id: '3d-avatars',
    category: 'Behind the scenes',
    title: 'Building a soft 3D avatar from a single photo.',
    excerpt: 'The generation pipeline, the stylistic choices, and why low-poly won.',
    read: '9 min read',
    date: 'January 2026',
  },
];

function App() {
  return (
    <>
      <Nav active="blog"/>
      <Hero/>
      <FeaturedPost/>
      <PostGrid/>
      <Newsletter/>
      <Footer/>
    </>
  );
}

function Hero() {
  return (
    <section style={{ padding: '80px 0 40px', background: '#fff' }}>
      <div className="p-wrap">
        <Reveal>
          <p className="p-eyebrow">The Puffy journal</p>
          <h1 className="p-h1" style={{ maxWidth: 820, marginBottom: 20 }}>
            Thoughts on caring for dogs, calmly.
          </h1>
          <p className="p-lede" style={{ maxWidth: 680, margin: 0 }}>
            Short essays on veterinary guidance, product decisions, and the little design choices that make Puffy feel the way it does.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function FeaturedPost() {
  const p = POSTS.find((x) => x.featured);
  return (
    <Section bg="#fff">
      <Reveal>
        <a href={`article.html?id=${p.id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1.1fr 1fr',
            gap: 0, borderRadius: 28, overflow: 'hidden',
            border: `1px solid rgba(0,0,0,0.06)`,
          }}>
            <div style={{
              background: `linear-gradient(135deg, ${MINT} 0%, rgba(127,239,227,0.4) 100%)`,
              padding: '64px 56px', position: 'relative', minHeight: 380,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <div style={{ position: 'absolute', top: 32, left: 32, opacity: 0.2 }}>
                <PawMark size={80} color="#000"/>
              </div>
              <div style={{ position: 'absolute', bottom: 40, right: 40, opacity: 0.3 }}>
                <PawMark size={56} color="#000"/>
              </div>
              <Penguin size={120} withRing/>
            </div>
            <div style={{ padding: '56px 48px', background: '#fff', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
                <CategoryTag label={p.category}/>
                <span style={{ fontSize: 13, color: T3 }}>Featured</span>
              </div>
              <h2 style={{ fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 14px', color: TEXT }}>
                {p.title}
              </h2>
              <p style={{ fontSize: 17, color: T2, lineHeight: 1.55, margin: '0 0 24px' }}>{p.excerpt}</p>
              <div style={{ fontSize: 13, color: T3 }}>{p.date} · {p.read}</div>
            </div>
          </div>
        </a>
      </Reveal>
    </Section>
  );
}

function CategoryTag({ label }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center',
      background: MINT, border: `1.5px solid ${MINT_STROKE}`,
      borderRadius: 999, padding: '4px 12px',
      fontSize: 12, fontWeight: 590, color: TEXT,
      letterSpacing: '0.02em',
    }}>{label}</span>
  );
}

function PostGrid() {
  const rest = POSTS.filter((p) => !p.featured);
  return (
    <Section bg="#F7F7F5">
      <Reveal>
        <p className="p-eyebrow">Recent posts</p>
        <h2 className="p-h2" style={{ marginBottom: 40 }}>More from the journal.</h2>
      </Reveal>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
        gap: 24,
      }}>
        {rest.map((p, i) => (
          <Reveal key={p.id} delay={i * 80}>
            <PostCard post={p}/>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function PostCard({ post }) {
  // Different gradient per category for visual variety
  const grads = {
    'Asky AI':           `linear-gradient(135deg, ${MINT} 0%, #A8E5DD 100%)`,
    'Guides':            `linear-gradient(135deg, #F4D4B0 0%, #E8B887 100%)`,
    'Design':            `linear-gradient(135deg, #DDD 0%, #BEBEBE 100%)`,
    'Behind the scenes': `linear-gradient(135deg, #C8D8F0 0%, #8FA8D0 100%)`,
  };
  const grad = grads[post.category] || `linear-gradient(135deg, ${MINT} 0%, #A8E5DD 100%)`;
  return (
    <a href={`article.html?id=${post.id}`} className="p-card" style={{
      display: 'flex', flexDirection: 'column', padding: 0, overflow: 'hidden',
      textDecoration: 'none', color: 'inherit',
    }}>
      <div style={{ background: grad, height: 160, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <PawMark size={56} color="rgba(0,0,0,0.15)"/>
        <div style={{ position: 'absolute', top: 14, right: 14, opacity: 0.2 }}>
          <PawMark size={28} color="rgba(0,0,0,0.6)"/>
        </div>
      </div>
      <div style={{ padding: '22px 24px 26px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ marginBottom: 12 }}><CategoryTag label={post.category}/></div>
        <h3 style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em', lineHeight: 1.25, margin: '0 0 10px', color: TEXT }}>
          {post.title}
        </h3>
        <p style={{ fontSize: 15, color: T2, lineHeight: 1.5, margin: 0, flex: 1 }}>{post.excerpt}</p>
        <div style={{ fontSize: 13, color: T3, marginTop: 18 }}>{post.date} · {post.read}</div>
      </div>
    </a>
  );
}

function Newsletter() {
  return (
    <Section bg="#fff">
      <div style={{
        background: `linear-gradient(135deg, rgba(127,239,227,0.3) 0%, rgba(127,239,227,0.12) 100%)`,
        borderRadius: 32, padding: '56px 48px', textAlign: 'center',
        border: `1px solid ${MINT_STROKE}`,
      }}>
        <Reveal>
          <p className="p-eyebrow" style={{ justifyContent: 'center' }}>One email a month</p>
          <h2 style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em', margin: '0 0 12px' }}>
            The Puffy newsletter.
          </h2>
          <p style={{ fontSize: 17, color: T2, maxWidth: 520, margin: '0 auto 24px', lineHeight: 1.55 }}>
            New essays, quiet product updates, and nothing else.
          </p>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <Waitlist cta="Subscribe"/>
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

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