// Page sections — 9-10 modules, lightweight Q&A pattern.

// ============================================================
// [2] MAIN LIMITS TABLE — 3 cols: Field | Limit | What to know
// ============================================================
const MAIN_LIMITS_ROWS = [
  { field: 'Title', limit: '140 characters', know: 'Official Etsy limit. Etsy also suggests clear titles and considering fewer than 15 words.' },
  { field: 'Tags', limit: '13 tags · 20 chars each', know: 'Short phrases are allowed. Spaces count toward the limit.' },
  { field: 'Description', limit: '~10,000 characters widely cited', know: 'Treat the opening lines as the most important part. Google snippets vary by query and device.' },
  { field: 'Personalization fields', limit: 'Up to 5 per listing', know: 'Use separate fields when buyers need to provide different details.' },
  { field: 'Personalization text box', limit: '1-1,024 characters', know: 'Set the cap based on your design and give a clear example.' },
];

function SourceLinks({ links }) {
  return (
    <div className="source-links">
      <span className="source-label">Sources</span>
      {links.map((link, i) => (
        <a key={i} href={link.href} target="_blank" rel="noreferrer">
          {link.label}
        </a>
      ))}
    </div>
  );
}

function MainLimitsTable() {
  return (
    <section className="section" id="reference">
      <div className="section-head">
        <span className="eyebrow"><span className="dot" /> 02 · Main limits</span>
        <h2 className="h2">Etsy title character limit and related listing limits.</h2>
        <p className="lead">The main query here is the Etsy title character limit. This table keeps that answer first, then shows the related Etsy listing limits sellers usually need in the same session.</p>
      </div>
      <div className="limits-table-wrap">
        <table className="limits-table">
          <thead>
            <tr>
              <th>Field</th>
              <th>Limit</th>
              <th>What to know</th>
            </tr>
          </thead>
          <tbody>
            {MAIN_LIMITS_ROWS.map((r,i)=>(
              <tr key={i}>
                <td className="col-field">{r.field}</td>
                <td className="col-num">{r.limit}</td>
                <td className="col-know">{r.know}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <SourceLinks
        links={[
          { label: 'How to Create a Listing', href: 'https://help.etsy.com/hc/en-us/articles/115015628707-How-to-Create-a-Listing' },
          { label: 'How to Use Tags to Get Found in Search', href: 'https://help.etsy.com/hc/en-us/articles/360000336307-How-to-Use-Tags-to-Get-Found-in-Search?segment=selling' },
          { label: 'How to Offer Personalized Listings', href: 'https://help.etsy.com/hc/en-us/articles/360000344528-How-to-Offer-Personalized-Listings' },
        ]}
      />
    </section>
  );
}

// ============================================================
// Generic Q&A list section component
// ============================================================
function QAItem({ n, q, h3, ans, strat, highlight, badge, children }) {
  return (
    <div className={`qa-item ${highlight ? 'highlight' : ''}`}>
      <span className="qmark"><span className="num">Q{n}</span> {q}</span>
      {badge && <span className={`evidence-badge ${badge.tone || 'neutral'}`}>{badge.label}</span>}
      <h3>{h3}</h3>
      {ans && <p className="ans">{ans}</p>}
      {strat && <p className="strat">{strat}</p>}
      {children}
    </div>
  );
}

// ============================================================
// [3] TITLE
// ============================================================
function TitleSection() {
  return (
    <section className="section" id="title-limit">
      <div className="section-head">
        <span className="eyebrow"><span className="dot" /> 03 · Title limit</span>
        <h2 className="h2">Etsy title character limit.</h2>
        <span className="hard-answer">140 characters · Etsy now emphasizes clarity over keyword stuffing</span>
        <p className="lead">The hard limit is simple. The real optimization question is how much title work Etsy still expects after its newer search guidance.</p>
      </div>
      <div className="qa-list">
        <QAItem
          n={1}
          q="What is the Etsy title character limit?"
          badge={{ label: 'Official Etsy rule', tone: 'official' }}
          h3="140 characters, including spaces and punctuation."
          ans={<>Etsy titles can be up to <strong>140 chars</strong>. The limit applies to every category and seller location.</>}
          strat="Letters, numbers, spaces, commas, and pipes all count toward the 140."
          highlight
        />
        <QAItem
          n={2}
          q="Do you need to use all 140 characters in an Etsy title?"
          badge={{ label: 'ShopFoundry recommendation', tone: 'recommendation' }}
          h3="No — Etsy explicitly says the title doesn't need to do all the work."
          ans="Use the title to clearly name the item and surface the most important objective details. Move the rest into tags, attributes, and description."
          strat={<>ShopFoundry recommendation: stop when you've covered product type + top 2-3 traits. Extra adjectives like "beautiful" or "perfect" add length, not clarity.</>}
        />
        <QAItem
          n={3}
          q="How many words should an Etsy title be?"
          badge={{ label: 'Etsy guidance', tone: 'guide' }}
          h3="Etsy suggests considering fewer than 15 words when listing the traits that make the item special."
          ans="That is guidance, not a universal rule. A strong title can be shorter or longer as long as it stays clear and descriptive."
          strat="Use commas only when they improve scan speed. Don't add separators just to make a title look “SEO-ish.”"
        />
        <QAItem
          n={4}
          q="What words should you leave out of an Etsy title?"
          badge={{ label: 'Etsy guidance', tone: 'guide' }}
          h3="Move subjective, sale, shipping, and non-essential gifting words out of the title."
          ans="Etsy's 2026 guidance says to clearly state the item, include the most important objective traits, and avoid repetition, subjective wording, price, shipping, and unnecessary occasion phrases."
          strat='Good title words: "linen dress", "silver ring", "walnut shelf". Weak title filler: "perfect gift", "free shipping", "on sale", "beautiful".'
        />
        <QAItem
          n={5}
          q="Should you repeat keywords in Etsy titles and tags?"
          badge={{ label: 'ShopFoundry recommendation', tone: 'recommendation' }}
          h3="Repeat only where it helps clarity or preserves an exact phrase worth keeping together."
          ans="Etsy's current guidance says to try not to repeat words in titles, and most seller pain around tags comes from wasting room on the same words instead of broadening coverage."
          strat='Keep one exact phrase together if it is truly the clearest buyer query. Otherwise, use your remaining title and tag space for new words, materials, styles, recipients, or occasions.'
        />
        <QAItem
          n={6}
          q="What happens if you change an Etsy title after publishing?"
          badge={{ label: 'Official Etsy rule', tone: 'official' }}
          h3="The listing title can change, but the listing URL does not update after publish."
          ans="Etsy Help says your listing's unique URL is based on the title you enter when you first publish. Once the listing is live, editing the title later will not change that URL."
          strat="If you make a major product shift, consider creating a new listing so the URL better matches what you're now selling."
        />
        <QAItem
          n={7}
          q="What title length works best for SEO?"
          badge={{ label: 'Etsy guidance', tone: 'guide' }}
          h3="There is no fixed official “best length.” Etsy's current guidance is clarity first."
          ans={<>Etsy says search now looks more holistically at the listing, including <strong>title, tags, attributes, descriptions, first photo, and reviews</strong>. That means the title no longer has to do all the work by itself.</>}
          strat="ShopFoundry recommendation: put the item type and top traits first, then stop once the title still reads naturally."
        />
        <QAItem
          n={8}
          q="Etsy title examples (weak vs. better)"
          h3="Front-load the search term, then add specifics."
        >
          <div className="ex-rows">
            <div className="ex-row bad"><span className="lbl">Weak</span><span className="txt">Beautiful Handmade Custom Personalized Leather Crossbody Purse for Women Gift Idea</span></div>
            <div className="ex-row good"><span className="lbl">Better</span><span className="txt">Leather Crossbody Bag Women, Personalized Zipper Purse, Handmade Boho Shoulder Bag, Custom Birthday Gift</span></div>
          </div>
          <p className="strat">The better version clearly states the item, brings key traits forward, and removes filler.</p>
        </QAItem>
      </div>
      <SourceLinks
        links={[
          { label: 'How to Create a Listing', href: 'https://help.etsy.com/hc/en-us/articles/115015628707-How-to-Create-a-Listing' },
          { label: 'New Guidance for Listing Titles, and a Tool to Help', href: 'https://www.etsy.com/seller-handbook/article/1399426136697' },
        ]}
      />
    </section>
  );
}

// ============================================================
// [4] TAGS
// ============================================================
function TagSection() {
  return (
    <section className="section" id="tag-limit">
      <div className="section-head">
        <span className="eyebrow"><span className="dot" /> 04 · Tag limit</span>
        <h2 className="h2">Etsy tag character limit.</h2>
        <span className="hard-answer">13 tags · 20 characters each · multi-word phrases allowed</span>
        <p className="lead">Tags are one of the cleanest places to separate documented rules from optimization habits. The rules are narrow; the strategy layer is where sellers usually drift.</p>
      </div>
      <div className="qa-list">
        <QAItem
          n={1}
          q="How many tags can you use on Etsy?"
          badge={{ label: 'Official Etsy rule', tone: 'official' }}
          h3="13 tags per listing."
          ans={<>Etsy gives every listing <strong>13 tag slots</strong>. There's no penalty for leaving slots empty, but every unused slot is free SEO real estate you're skipping.</>}
          strat="Aim to fill all 13 with distinct phrases that broaden — not duplicate — your title."
          highlight
        />
        <QAItem
          n={2}
          q="What is the Etsy tag character limit?"
          badge={{ label: 'Official Etsy rule', tone: 'official' }}
          h3="20 characters per tag."
          ans={<>Each individual tag is capped at <strong>20 chars</strong>, including spaces. Room for 2-3 word phrases like "dog mom mug" (12) or "minimalist gift" (15).</>}
          strat="You don't need to pad to 20 — a 7-character tag like 'hobo bag' is valid if it's the right phrase."
        />
        <QAItem
          n={3}
          q="Do spaces count in Etsy tags?"
          badge={{ label: 'Official Etsy rule', tone: 'official' }}
          h3="Yes — spaces count toward the 20."
          ans={<>"Vegan leather bag" is a <strong>17-char</strong> tag, not 14. Plan multi-word phrases around the 20-character ceiling.</>}
          strat="If a phrase needs more than 20 characters, use a synonym instead of splitting it across tags."
        />
        <QAItem
          n={4}
          q="Can Etsy tags be multi-word phrases?"
          badge={{ label: 'Official Etsy rule', tone: 'official' }}
          h3="Yes — Etsy allows short descriptive phrases."
          ans='Etsy explicitly says a single tag can be a short descriptive phrase. "Dog mom mug", "small crossbody", and "gift for her" are all valid tag styles as long as they stay within 20 characters.'
          strat="ShopFoundry recommendation: phrase tags the way buyers actually search, not as isolated single nouns whenever possible."
        />
        <QAItem
          n={5}
          q="Should Etsy tags repeat words from the title?"
          badge={{ label: 'ShopFoundry recommendation', tone: 'recommendation' }}
          h3="Prefer variety over repetition."
          ans="Etsy's official tag guidance says to use accurate, relevant words and a diverse array of tags. That supports broader coverage than copying the same phrase structure repeatedly."
          strat="ShopFoundry recommendation: let the title cover the core item phrase, then use tags for materials, style, recipient, and occasion variations."
        />
        <QAItem
          n={6}
          q="Should Etsy title and tags match?"
          badge={{ label: 'ShopFoundry recommendation', tone: 'recommendation' }}
          h3="They should reinforce the same item, without turning into word-for-word clones."
        >
          <p className="ans">Official Etsy guidance supports consistency across title, tags, and attributes. The exact percentage overlap is not an Etsy rule.</p>
          <div className="ex-rows">
            <div className="ex-row bad"><span className="lbl">Don't</span><span className="txt">Title says "Leather Crossbody Bag"; tags "leather bag", "leather crossbody", "crossbody purse" — three near-identical entries.</span></div>
            <div className="ex-row good"><span className="lbl">Do</span><span className="txt">Title says "Leather Crossbody Bag"; tags "vegan leather", "shoulder bag", "boho purse", "everyday bag", "small crossbody" — each opens a different search.</span></div>
          </div>
        </QAItem>
      </div>
      <SourceLinks
        links={[
          { label: 'How to Use Tags to Get Found in Search', href: 'https://help.etsy.com/hc/en-us/articles/360000336307-How-to-Use-Tags-to-Get-Found-in-Search?segment=selling' },
          { label: 'How to Create a Listing', href: 'https://help.etsy.com/hc/en-us/articles/115015628707-How-to-Create-a-Listing' },
        ]}
      />
    </section>
  );
}

// ============================================================
// [5] DESCRIPTION
// ============================================================
function DescSection() {
  return (
    <section className="section" id="description-limit">
      <div className="section-head">
        <span className="eyebrow"><span className="dot" /> 05 · Description limit</span>
        <h2 className="h2">Etsy description character limit.</h2>
        <span className="hard-answer">~10,000 characters is widely cited · the opening sentence still matters most</span>
        <p className="lead">Descriptions are where Etsy myths spread fastest. The useful split here is Etsy guidance for buyers and Google guidance for snippets, not made-up fixed thresholds.</p>
      </div>
      <div className="qa-list">
        <QAItem
          n={1}
          q="What is the Etsy description character limit?"
          badge={{ label: 'Current documentation', tone: 'guide' }}
          h3="About 10,000 characters is widely cited, but Etsy's current Help docs focus more on clarity than on a published hard cap."
          ans={<>The official guidance is to <strong>describe the details of your item clearly</strong> and include relevant keywords when they help buyers understand what they're getting.</>}
          strat="ShopFoundry recommendation: treat ~10,000 as a practical ceiling, but write for clarity and scan speed rather than trying to fill space."
          highlight
        />
        <QAItem
          n={2}
          q="Do the first 160 characters of an Etsy description matter?"
          badge={{ label: 'Google guidance', tone: 'search' }}
          h3="Yes — but not because Etsy guarantees a fixed 160-character snippet."
          ans={<>Google says snippets are <strong>automatically generated from page content</strong> and truncated as needed to fit the device width. Etsy also recommends putting the most important information first in your description.</>}
          strat="Lead with the item, a key trait, and one concrete buyer detail. Don't open with “Welcome to my shop!”"
        />
        <QAItem
          n={3}
          q="How long should an Etsy description be?"
          badge={{ label: 'ShopFoundry recommendation', tone: 'recommendation' }}
          h3="Long enough to answer buyer questions quickly, short enough to scan."
          ans="Etsy's official docs do not set a best-practice length range. What matters is that the top of the description makes the item easy to understand."
          strat="ShopFoundry recommendation: front-load the hook, then move into bullets for dimensions, materials, turnaround, and care."
        />
        <QAItem
          n={4}
          q="Does the Etsy description help SEO?"
          badge={{ label: 'Etsy guidance', tone: 'guide' }}
          h3="Yes — especially for buyer clarity and external search snippets."
          ans="Etsy's Seller Handbook says listing descriptions help entice, inform, and engage buyers, and that keywords and phrases in descriptions are considered by both offsite and Etsy search."
          strat="Write the opening lines for clicks and comprehension. Write the rest to remove hesitation."
        />
      </div>
      <SourceLinks
        links={[
          { label: 'How to Create a Listing', href: 'https://help.etsy.com/hc/en-us/articles/115015628707-How-to-Create-a-Listing' },
          { label: '5 Tips for Writing Listing Descriptions', href: 'https://www.etsy.com/seller-handbook/article/26330089019' },
          { label: 'Google Search snippets guidance', href: 'https://developers.google.com/search/docs/appearance/snippet' },
        ]}
      />
    </section>
  );
}

// ============================================================
// [6] PERSONALIZATION
// ============================================================
function PersonalizationSection() {
  return (
    <section className="section" id="personalization-limit">
      <div className="section-head">
        <span className="eyebrow"><span className="dot" /> 06 · Personalization</span>
        <h2 className="h2">Etsy personalization character limit.</h2>
        <span className="hard-answer">Up to 5 fields per listing · text boxes can be limited to 1-1,024 characters</span>
        <p className="lead">Personalization is where outdated blog posts still mislead sellers. Etsy's current setup is more flexible than most old guides suggest.</p>
      </div>
      <div className="qa-list">
        <QAItem
          n={1}
          q="What is the Etsy personalization character limit?"
          badge={{ label: 'Official Etsy rule', tone: 'official' }}
          h3="For text boxes, Etsy lets you set a limit between 1 and 1,024 characters."
          ans={<>Etsy's current help article tells sellers to choose a <strong>character limit (1-1,024)</strong> based on the design and what the buyer needs to provide.</>}
          strat="ShopFoundry recommendation: keep the ask narrow. If you only need a name, don't invite a paragraph."
          highlight
        />
        <QAItem
          n={2}
          q="How many personalization fields can you add on Etsy?"
          badge={{ label: 'Official Etsy rule', tone: 'official' }}
          h3="Up to 5 personalization fields per listing."
          ans={<>Etsy now allows <strong>up to 5 personalization fields</strong> on a listing. Each field should focus on a single detail.</>}
          strat="Use separate fields when buyers need to provide different inputs like name, date, and photo."
        />
        <QAItem
          n={3}
          q="When should you use personalization vs. variations?"
          badge={{ label: 'Etsy guidance', tone: 'guide' }}
          h3="Variations for fixed choices; personalization for free-form input."
          ans="Etsy's official guidance says to use personalization when buyers enter custom text or information, and variations when they choose from predefined options that affect inventory, price, or SKU."
          strat="Mixing the two is fine: color as a variation, name as personalization."
        />
        <QAItem
          n={4}
          q="Etsy personalization examples (vague vs. clear)"
          badge={{ label: 'ShopFoundry recommendation', tone: 'recommendation' }}
          h3="Specific field title + short instruction + example."
        >
          <div className="ex-rows">
            <div className="ex-row bad"><span className="lbl">Vague</span><span className="txt">"Let me know what you'd like!" — buyers send 3-paragraph messages and fight back at delivery.</span></div>
            <div className="ex-row good"><span className="lbl">Clear</span><span className="txt">Title: Name · Instruction: Enter the name you'd like printed on the front. Example: Clifton.</span></div>
          </div>
        </QAItem>
      </div>
      <SourceLinks
        links={[
          { label: 'How to Offer Personalized Listings', href: 'https://help.etsy.com/hc/en-us/articles/360000344528-How-to-Offer-Personalized-Listings' },
          { label: 'How to Create a Listing', href: 'https://help.etsy.com/hc/en-us/articles/115015628707-How-to-Create-a-Listing' },
        ]}
      />
    </section>
  );
}

// ============================================================
// [7] HOW TO CHECK (tool bridge) — short, downgraded
// ============================================================
function HowToCheck() {
  return (
    <section className="section" id="how-to-check">
      <div className="section-head">
        <span className="eyebrow"><span className="dot" /> 07 · How to check</span>
        <h2 className="h2">How to check Etsy character counts.</h2>
        <p className="lead">Three places to check before you publish — pick whichever fits the moment.</p>
      </div>
      <div className="tool-bridge">
        <div>
          <h3>Three ways to count Etsy characters</h3>
          <ul>
            <li><Icon.check /> <span><strong>Etsy's listing editor</strong> shows a live counter as you type — most accurate, but only once you're inside Etsy.</span></li>
            <li><Icon.check /> <span><strong>Google Docs / Word</strong> via Tools → Word Count — fine for offline drafts.</span></li>
            <li><Icon.check /> <span><strong>The Title Studio at the top of this page</strong> — checks your draft against the documented limits and highlights where the advice is guidance rather than a hard Etsy rule.</span></li>
          </ul>
        </div>
        <a className="btn btn-primary" href="#analyzer"><Icon.bolt /> Open Title Studio</a>
      </div>
    </section>
  );
}

// ============================================================
// [8] COMMON MISTAKES — lightweight list
// ============================================================
const MISTAKES = [
  {
    wrong: 'Stuffing the title with every gift phrase you can think of.',
    instead: 'State the item clearly, bring forward the top traits, and move filler words like "perfect" or "beautiful" out of the title.',
  },
  {
    wrong: 'Copying near-identical tag phrases over and over.',
    instead: 'Use a diverse set of relevant tags. Once the core item phrase is covered, expand into materials, styles, recipient terms, and occasions.',
  },
  {
    wrong: 'Stretching short tags to fill the 20-character limit.',
    instead: '"Hobo bag" (8 chars) is a perfectly valid tag. Don\'t pad it to "hobo bag for women travel" — you\'re inventing a phrase nobody searches.',
  },
  {
    wrong: 'Opening the description with "Welcome to my shop!"',
    instead: 'Lead with the product, one key trait, and one concrete buyer detail. Etsy and Google both benefit when the top of the description is specific and easy to scan.',
  },
  {
    wrong: 'Using one vague personalization prompt for everything.',
    instead: 'Use separate fields when possible, and give each one a clear title, instruction, and example so buyers know exactly what to enter.',
  },
];

function CommonMistakes() {
  return (
    <section className="section" id="mistakes">
      <div className="section-head">
        <span className="eyebrow"><span className="dot" /> 08 · Common mistakes</span>
        <h2 className="h2">Five mistakes that cost rank.</h2>
        <p className="lead">Every shop hits these. Each fix is small — and measurable the next time Etsy re-scores the listing.</p>
      </div>
      <div className="mistakes-list">
        {MISTAKES.map((m,i)=>(
          <div className="mistake-row" key={i}>
            <span className="no">{String(i+1).padStart(2,'0')}</span>
            <div>
              <h3>{m.wrong}</h3>
              <div className="instead">
                <strong>Do this instead</strong>
                {m.instead}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============================================================
// [9] FAQ
// ============================================================
const FAQS = [
  { q: 'Do spaces count in Etsy titles and tags?',
    a: 'Yes. Spaces, commas, pipes, and every other character count toward Etsy\'s limits. "Leather Bag" is 11 characters (6 letters + 1 space + 4 letters), and "vegan leather" is a 13-character tag.' },
  { q: 'Can I change my Etsy title after publishing?',
    a: 'Yes. You can edit the title, but Etsy Help says the listing URL is based on the title used when you first publish and won’t change afterward.' },
  { q: 'What words should I avoid in an Etsy title?',
    a: 'Current Etsy guidance says to leave out subjective words like "beautiful" or "perfect," along with price, shipping, and unnecessary sale language. Keep the title focused on the item and its key objective traits.' },
  { q: 'Can Etsy tags be multi-word phrases?',
    a: 'Yes. Etsy explicitly allows short descriptive phrases in tags, up to 20 characters total including spaces.' },
  { q: 'Should you use all 13 Etsy tags?',
    a: 'Usually yes. Etsy gives you up to 13 opportunities to describe the item, so most sellers benefit from using all of them as long as the tags stay relevant and varied.' },
  { q: 'Does repeating keywords help Etsy SEO?',
    a: 'Official Etsy guidance points sellers toward clear titles and a diverse array of tags. Repetition usually adds less value than covering more relevant variations.' },
  { q: 'Can I use punctuation or special characters in Etsy tags?',
    a: 'Etsy says tags can include spaces, letters, and numbers. Apostrophes and hyphens are allowed within words and phrases, but tags can’t start with those characters.' },
  { q: 'How long should an Etsy description be?',
    a: 'Etsy\'s current seller help does not publish a hard description limit. The safest approach is to put the key facts first and make the rest easy to skim.' },
  { q: 'Does an Etsy description show up in Google?',
    a: 'It can. Google says snippets are generated automatically from page content and may vary by query, so the top of your description should explain the item clearly.' },
  { q: 'What is the Etsy personalization text limit?',
    a: 'For text-box personalization, Etsy lets you set a character limit between 1 and 1,024. Etsy also now allows up to 5 personalization fields per listing.' },
  { q: 'Is there an Etsy character counter or title checker?',
    a: 'Etsy\'s listing editor shows the official counters while you edit. The Studio at the top of this page is best used as a drafting and review aid, not a substitute for Etsy\'s own form.' },
];

function FAQ() {
  const [openIdx, setOpenIdx] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="section-head">
        <span className="eyebrow"><span className="dot" /> 09 · FAQ</span>
        <h2 className="h2">Frequently asked questions.</h2>
        <p className="lead">Short answers for the queries that usually trigger outdated Etsy advice or copied assumptions.</p>
      </div>
      <div className="faq-stack">
        {FAQS.map((f,i) => (
          <div key={i} className={`faq-item ${openIdx===i ? 'open' : ''}`}>
            <button className="faq-q" onClick={()=>setOpenIdx(openIdx===i ? -1 : i)}>
              <span>{f.q}</span>
              <span className="plus"><Icon.plus /></span>
            </button>
            <div className="faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============================================================
// [10] MORE ETSY LIMITS — compact
// ============================================================
const MORE_LIMITS = [
  { field: 'Shop name', num: '20 chars', hint: 'Hard to change once set. Brand-first; keyword bonus only.' },
  { field: 'Shop title', num: '55 chars', hint: 'Shows under your shop name and influences how your shop appears in search.' },
  { field: 'Section name', num: '24 chars', hint: 'Use real product types ("Tote Bags") — buyers and SEO read these.' },
  { field: 'Custom shop sections', num: '20', hint: 'Useful for organizing browse paths by product type or audience.' },
  { field: 'About section', num: '5,000 chars', hint: 'Tell your story, tied to why a buyer should trust you.' },
  { field: 'Listing photos', num: '20 photos', hint: 'First photo is the thumbnail that does the heaviest click work.' },
  { field: 'Listing video', num: '1 video · 5-15 sec', hint: 'One short, silent video per listing — autoplays on hover.' },
  { field: 'Digital files', num: '5 files · 20 MB each', hint: 'Digital-download listings can attach up to five files.' },
];

function MoreLimits() {
  return (
    <section className="section" id="more-limits">
      <div className="section-head">
        <span className="eyebrow"><span className="dot" /> 10 · More limits</span>
        <h2 className="h2">Related shop-level limits.</h2>
        <p className="lead">Listing limits are most of the SEO conversation, but the shop wrapper has its own ceilings worth knowing.</p>
      </div>
      <div className="compact-table">
        {MORE_LIMITS.map((m,i)=>(
          <div className="row" key={i}>
            <span className="f">{m.field}</span>
            <span className="n">{m.num}</span>
            <span className="h">{m.hint}</span>
          </div>
        ))}
      </div>
      <SourceLinks
        links={[
          { label: 'How to Change Your Shop Name', href: 'https://help.etsy.com/hc/en-us/articles/115015710568-How-to-Change-Your-Shop-Name' },
          { label: 'How to Add a Shop Announcement and Shop Title', href: 'https://help.etsy.com/hc/en-gb/articles/360000343708-How-to-Add-a-Shop-Announcement-and-Shop-Title' },
          { label: 'How to Create and Manage Shop Sections', href: 'https://help.etsy.com/hc/en-us/articles/360000345048-How-to-Create-and-Manage-Shop-Sections' },
          { label: 'How to Edit Your Shop’s About Section', href: 'https://help.etsy.com/hc/en-in/articles/115015628487-How-to-Edit-Your-Shop-s-About-Section' },
          { label: 'How to Create a Listing', href: 'https://help.etsy.com/hc/en-us/articles/115015628707-How-to-Create-a-Listing' },
        ]}
      />
    </section>
  );
}

// ============================================================
// FINAL CTA + FOOTER
// ============================================================
function FinalCTA() {
  return (
    <div className="wrap">
      <div className="cta">
        <div>
          <h2>Check your listing before you publish.</h2>
          <p>Drop a title, tag set, description, or personalization prompt into the live Studio at the top of this page. Free — no signup, no listing limits.</p>
          <div className="cta-actions">
            <a className="btn btn-accent btn-lg" href="#analyzer"><Icon.bolt /> Open Title Studio</a>
            <a className="btn btn-lg" href="#reference">Browse limits table <Icon.arrow /></a>
          </div>
        </div>
        <div className="cta-visual">
          <div className="cta-line"><span className="l-ic good"><Icon.check /></span> Title — 121 / 140 chars, item type is clear up front</div>
          <div className="cta-line"><span className="l-ic good"><Icon.check /></span> 13 / 13 tags, varied phrases with no duplicate spam</div>
          <div className="cta-line"><span className="l-ic warn">!</span> Description opener — make the first sentence more specific</div>
          <div className="cta-line"><span className="l-ic acc"><Icon.sparkle /></span> 2 AI rewrites ready to apply</div>
        </div>
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer>
      <div className="wrap foot-inner">
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="/logo.png" alt="ShopFoundry" style={{ width: 28, height: 28, borderRadius: 6 }} />
          <span>© 2026 ShopFoundry — Etsy seller toolkit.</span>
        </div>
        <div style={{ display: 'flex', gap: 22 }}>
          <a href="#title-limit">Title</a>
          <a href="#tag-limit">Tags</a>
          <a href="#description-limit">Description</a>
          <a href="#personalization-limit">Personalization</a>
          <a href="#faq">FAQ</a>
        </div>
      </div>
    </footer>
  );
}

window.MainLimitsTable = MainLimitsTable;
window.TitleSection = TitleSection;
window.TagSection = TagSection;
window.DescSection = DescSection;
window.PersonalizationSection = PersonalizationSection;
window.HowToCheck = HowToCheck;
window.CommonMistakes = CommonMistakes;
window.FAQ = FAQ;
window.MoreLimits = MoreLimits;
window.FinalCTA = FinalCTA;
window.Footer = Footer;