/* global React, Container, Section, Eyebrow, Button, Reveal */
const { useState: useStateArticles, useEffect: useEffectArticles } = React;

const ARTICLES = [
  {
    id: 'real-service-is-never-for-you',
    num: '01',
    date: 'Apr 2026',
    readTime: '4 min',
    tag: 'Philosophy',
    title: "Real service is never for you.",
    subtitle: "It's always with you.",
    seoTitle: "Real Service Is Never For You | Daee Media Field Notes",
    seoDesc: "The most common mistake in service businesses is the framing. Service is not order-taking. It is collaboration. Here is why the distinction determines everything.",
    excerpt: "The most common mistake in service businesses is the framing. You're serving the client. They're the boss. You execute what they ask, hope they're happy, repeat. That's not service. That's order-taking.",
    body: [
      {
        type: 'p',
        text: "The most common mistake in service businesses is the framing. You're serving the client. They're the boss. You execute what they ask, hope they're happy, repeat."
      },
      { type: 'p', text: "That's not service. That's order-taking." },
      {
        type: 'p',
        text: "Real service, the kind that actually moves a business, is never for the client. It's with them. Think about it: a doctor can't cure a patient who won't follow the treatment. The best architect in the world can't build your vision if you won't tell them what you actually want. A performance agency can't compound your revenue if you won't give them access to the business underneath the ads."
      },
      { type: 'p', text: "The professional works alongside you, not as a subordinate to your instructions." },
      {
        type: 'p',
        text: "When service providers prioritize your approval over your outcomes, they shrink. They stop giving honest feedback. They stop pushing back on bad decisions. They start optimizing for the contract instead of the number. And the results always follow."
      },
      { type: 'heading', text: "This is why we work with partners, not clients." },
      {
        type: 'p',
        text: "We're not executing your brief. We're building your revenue system. That requires access, trust, and genuine collaboration from both sides. If you want a vendor to take instructions and deliver reports, we're not the right fit. If you want a partner invested in the outcome, we might be."
      },
      {
        type: 'p',
        text: "The question isn't how good is your agency. The real question is: are you treating them like a boss, or a partner? Because the answer determines everything that comes after."
      },
    ],
    metrics: null,
    cta: 'Apply to work with us',
    ctaTarget: 'apply',
    linkedinUrl: 'https://www.linkedin.com/posts/mohammed-saad-shaikh_real-service-is-never-for-you-its-always-ugcPost-7461809970573946880-TAwQ',
    related: ['apple-is-not-a-product-company', 'why-we-say-no'],
  },
  {
    id: 'apple-is-not-a-product-company',
    num: '02',
    date: 'Apr 2026',
    readTime: '4 min',
    tag: 'Systems',
    title: "Apple is not a product company.",
    subtitle: "And neither are you.",
    seoTitle: "Apple Is Not a Product Company | Daee Media Field Notes",
    seoDesc: "Apple makes the most expensive consumer products in the world. And they're not a product company. Here is what that means for service businesses and how we apply it at Daee.",
    excerpt: "Apple makes the most expensive consumer products in the world. And they're not a product company. Every product they ship exists for one reason: to deliver the best possible experience to the end user. The product is the vehicle. The experience is the business.",
    body: [
      {
        type: 'p',
        text: "Apple makes the most expensive consumer products in the world. And they're not a product company."
      },
      {
        type: 'p',
        text: "Every product they ship exists for one reason: to deliver the best possible experience to the end user. The product is the vehicle. The experience is the business. They could have put the same chips in a cheaper case. They didn't. They could have exposed the complexity of their software. They don't. They conceal everything hard, so everything the user touches feels effortless."
      },
      { type: 'p', text: "The result: people pay 3x more for equivalent hardware, and they feel good about it." },
      { type: 'heading', text: "Now apply that to a service business." },
      {
        type: 'p',
        text: "If you're an agency, a consultancy, or an advisory firm, your deliverable is not your business. The experience the client has around the deliverable is."
      },
      {
        type: 'p',
        text: "The quality of your work matters. But so does how clear the kickoff call feels. How you communicate when something goes wrong. Not if, when. Whether the client feels more confident or more anxious after every check-in. Whether they'd describe working with you as smooth or exhausting."
      },
      {
        type: 'p',
        text: "Most agencies get the deliverable right and fumble the experience. The client gets results but doesn't feel looked after. They leave for someone who delivers less but makes them feel more."
      },
      { type: 'heading', text: "What we optimize for at Daee." },
      {
        type: 'p',
        text: "We engineer both. The system has to perform. That's non-negotiable. But the experience has to match. The founder has to feel like they have a thinking partner, not a vendor who sends reports on Fridays."
      },
      {
        type: 'p',
        text: "Apple didn't build loyalty by having the best products. They built it by making people feel something every time they opened the box. The question worth asking: are you giving people a service, or an experience they'll never stop talking about?"
      },
    ],
    metrics: null,
    cta: 'See how we work',
    ctaTarget: 'apply',
    linkedinUrl: 'https://www.linkedin.com/posts/mohammed-saad-shaikh_apple-is-not-a-product-company-ugcPost-7462559059800612864-KXLD',
    related: ['real-service-is-never-for-you', 'why-we-say-no'],
  },
  {
    id: 'why-we-say-no',
    num: '03',
    date: 'Mar 2026',
    readTime: '4 min',
    tag: 'How we work',
    title: "Why we say no more than we say yes.",
    subtitle: "And why that's the whole business model.",
    seoTitle: "Why Daee Media Says No More Than Yes | Field Notes",
    seoDesc: "We turn down more clients than we take on. That's not a capacity problem. It's a deliberate choice. Here is what happens when an agency says yes to everyone, and why we chose the other path.",
    excerpt: "We turn down more clients than we take on. That's not a capacity problem. It's a deliberate choice. Here is what happens when an agency says yes to everyone, and why we chose the other path.",
    body: [
      {
        type: 'p',
        text: "We turn down more clients than we take on. That's not a capacity problem. It's the whole business model."
      },
      { type: 'heading', text: "What happens when an agency takes every client." },
      {
        type: 'p',
        text: "They optimize for revenue, not results. More clients means more retainers. More retainers means the work gets divided. The founder stops being in the room. An account manager takes over. The work gets shallower. The results follow."
      },
      { type: 'p', text: "This is how most agencies work. It scales. It just doesn't produce the outcome the client hired for." },
      { type: 'heading', text: "Why we chose the other path." },
      {
        type: 'p',
        text: "We work with two or three partners at a time. One team, no account chain. Saad is in the room: writing the brief, reviewing the creative, inside the ad account, building the CRM logic. That's only possible at a specific capacity. When we say yes to a fourth client, one of the existing three gets less. We'd rather not take the fourth client."
      },
      { type: 'heading', text: "What fit actually means." },
      {
        type: 'p',
        text: "We say no when the business doesn't have product-market fit yet. Ads can't fix a broken offer. We say no when the founder can't service the leads we'd generate. A system that sends 200 leads a month is useless if the team can only handle 20. We say no when the relationship would be transactional. We don't do vendor. We do partner."
      },
      { type: 'heading', text: "What happens when we say no." },
      {
        type: 'p',
        text: "We refer. If someone's not a fit for us, there's usually someone better positioned for what they need. We'd rather end a call with a useful introduction than a retainer that doesn't serve them. This costs us short-term revenue. It's the whole reason the work actually lands."
      },
    ],
    metrics: null,
    cta: 'Apply to work with us',
    ctaTarget: 'apply',
    linkedinUrl: null,
    related: ['real-service-is-never-for-you', 'apple-is-not-a-product-company'],
  },
];

const VIDEOS = [
  {
    id: 'video-1',
    url: 'https://www.instagram.com/p/DYe9yjDCDnn/',
    embedUrl: 'https://www.instagram.com/p/DYe9yjDCDnn/embed/',
    label: 'Featured',
    caption: 'Fall in love with them, not your idea',
  },
  {
    id: 'video-2',
    url: 'https://www.instagram.com/p/DYClm6TK_8X/',
    embedUrl: 'https://www.instagram.com/p/DYClm6TK_8X/embed/',
    label: 'Latest',
    caption: 'Built for those who serve others',
  },
];

const DEFAULT_TITLE = 'Daee Media: Revenue systems, not ad management';
const DEFAULT_DESC  = 'Daee Media builds end-to-end revenue systems for service businesses. Meta Ads, funnels, CRM, creative direction, and tracking treated as one compounding system. Founder-led. Globally distributed.';

function ArticlesIndex({ onOpen, onApply }) {
  const [activeArticle, setActiveArticle] = useStateArticles(null);

  if (activeArticle) {
    const article = ARTICLES.find(a => a.id === activeArticle);
    return (
      <ArticleDetail
        article={article}
        onBack={() => setActiveArticle(null)}
        onSelect={setActiveArticle}
        onOpen={onOpen}
        onApply={onApply}
      />
    );
  }

  return (
    <Section id="articles" pad={140} topRule>
      <Container>

        <Reveal>
          <div style={{ marginBottom: 72 }}>
            <Eyebrow>§ Field notes</Eyebrow>
            <h1 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(44px, 5.2vw, 72px)',
              lineHeight: 1.02, letterSpacing: '-0.02em', margin: '16px 0 0', fontWeight: 400,
            }}>
              How the work <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>actually happens.</em>
            </h1>
            <p style={{ fontSize: 18, color: 'var(--fg-muted)', marginTop: 20, maxWidth: 560, lineHeight: 1.6 }}>
              Notes from inside the engagements: what we tried, what worked, and why.
            </p>
          </div>
        </Reveal>

        <Reveal delay={60}>
          <div style={{ marginBottom: 96 }}>
            <div style={{
              fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em',
              color: 'var(--fg-subtle)', fontWeight: 500, marginBottom: 24,
            }}>§ From @saadshares</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              {VIDEOS.map(v => <VideoCard key={v.id} video={v}/>)}
            </div>
          </div>
        </Reveal>

        <div>
          {ARTICLES.map((a, i) => (
            <Reveal key={a.id} delay={i * 80}>
              <ArticleCard article={a} onClick={() => setActiveArticle(a.id)}/>
            </Reveal>
          ))}
        </div>

      </Container>
    </Section>
  );
}

function VideoCard({ video }) {
  return (
    <div style={{ position: 'relative' }}>
      <div style={{
        fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em',
        color: 'var(--fg-subtle)', fontWeight: 500, marginBottom: 12,
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)', display: 'inline-block' }}/>
        {video.label} · Instagram
      </div>
      <div style={{
        borderRadius: 4, overflow: 'hidden', border: '1px solid var(--border)',
        background: 'var(--paper-100)', minHeight: 480, position: 'relative',
      }}>
        <iframe
          src={video.embedUrl}
          width="100%" height="540" frameBorder="0" scrolling="no"
          allowTransparency="true"
          allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
          style={{ display: 'block', border: 'none' }}
          title={video.caption}
        />
      </div>
      <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontSize: 13, color: 'var(--fg-muted)' }}>{video.caption}</span>
        <a href={video.url} target="_blank" rel="noopener noreferrer"
          style={{ fontSize: 12, color: 'var(--fg-subtle)', textDecoration: 'none', borderBottom: '1px solid var(--border-strong)', paddingBottom: 1 }}>
          View on Instagram →
        </a>
      </div>
    </div>
  );
}

function ArticleCard({ article, onClick }) {
  const [hover, setHover] = useStateArticles(false);
  return (
    <article
      onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'grid', gridTemplateColumns: '120px 1fr auto',
        gap: 48, alignItems: 'start', padding: '44px 0',
        borderTop: '1px solid var(--border-strong)', cursor: 'pointer',
      }}>
      <div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: hover ? 'var(--accent)' : 'var(--fg-subtle)', transition: 'color 180ms' }}>
          No.{article.num}
        </div>
        <div style={{ fontSize: 12, color: 'var(--fg-subtle)', marginTop: 8 }}>{article.date}</div>
        <div style={{ fontSize: 11, color: 'var(--fg-faint)', marginTop: 6 }}>{article.readTime} read</div>
      </div>
      <div>
        <div style={{ marginBottom: 14 }}>
          <span style={{
            fontSize: 11, padding: '3px 10px', borderRadius: 999,
            border: '1px solid var(--border-strong)', color: 'var(--fg-muted)',
            fontFamily: 'var(--font-sans)', textTransform: 'uppercase', letterSpacing: '0.1em',
          }}>{article.tag}</span>
        </div>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3vw, 40px)',
          lineHeight: 1.08, letterSpacing: '-0.015em', margin: '0 0 12px', fontWeight: 400,
        }}>{article.title}</h2>
        <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--fg-muted)', margin: 0, maxWidth: 600 }}>
          {article.excerpt}
        </p>
      </div>
      <div style={{
        fontSize: 13, color: hover ? 'var(--accent)' : 'var(--fg-muted)',
        display: 'flex', alignItems: 'center', gap: 6,
        transform: hover ? 'translateX(4px)' : 'none',
        transition: 'transform 220ms var(--ease-out), color 180ms',
        paddingTop: 4, whiteSpace: 'nowrap',
      }}>
        Read <span aria-hidden>→</span>
      </div>
    </article>
  );
}

function ArticleDetail({ article, onBack, onSelect, onOpen, onApply }) {
  useEffectArticles(() => {
    document.title = article.seoTitle || `${article.title} | Daee Media`;
    const metaDesc = document.querySelector('meta[name="description"]');
    if (metaDesc) metaDesc.setAttribute('content', article.seoDesc || article.excerpt);
    const canonical = document.querySelector('link[rel="canonical"]');
    if (canonical) canonical.setAttribute('href', `https://daeemedia.com/notes/${article.id}`);
    return () => {
      document.title = DEFAULT_TITLE;
      if (metaDesc) metaDesc.setAttribute('content', DEFAULT_DESC);
      if (canonical) canonical.setAttribute('href', 'https://daeemedia.com');
    };
  }, [article.id]);

  const related = ARTICLES.filter(a => article.related && article.related.includes(a.id));

  return (
    <Section id="article-detail" pad={80} topRule>
      <Container narrow>
        <Reveal>
          <button onClick={onBack} style={{
            background: 'none', border: 'none', cursor: 'pointer',
            fontSize: 13, color: 'var(--fg-subtle)', padding: 0,
            display: 'flex', alignItems: 'center', gap: 6, marginBottom: 56,
          }}>← Back to field notes</button>
        </Reveal>

        <Reveal delay={60}>
          <div style={{ marginBottom: 16 }}>
            <span style={{
              fontSize: 11, padding: '3px 10px', borderRadius: 999,
              border: '1px solid var(--border-strong)', color: 'var(--fg-muted)',
              fontFamily: 'var(--font-sans)', textTransform: 'uppercase', letterSpacing: '0.1em',
            }}>{article.tag}</span>
          </div>
          <div style={{ fontSize: 13, color: 'var(--fg-subtle)', marginBottom: 20 }}>
            {article.date} · {article.readTime} read
          </div>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 5vw, 64px)',
            lineHeight: 1.04, letterSpacing: '-0.02em', margin: '0 0 16px', fontWeight: 400,
          }}>{article.title}</h1>
          <p style={{
            fontFamily: 'var(--font-display)', fontSize: 'clamp(20px, 2.4vw, 30px)',
            lineHeight: 1.2, letterSpacing: '-0.01em', margin: '0 0 48px',
            color: 'var(--fg-muted)', fontStyle: 'italic',
          }}>{article.subtitle}</p>
        </Reveal>

        <div style={{ borderTop: '1px solid var(--border)', paddingTop: 48 }}>
          {article.body.map((block, i) => (
            <Reveal key={i} delay={i * 30}>
              <ArticleBlock block={block}/>
            </Reveal>
          ))}
        </div>

        {related.length > 0 && (
          <Reveal delay={160}>
            <div style={{ marginTop: 56, paddingTop: 32, borderTop: '1px solid var(--border)' }}>
              <div style={{
                fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em',
                color: 'var(--fg-subtle)', fontWeight: 500, marginBottom: 20,
              }}>Related reading</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {related.map(r => (
                  <button key={r.id} onClick={() => onSelect(r.id)} style={{
                    background: 'none', border: 'none', padding: 0, cursor: 'pointer',
                    textAlign: 'left', display: 'flex', alignItems: 'baseline', gap: 12,
                  }}>
                    <span style={{
                      fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--fg)',
                      lineHeight: 1.2, letterSpacing: '-0.01em',
                    }}>{r.title}</span>
                    <span style={{ fontSize: 13, color: 'var(--accent)' }}>→</span>
                  </button>
                ))}
              </div>
            </div>
          </Reveal>
        )}

        <Reveal delay={200}>
          <div style={{
            marginTop: 56, paddingTop: 40, borderTop: '1px solid var(--border)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            flexWrap: 'wrap', gap: 20,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <img src="assets/IMG_1129.PNG" alt="Saad, Founder of Daee Media"
                style={{ width: 40, height: 40, borderRadius: 999, objectFit: 'cover', objectPosition: 'center top' }}/>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg)' }}>Saad</div>
                <div style={{ fontSize: 12, color: 'var(--fg-subtle)' }}>Founder, Daee Media</div>
              </div>
              {article.linkedinUrl && (
                <a href={article.linkedinUrl} target="_blank" rel="noopener noreferrer"
                  style={{ fontSize: 12, color: 'var(--fg-subtle)', textDecoration: 'none',
                    borderBottom: '1px solid var(--border-strong)', paddingBottom: 1, marginLeft: 8 }}>
                  View on LinkedIn →
                </a>
              )}
            </div>
            <Button onClick={article.ctaTarget === 'apply' ? onApply : () => onOpen(article.ctaTarget)}>
              {article.cta} →
            </Button>
          </div>
        </Reveal>
      </Container>
    </Section>
  );
}

function ArticleBlock({ block }) {
  if (block.type === 'heading') return (
    <h2 style={{
      fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 400,
      letterSpacing: '-0.01em', lineHeight: 1.2, margin: '48px 0 20px',
    }}>{block.text}</h2>
  );
  if (block.type === 'list') return (
    <ul style={{ padding: '0 0 0 20px', margin: '0 0 24px', display: 'flex', flexDirection: 'column', gap: 12 }}>
      {block.items.map((item, i) => (
        <li key={i} style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--fg-muted)' }}>{item}</li>
      ))}
    </ul>
  );
  return (
    <p style={{ fontSize: 18, lineHeight: 1.75, color: 'var(--fg-muted)', margin: '0 0 24px', maxWidth: '100%' }}>
      {block.text}
    </p>
  );
}

window.ArticlesIndex = ArticlesIndex;
