"use client";

export default function WoodConditionGuide() {
  const conditions = [
    {
      tag: "Brand new",
      tagClass: "tag-new",
      title: "New or uninstalled wood",
      desc: "Fresh wood with open grain and no weathering. Ideal for pre-staining before installation — all four sides coated, end grain sealed, maximum protection from day one.",
      action: "→ Pre-staining recommended"
    },
    {
      tag: "Recently installed",
      tagClass: "tag-recent",
      title: "Installed within 6 months",
      desc: "Newly installed wood is still drying and stabilizing. We check moisture content to confirm it's within the acceptable range before applying stain — timing matters here.",
      action: "→ Moisture check + first coat"
    },
    {
      tag: "Weathered",
      tagClass: "tag-aged",
      title: "Grey or weathered wood",
      desc: "Wood that has greyed and lost its surface. Needs Clean & Bright to strip the weathered layer and re-open the grain before stain can penetrate properly. Often surprises clients with how good it looks.",
      action: "→ Clean & Bright prep + stain"
    },
    {
      tag: "Neglected",
      tagClass: "tag-damaged",
      title: "Heavily neglected or damaged",
      desc: "Old stain, mildew, surface damage, or cracking. We assess whether restoration staining is the right solution or whether board replacement is needed first. We're honest about what will and won't work.",
      action: "→ Full restoration assessment"
    }
  ];

  return (
    <section className="condition-section" id="your-wood">
      <div className="reveal">
        <div className="section-eyebrow">What stage is your wood in?</div>
        <h2 className="sh">We work with wood<br /><span>at every stage.</span></h2>
      </div>
      <div className="condition-grid reveal">
        {conditions.map((card, index) => (
          <div key={index} className="condition-card">
            <span className={`condition-tag ${card.tagClass}`}>{card.tag}</span>
            <div className="condition-title">{card.title}</div>
            <div className="condition-desc">{card.desc}</div>
            <div className="condition-action">{card.action}</div>
          </div>
        ))}
      </div>
    </section>
  );
}